1. Display - inline, block, inline-block, none
- CSS의 display 속성을 통해서 inline 요소, block 요소로 변경해줄 수 있다.
1) inline
-
영역의 크기가 딱 컨텐츠 크기로 정해짐
-
width, height 지정 불가능
-
margin, padding의 top, bottom을 지정할 수 없음. 양 옆(left, right)만 가능
-
여러 요소를 추가하면 가로방향으로 추가된다
-
ex)
<span>,<a>,<img>
2) block
-
영역의 크기를 width, height로 지정할 수 있음
-
width를 지정하지 않으면 가로줄 전체 크기를 차지 함
-
여러 요소를 추가하면 세로 방향으로 추가된다
-
ex)
<div>,<h1> - <h6>,<p>,<form>,<header>,<footer>,<section>
3) inline-block
-
width, height, margin, padding 지정 가능 (block)
-
여러 요소를 추가하면 가로방향으로 추가된다 (inline)
-
ex)
input
4) none
-
요소를 눈에 보이지않게 없앨 수 있음
-
display none
- 요소를 눈에 보이지 않게 없앨 수 있음
- 개발자 도구에서 보면, 코드상으로는 존재하지만 브라우저에는 보이지 않음
-
visibility hidden
- 똑같이 요소를 눈에 보이지 않게 하지만 차이점은
- 레이아웃은 남겨놓고 콘텐츠는 숨김
2. Float
-
float : (물, 공기에) 뜨다
- 특정 요소를 둥둥 뜨는 것처럼, 마치 별도의 레이어처럼 배치할 수 있음
-
예) 기사에 이미지를 넣을 때
-
기본값은 float:none;
-
container 값을 주게되면 컨테이너 내에서 끝까지 이동함
-
flex box가 나온 이후 부터는 사용빈도 적음
-
값
- left : (부모 요소의) 왼쪽에 뜨도록
- right : (부모 요소의) 오른쪽에 뜨도록
- none
- inherit : 부모의 float 값을 상속받음
input
html <div class="container"> <div class="image"></div> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores labore possimus deserunt, debitis est delectus fugit dolorum provident officiis esse ratione doloremque facere voluptate odio, totam, quisquam eum laboriosam voluptatem? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores labore possimus deserunt, debitis est delectus fugit dolorum provident officiis esse ratione doloremque facere voluptate odio, totam, quisquam eum laboriosam voluptatem? </p> </div> css .image { width: 100px; height: 100px; background-color: violet; border: 5px solid blue; float: left; /* 본인이 갈 수 있는 부모영역 내에서 가장 끝으로 감 */ margin: 10px; } .container { border: solid; width: 300px; margin-left: 100px; }output
3. Position
-
요소를 어떻게 배치할지 결정하는 CSS 속성
-
우선 Normal Flow 개념을 이해하는 것이 중요함
-
Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름
-
Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음
- 즉, 요소의 특성에 따라 Normal Flow가 정해져있는 것
-
코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다.
-
-
position 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는대로 제어하여 배치할 수 있음
-
position 속성은 top, bottom, left, right 속성과 함께 사용함
- position의 종류에 따라 top, bottom, left, right를 적용하는 방식이 달라짐
-
종류
-
static: 기본 값- top, bottom, left, right 속성을 사용할 수 없음 (작성해도 무시된다)
- 단순히 normal flow로 배치된다
-
relative: 자기 자신을 기준으로 삼는다 -
absolute: static이 아닌 부모중에서 기준점을 삼는다 -
fixed: 뷰포트를 기준으로 삼는다 -
sticky
-
3-1. Position - relative, absolute, fixed, sticky
1) relative
- 동작 흐름
-
Normal Flow를 따라 배치한 원래
자기 자신의 위치를 기준으로 -
top, right, bottom, left의 값에 따라 최종 위치 지정(offset 적용)
-
값 : 양수값, 음수값 모두 줄 수 있음
-
반대가 되는 값을 동시에 선언하면?
-
top, bottom을 동시에 선언하면? top만 적용
-
left, right를 동시에 선언하면? left만 적용
-
input
html <div></div> <div id="box"></div> <div></div> css div { width: 200px; height: 200px; border: 5px solid orangered; margin-left: 150px; } #box { background-color: peachpuff; position: relative; top: 100px; bottom: ; left: 150px; right: ; /* position이 static일땐 사용할 수 없다 */ /* positon이 relative일 때 top/bottom 동시에 값을 주면 bottom값은 무시됨 */output
2) absolute
- 동작 흐름
-
요소를 Normal Flow에서 제거하고,
-
가장 가까운 부모 요소를 기준으로
-
position: static(디폴트 값)이 아닌 가장 가까운 부모 요소를 찾는다
-
그런 요소가 없으면 body를 기준으로
- top, right, bottom, left 값에 따라 최종 위치 지정(offset 적용)
-
Normal Flow에서 제거되므로 (자기만의 독단적 흐름), 마치 float 처럼 새로운 레이어가 추가되어 둥둥 뜨게 된다.
-
주로 기준점으로 잡고싶은 부모를
postion:relative로 설정하고, 자식 요소를position:absolute로 자주 쓴다
input
html <body> <div></div> <div id="parent"> <div id="box"></div> </div> <div></div> </body> css div { width: 200px; height: 200px; border: 5px solid orangered; } #parent { position: relative; } #box { width: 150px; height: 100px; border-color: darkblue; background-color: cornflowerblue; border-radius: 30px; position: absolute; top: 100px; }
3) fixed
- 동작 흐름
-
요소를 Normal Flow에서 제거하고,
-
눈에 보이는
뷰포트를 기준으로 -
top, right, bottom, left 값에 따라 최종 위치 지정
-
스크롤을 쭉 해도 계속 따라온다.
-
뷰포트(눈에 보이는 창)이 계속 변경되기 때문에!
-
예) 팝업창, 문의하기 버튼, 네비게이션 바, 광고창 등
-
input
html <body> <div></div> <div id="parent"> <div id="box"></div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> css div { width: 200px; height: 200px; border: 5px solid orangered; } #parent { position: relative; } #box { width: 150px; height: 100px; border-color: darkblue; background-color: cornflowerblue; border-radius: 30px; position: fixed; bottom: 40px; right: 40px; }
4) sticky
- 동작 흐름
-
Normal Flow를 따르고,
-
가장 가까운 스크롤이 되는 부모를 기준으로
- 기본적으로 스크롤이 되는 상황에서만 효과가 나타난다
-
top, right, bottom, left 값에 따라 최종 위치 지정
-
sticky라는 이름을 기억하면 이해하기가 쉽다. 스크롤을 내리다가 특정 시점부터 마치 fixed처럼 동작한다.
-
스크롤 되는 조상의 하위에 위치 시켜야함
input
html <body> <div></div> <div></div> <div></div> <div id="parent"> <div id="box"></div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> css div { width: 200px; height: 200px; border: 5px solid orangered; } #parent { position: sticky; top: 100px; left: 100px; } #box { width: 150px; height: 100px; border-color: darkblue; background-color: cornflowerblue; border-radius: 30px; }
4. Z-index
-
여러개의 요소가 겹칠 때, 위로(z축으로) 쭉 쌓이게 된다.
- 겹치게 쌓이면 어떤 요소는 가려질수 있다.
-
z축의 순서를 지정하는 속성이 z-index
- z-index는 position이 지정된 요소에만 동작한다.
-
값 : 정수(양의 정수, 음의 정수)
- 수가 클수록 위로 올라온다.
-
zindex: auto (default 값)
-
코드를 작성한 순서대로 쌓이게 된다
-
position을 별도로 지정하면(==relative, absolute, fixed, sticky), static보다 무조건 위로 뜨게 된다.
-
-
앞쪽에 보여지게 할 요소 position값 주기, z-index 값 높게 주기
-
뒤로 보여지게 할 요소 z-index 값 낮게 주기
-
예) 팝업창, 경고창 등
input
html <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> css div { width: 150px; height: 150px; background-color: blanchedalmond; border: 3px solid orangered; } #box2 { margin-top: -60px; margin-left: 60px; position: relative; /* z-index: 1; */ } #box3 { margin-top: -120px; margin-left: 20px; position: relative; z-index: -1; }
5. Overflow
-
컨텐츠가 요소의 크기보다 많아서 넘쳐 흐를때, 이를 어떻게 표현할지 지정하는 속성
-
참고) 요소의 크기 지정 : width, height
-
내용이 넘치면 다른 요소와 내용이 겹칠 수 있기 때문에 목적에 맞게 조정해줘야 함
-
단축속성. shorthand 가능
- overflow-x, overflow-y
-
-
overflow: visible(default값)- 넘치면 깨져서 보임
-
overflow: hidden- 넘치는 컨텐츠는 안보임
-
overflow: scroll- 넘치는 컨텐츠는 스크롤로 내려서 볼 수 있음
-
overflow: auto- 브라우저가 알아서 선택
