★★★박스모델(Box Model)
HTML 요소를 감싸는 가상적인 박스
컨텐츠(Content) : 박스의 내용물
패딩(Padding) : 컨테츠 주위의 영역
경계(Border) : 경계선
마진(Margin) : 박스와 다른 박스간의 여백
margin ="auto" width="길이 지정" -------- 중앙배치
text-align:center; ------ 텍스트 중앙정렬
*요소의 위치
속성 : top, bottom, left, right
정적위치설정(static) :: 블록 요소들은 박스처럼 상하로 쌓이고, 인라인요소들은 한줄에 차례대로
상대위치설정(relative) :: 정상적인 위치에서 상대적으로 요소가 배치
절대위치설정(absolute)
:: 전체 페이지를 기준으로 시작위치에서 top,left,bottom,right만큼 떨어진 위치에 배치
->시작위치란, 기본 태그생성시 왼쪽위상단에서 시작해서 써내려간다.
고정위치설정(fixed) :: 브라우저 윈도우를 기준으로 상대적으로 요소의 위치를 잡는것
-> 스크롤바가 움직여도 화면에 넘어가지않고 고정된다.
*float
float : left; -> 왼쪽에서 오른쪽으로 나열
float : right -> 오른쪽에서 왼쪽으로 나열
float를 사용하고 난뒤에 다른것이 또 나열된다면 그 요소 속성에서 clear : both;를 사용해주어야한다.
clear: both; /* 위에 float속성을 썼기때문에, footer는 content 왼쪽으로 나열된다
그래서 float를 썻던 속성을 말끔히 지워주어야한다.*/
1 2 3 4 5 6 7 8 9 10 11 12 13 | #content { width: 70%; background-color: blue; float: right; height: 100px; } #footer { background-color: aqua; width: 100%; height: 50px; clear: both; /* 위에 float속성을 썼기때문에, footer는 content 왼쪽으로 나열된다 그래서 float를 썻던 속성을 말끔히 지워주어야한다.*/ | cs |
1 2 3 4 5 6 7 8 | <body> <div id="wrapper"> <div id="header">header</div> <div id="nav">nav</div> <div id="content">content</div> <div id="footer">footer</div> </div> </body> | cs |
*overflow 속성
자식 요소가 부모 요소의 범위를 벗어났을때, 어떻게 처리할것인지 지정
overflow:hidden : 부모 영역을 벗어나는부분은 보이지않는다
overflow:scroll : 벗어나는부분을 스크롤할 수 있다.
overflow:auto : 자동으로 스크롤바가 생성
부모태그에 overflow:hidden을 지정하면 자식속성(ex)float)도 다 감춘다.
:: 위에 clear:both;보다는 float 속성을 쓴 태그들을 부모태그로 묶어서
부모태그에 overflow를 거는걸 많이쓴다
1 | #secondLine { overflow: hidden} | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <body> <div id="wrapper"> <div id="header">header</div> <!-- float속성이 있는 nav와 content를 부모태그로 묶어서 그 부모태그에게 overflow : hidden; 을 건다. 그러면 속성들이 숨겨져 다른 태그들에게 영향을 미치지 않는다. --> <div id="secondLine"> <div id="nav">nav</div> <div id="content">content</div> </div> <div id="footer">footer</div> </div> </body> | cs |
*z-index
position이 반드시 지정된 상태로 해야하며,
원하는 태그를 z-index에 숫자를 줘서 높이/우선순위를 정할 수 있다
기본값은0 으로 지정되어있으며, 나중에 쓰이는 태그가 먼저 쓰인 태그위로 덮혀지게된다.
*요소의 크기지정
min-width, min-height : 요소의 최소 크기
max-width, max-height : 요소의 최대 크기
:: 최소나 최대값이 정해지면 그 숫자의 영역을 넘어서지않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> img { position: absolute; left: 0px; top: 0px; z-index: -1; } </style> </head> <body> <!-- p태그에 아무 조건을 걸지 않기때문에 기본값으로 z-index : 0인 상태에서 p태그가 나중에 오기때문에 p태그를 이루고있는 문자열들이 사진 위로 덮히게되지만, img태그에서 z-index를 '음수'로 만듦으로써 img가 뒤로가게된다.--> <img src="../images/pome.png" width="200" height="200" /> <p>img 요소의 z-index가 -1이므로 다른 요소의 뒤에 위치한다.</p> </body> | cs |
*opacity(투명도) / visibility(뷰)
opacity - 0~1사이로 투명도 조절.
visibility : hidden / visible
hidden이면 안보인다. 단, 보이지않을뿐 영역은 차지하고있다.
visible이면 보인다
box-sizing : border-box -------- padding,border까지 포함
box-sizing : content-box --------- content영역만 해당
'JAVA > HTML, CSS' 카테고리의 다른 글
| CSS - nth-of-type() / white-space (0) | 2018.07.03 |
|---|---|
| Web - CSS(selector) (0) | 2018.07.02 |
| Web -Input 태그 (0) | 2018.06.28 |
| Web - <div> 태그 (0) | 2018.06.28 |
| Web - list (0) | 2018.06.27 |