-
CSS 9강 Float , 구글 UI 클론코딩Javascript 2021. 5. 25. 20:39
9강 - Float
float 프로퍼티는 블록 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.
flexbox으로 대체할 수 있지만 지원하지 않는 브라우저(IE)가 있기 때문에 알아야 한다.
float을 사용하지 않은 블록 요소들은 수직으로 정렬된다
float:left 가 사용된 블록 요소들은 왼쪽부터 가로 정렬된다
float:right 가 사용되면 오른쪽부터 가로 정렬된다.
<!DOCTYPE html> <html> <head> <style> body { margin: 0; } div { width: 500px; margin: 0 auto; } .box { width: 100px; height: 100px; border-radius: 5px; margin: 20px; color: white; padding: 10px; font-size: 40px; font-weight: bold; } .box1 { background-color: red; float: left; } .box2 { background-color: blue; float: left; } </style> </head> <body> <div class="box box1">1</div> <div class="box box2">2</div> </body> </html>출력 결과
: 왼쪽부터 가로정렬, padding과 margin을 이용해서 띄우기
float 프로퍼티 관련 문제 해결 방법
1. float 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 경우
- float이 선언되지 않은 요소에 overflow:hidden 추가
2. 부모 요소가 float 선언된 자식을 포함할 때 부모 요소의 높이가 정상적으로 반영되지 않는 경우
- 부모 요소에 overflow:hidden 추가
<style> .container { color: white; text-align: center; padding: 10px; background-color: #def0c2; overflow: hidden; } .d1, .d2 { float: left; width: 50%; padding: 20px 0; } .d1 { background-color: #59b1f6; } .d2 { background-color: #ffb5b4; } </style> </head> <body> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> </div> <div style="background:red;padding:10px;color:white;">3</div> </body>출력 결과
overflow:hidden 없을 때 
overflow:hidden 추가 :after 가상 요소 선택자를 이용한 해결 방법
부모 요소에 :after 가상 요소 선택자를 사용해서 공백의 컨텐츠를 삽입해서 해결한다.
<style> .clearfix:after { content: ''; display: block; clear: both; } </style> <body> <div class="container clearfix"> <div class="d1">1</div> <div class="d2">2</div> </div> <div style="background:red;padding:10px;color:white;">3</div> </body>inline-block을 이용한 해결 방법
d1, d2에 display: float 대신에 display: inline-block을 사용한다.
이때 두 요소간 공백이 생기는데 부모 요소에 font-size:0px 넣어서 공백을 제거하면 된다.
구글 UI 클론코딩
- 구글 메인화면과 최대한 비슷하게 만들어보기
- 1일차: 상단 메뉴 만들기
- 실제 구글 메인화면처럼 균형감있고 보기좋게 CSS 작업을 하려고 수치를 많이 넣어가면서 조정했다.
<html> <head> <style> body { margin: 0; } .menus { margin: 10px; text-align: center; } .login { width: 100px; height: 40px; background-color: #1973E8; border-radius: 3px; text-align: center; line-height: 40px; color: white; font-size: 14px; font-weight: bold; } .text { font-size: 15px; color: black; text-align: center; line-height: 40px; } .float-right { float: right; } .margin-right { margin-right: 10px; } .menuicon { line-height: 45px; margin-right: 20px; margin-left: 10px; margin-top: 11px; } </style> </head> <body> <div> <div class="menus"> <a class="login float-right">로그인</a> <a href="" class="float-right margin-right menuicon"> <img src="../menuicon.png" width="15px" height="15px"></a> <a href="" class="text float-right margin-right">이미지</a> <a href="" class="text float-right margin-right">Gmail</a> </div> </div> </body> </html>출력 결과
'Javascript' 카테고리의 다른 글
Javascript 객체, 함수 (0) 2021.05.27 구글 UI 클론 코딩-2 (0) 2021.05.26 CSS poiemaweb 2강~8강 (0) 2021.05.24 HTML 복습 및 CSS 공부 시작 (0) 2021.05.23 HTML 기초 학습 (0) 2021.05.22