블록 요소
: <h1><p><ul><li><table><blockquote><pre><div><form><headr><nav>요소
인라인요소
<a><img><string><em><br><input><span>
css 의 display 속성
속성 display 를 block 으로 설정하면 -> 블록 요소처럼 배치
display 를 inline 으로 설정하면 -> 인라인 요소처럼 배치
display : block
display : inline
display : none 화면에 나타나지 않음
display-inline-block : 줄이 안바뀌면서 블럭요소처럼 인라인 요소를 만들어주기 위해
위치 설정 방법
-정적 위치 설정 (static positioning) : 정상적인 흐름에 따른 배치
-상대 위치 설정 (relative positioning) : 정상적인 위치가 기준점이 된다.
-절대 위치 설정 (absolute posiioning) : 컨테이너의 원점이 기준점이 된다.
-고정 위치 설정 (fixed positioning) : 윈도우의 원점이 기준점이 된다.
1) 정적 위치 설정 ( static positioning)
블록 요소들은 박스처럼 사아로 쌓이게 되고 인라인 요소들은 한 줄에 차례대로 배치
2) 상대위치 설정 ( relative positioning)
원래 있어야 할 자리 (지정해준자리) 에서 움직인다.
<style>
#one {background : color cyan;}
#two {position : relateve ; left : 30px; width : 200px; height : 50px}
#three {background-color : light green; }
3) 절대 위치 설정 ( absolute positioning )
전체 페이지를 기준으로 시작에서 top, left, bottom, right 만큼 떨어진 위 치에 배치
#two {
position : absolute ;
top : 30px;
left : 30px;
background-color : yellow
width : 200px;
height : 50px;
}
4) 고정 위치 설정 (fixed positioning )
브라우저 윈도우에 상대적으로 요소의 위치를 잡는 것
<style>
p {background-color : lightgreen; width : 200px; height : 50px;}
#two {background-color : yellow; position : fixed ; top : 0px; right : 10px;}
</style>
float 속성
clear 속성
float 속성을 중단할 때 사용된다.
z-index
overflow 속성
overflow 속성이란 : 자식 요소가 부모 요소의 범위를 벗어났을 때, 어떻게 처리를 할 것인지를 지정
hidden : 부모 영여을 벗어나는 부분을 보이지 않게 한다.
scroll : 부모 영역을 벗어나는 부분을 스크롤 할 수 있도록 한다. 안한다
auto : 자동으로 스크롤 바가 나타난다. 생길 수도 있고 안생길 수도 있다.
ex )
<style>
p {background-color : lightgreen; width : 200px; height : 50px; }
#target { border : 1px solid black; width : 300px; height : 100px;
overflow : scroll; }
</style>
<body>
<div id="target">
<p>block 1 </p>
<p>block 2 </p>
<p>block 3 </p>
<p>block 4 </p>
</body>
<div > 를 이용한 레이아웃
시멘틱 요소
<header> : 문서의 머리말
<hgroup> : <h1> 에서 <h6> 요소들의 그룹
<nav> : 내비게이션 링크
<article> : 문서의 내용이나 블로그의 포스트
<section> : 문서의 섹션
<aside> : 사이드바와 같이 옆에 위치하는 내용
<footer> 문서의 꼬리말
<figure > : 그림이나 도표 ex > <figcaption>제목부분</figcaptuion>
댓글
댓글 쓰기