CSS float
float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.
이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.
다음 예제는 이미지와 글자를 함께 출력하는 예제이다.
img { float: left; margin-right: 20px; }
clear 속성
clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 한다.
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
p { clear: both; }overflow 속성
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.
이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.
div { border: 3px solid #73AD21; padding: 5px;}
img { float: left; }
.good { overflow: auto; }float 속성을 이용한 레이아웃
현재 웹 페이지의 레이아웃은 대부분 float 속성을 이용하여 작성되고 있다.
다음 예제는 float 속성을 이용해 작성된 레이아웃을 보여준다.
div.page { border: 3px solid #CD5C5C; overflow: auto; }
h2 { text-align: center; }
header{ border: 3px solid #FFD700; }
nav { border: 3px solid #FF1493; width: 150px; float: left; }
section { border: 3px solid #00BFFF; margin-left: 156px; }
footer{ border: 3px solid #00FA9A; }CSS float 속성
|
속성 |
설명 |
|
float |
HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함. |
|
clear |
float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함. |
|
overflow |
내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함. |
|
overflow-x |
내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
|
overflow-y |
내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
align (정렬)
블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용할 수 있다.
- margin 속성을 이용한 가운데 정렬
- position 속성을 이용한 좌우 정렬
- float 속성을 이용한 좌우 정렬
margin 속성을 이용한 가운데 정렬
margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다.
이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어진다.
따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 한다.
div { width: 300px; margin: auto; }스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 margin 속성이 제대로 표현된다.
position 속성을 이용한 좌우 정렬
절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 된다. 따라서 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다.
position 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다.
이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.
div { width: 300px; padding: 10px; margin: 0; position: absolute; right: 0; }익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 position 속성이 제대로 표현된다.
float 속성을 이용한 좌우 정렬
float 속성을 이용하면 수평 방향으로 좌우 정렬할 수 있다.
float 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다. 이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.
div { width: 350px; padding: 10px; margin: 0; }
div.left { float: left }
div.right { float: right }익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야 float 속성이 제대로 표현된다.
[코딩공부] - CSS3 Transition, Animation
CSS3 Transition, Animation
Transition (전환) CSS3에서는 transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다. Transition 지원 버전 CSS3 전환(transition)을 지원하는 주요 웹 브라우저의 버전은..
smarti.tistory.com
[코딩공부] - CSS fixedNavigation2 예제 다운로드
CSS fixedNavigation2 예제 다운로드
FixedNavigation 2 Tutorial 예제보기 다운로드 네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다. 목록은 나중에 javascript에서 참조하기 위해 아이디를 가져온다. jQuery를
smarti.tistory.com
[디자인공부] - 마포꽃섬, 마포 서체 다운로드 및 설치
마포꽃섬, 마포 서체 다운로드 및 설치
Mapo꽃섬 서체 다운로드 및 설치 지자체 최초로 마포구가 마포의 상징 및 이미지를 살려 일자리 창출과 구의 홍보를 위해, 마포 브랜드 서체 개발 프로젝트로 완성 되었다. 다운로드 : www.mapo.go.kr/
smarti.tistory.com
포토샵으로 야구공 같은 문자 만들기
Adobe Photoshop으로 야구공 느낌의 문자 만들기 잔디 위에 놓여진 야구공을 보는 것 같은 느낌의 텍스트를 만들기 위해 레이어 스타일과 브러쉬 셋팅으로 만들어 본다. 먼저 레이어 창을 보자 1. 배
smarti.tistory.com
포토샵 PDF 저장하기
포토샵으로 PDF 저장하기를 알아보자 초보자를 위한 PDF 저장하기 Photoshop에서 작업한 문서를 '파일/다른 이름으로 저장' 또는 Ctrl+Shift+S 클릭한다. 위 창이 뜨면 파일형식을 PDF로 지정한다. 위와
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
| CSS3, vendor prefix, 선형 그래디언트 (0) | 2020.10.26 |
|---|---|
| CSS selector 통합정리 (0) | 2020.10.25 |
| CSS tooltip, form, @, scroll (0) | 2020.10.25 |
| CSS 이미지스프라이트, 네비게이션바, 드롭다운 (0) | 2020.10.23 |
| CSS 위치속성 디스플레이, 포지션, 오버플로우 (0) | 2020.10.21 |
| CSS 박스모델, 패딩, 테두리 (0) | 2020.10.16 |
| CSS 박스모델, 마진, 아웃라인 (0) | 2020.10.15 |
| CSS 크기, 크기 단위 (0) | 2020.10.14 |
댓글