-
[CSS] CSS의 모든 것 - (4) Float,Combinator, Navigation Bar, DropdownSTUDY/HTML.CSS.JS 2021. 3. 14. 19:06
CSS Float
CSS Layout - float and clear
float 속성은 웹 페이지에서 이미지를 어떻게 뜨워 텍스트와 함께 배치할 것인지 지정하는 속성이다.
float 속성이 가질 수 있는 값은,
- left : 왼쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 오른쪽에 위치하고, 위에서 아래로 내용이 흐른다.
- right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하고, 역시 위에서 아래로 내용이 흐른다.
- none : Default. 요소들이 부유하지 않는다.
- inherit : 부모 요소에서 상속
E.g.
img { float: none;}CSS Layout - clear and clearfix
clear 속성은 부유시킨 이후의 문서의 흐름을 제거하기 위해 쓰인다.
clear 속성이 가질 수 있는 값은,
- left : 왼쪽 부유 제거
- right : 오른쪽 부유 제거
- both : 양쪽 부유 제거
E.g
<style> .float-container { width:200px; border: 1px solid black; } .float-container img {float: right; margin: 2px; padding: 5px;} </style> <body> <div class="float-container"> <img src="img.jpg"> <p> Contents for image.Floating Right.</p> <p style="clear:both"> After the float. Clear the float</p> </div> </body>Float 속성을 레이아웃에서 많이 사용한다. 이 clear 속성도 float이 레이아웃에서 사용되며 발생하는 문제들을 해결하기 위해 많이 사용된다. float 속성을 사용한 태그는 정상적 요소로 처리가 되지 않는다.
아래에 나타나야 하는 내용이 float을 사용한 태그의 중간에 갑자기 나타나거나, 상위 태그의 높이가 없어지는 문제 등이 발생한다.
그렇기 때문에, float 속성을 사용한 후에는 clear 속성을 이용해 부유를 제거해주는 것이 좋다.
(예시는 이곳을 참고)
하지만 이렇게 float된 요소 다음에 clear 태그를 넣는 것은 불편하다. 이를 해결하는 위한 방법이 after 선택자이다.
float을 제거하고 싶은 컨테이너에 아래와 같은 방식으로 after 선택자를 적용하면 된다.
※IE8 이하에서는 동작하지 않음
.clearfix:after { content: ""; display: block; clear:both;}
CSS Combinators
CSS 선택자는 하나 이상의 simple 선택자를 포함할 수 있다. 여러개의 simple 선택자 사이에 Combinator 즉 결합자를 포함할 수 있다.
CSS에서의 결합자는 네가지가 있다.
- descendant selector (space) : 지정된 요소의 하위 항목인 모든 요소들을 지정한다.
- E.g div p { background-color: yellow;} -> div 태그 안에 있는 모든 p 태그를 지정한다.
- child selector (>) : 지정된 요소의 자식인 모든 요소를 선택한다.
- E.g div > p { background-color: yellow;} -> div 태그 하위의 자식인 모든 p 태그를 지정한다.
- adjacent sibling selector (+) : 특정 요소 바로 뒤에 있는 요소를 선택하는데 사용한다.
- 형제요소는 동일한 상위 요소를 가져야하고, 인접은 바로 다음을 의미한다.
- E.g div + p {background-color: yellow;} -> div 태그 바로 뒤의 p 태그를 지정한다.
- general sibling selector (~) : 지정된 요소의 형제인 모든 요소를 선택한다.
- E.g div ~ p {. . } -> div태그의 형제인 모든 p 태그를 선택한다.
CSS Navigation Bar & Dropdowns
navigation bar : www.w3schools.com/css/css_navbar.asp
dropdown: www.w3schools.com/css/css_dropdowns.asp
이 글은 w3school과 ofcourse를 참고하여 작성하였습니다.
'STUDY > HTML.CSS.JS' 카테고리의 다른 글