화면에 배치하는 규칙 display / position / float / overflow
[ 배치규칙 display / position / float / overflow ]
<1. display > block / inline / inline-block / none
: 요소들을 배치하는 방식
- 기본 default 값 : block
=> 블록 형식으로 구성
- 각 태그들이 다 자기 블록을 가짐
< div display : inline; >
- inline으로 잡으면,
최대한 한줄에 나란히 배치해서 보여주려고 조절함.
(적당히 자기가 조절하면서 배치함. width 무시 )
ex.) 같은 크기의 태그일때도,
inline 으로 display 잡으면 한줄에 두개 잡히고
block 형식으로 잡으면, 줄 구분 하면서 잡힘
- display : inline-block;
: 섞은 형식
- display : none;
: 안보이게 감춰놓는 형식
=> 반응형 웹에서 크기에 따라 어떤 태그는 크기작을때는 숨겨버리고 싶으면,
display : none; 으로 조건 걸어두는식으로 사용된다.
< 2. position > static / absolute / fixed / relative
: 요소 위치 지정
[ static ]
=> 기본 default 값
=> 작성 태그 순서대로 나열
- 태그 순서가 위치에 최우선 적용
=> 태그들끼리는 침범 불가 ( top left bottom right 무시 )
(margin padding은 적용됨 / display : inline 도 적용됨 )
( positon : absolute / fixed / relative
=> 위치지정 필수
=> top / bottom / left / right 위치 지정 필요함 )
[ absolute ]
=> 웹브라우저 왼쪽 맨위 기준 절대 위치
.box{ width:100px; height:100px;
position: absolute; } ( 전체 적용되는건 여기서 한번에 적용해두고 )
.box:nth-child(1){ left : 200px; background-color:yellow; z-index:100;}
.box:nth-child(2){ top : 200px; background-color:lime; z-index:90;}
.box:nth-child(3){ left :200px; top : 200px; background-color:aqua; z-index:80;}
=> 왼쪽맨위에서부터 왼쪽으로부터 200px, 위에서부터 200px 절대위치로 지정
[ z-index ]
=> 겹치는 부분 처리
요소마다 z-index : 100; 값을 줘놓으면 (숫자는 알아서 적당히)
겹칠 때, 값이 큰것 우선으로 위로 올려 보여준다
[ fixed ]
=> 브라우저 왼쪽 위 기준 정해둔 위치에 고정
( 스크롤 해도 태그 움직이지 않음 )
position : fixed;
=> 실무에서
header(nav) 랑 footer 를 고정해서 fixed 로 많이사용!
div#navbar{
background-color: lime;
position:fixed;
top:10px;left:0;right:0;
height:50px;
}
[ relative ]
- 현재 위치 기준
----
<3. float > left / right
: 요소를 물 위에 띄우 듯 왼쪽/오른쪽 부터 차례대로 나열.
- width, height 무시
float : left;
1 2 3 4
5 6 7 8
float : right;
4 3 2 1
8 7 6 5
(- 이미지 나열할 때 많이 사용 )
[ clear ]
: float 특성 해제
- float 때문에 밑에 깔린 거 해제 시키고, 줄 구분해서 내림
clear : left; / right; / both;
#contents p{
border:1px solid orange;
width : 20%;
float : left;
}
div{
background-color:pink;
width:100px;
height:100px;
margin:10px;
padding:10px;
float : left;
}
p{background-color:gray;
clear : both;
}
[ % => 화면 키우든 늘리든 고정 ]
div width 줄 때, pixel 단위가 아니라
=> % 단위 사용 => 화면에 따라 %로 보여줘서
=> 구조 유지하면서 보여줌
< 4. overflow >
: 겹치는 부분 처리
overfolw : visible;
=> 그대로
overflow : scroll;
=>스크롤바로 보여줌
*(세트로 사용)
overflow : hidden;
=> 크기 넘어가면 안보여주겠다.
white-space : nowrap;
=> 엔터키 무시
text-overflow: ellipsis;
=> ... 으로 생략
세트효과 => 포털 기사에서 제목 뒤에 ... 으로 생략되어 표시되는 효과
*(이것도 세트)
overflow : hidden;
resize : auto;
( 넘어가는 부분 숨겨놓고, resize 마우스드래그로 크기 조절해서 볼 수 있음. )