마크업(markup)

마크업을 제대로 이해하려면 CSS 속성을 파헤쳐야 한다. 파파박

Layout

Display

  1. display: inline
    • 기본값
    • magin/padding - top/bottom 불가능
    • 컨텐트에 따라 크기 유동적
    • 텍스트 표현에 주로 사용 (font-family, color, style..)
    • 엘리먼트: b, u, strong..
  2. display: block
    • magin/padding - top/bottom 가능
    • with 없으면 브라우저 가로 사이즈에 가득 체워짐
    • 엘리먼트: div, p, ol, ul, li
  3. display: inline-block
    • inline + block
    • 컨텐트에 따라 크기 유동적 + magin/padding - top/bottom 가능
    • 텍스트 앞 뒤의 아이콘 (페이지 번호 등)
  4. display: none
    • invisible
display: inline
<div style="border:1px solid black">
    <span style="display:inline;margin:10px;padding:10px;border:1px solid red">인라인</span>
</div>

display: block
<div style="border:1px solid black">
    <span style="display:block;margin:10px;padding:10px;border:1px solid red">블록</span>
</div>

display: inline-block
<div style="border:1px solid black">
<span style="display:inline-block;margin:10px;padding:10px;border:1px solid red">인라인 블록</span>
</div>

display: inline

인라인

display: block

블록

display: inline-block

인라인 블록

Float

  • CSS 포지셔닝 속성
  • 레이아웃 구성 및 정렬 역할
  • inline-block과 유사
  • inline-block은 엘리먼트 사이 공백이 삽입되어 크로스 브라우징 이슈가 있어 float 사용
  • float을 끊어주는 방법은 clear: both / left / right
  • clear는 다음 엘리먼트를 위해 필수
  1. float: left
  2. float: right
  3. float: none

clear 방법

  • 마지막에 빈 div에 clear:both 추가
  • 마지막 엘리먼트에 :after로 clear:both 지정
  • parent - display:inline-block 지정
  • parent - overflow:hidden 지정

display: inline-block

<div style="display:inline-block;width:50px;height:50px;background-color:#ff0000"></div>
<div style="display:inline-block;width:50px;height:50px;background-color:#00ff00"></div>
<div style="display:inline-block;width:50px;height:50px;background-color:#0000ff"></div>

태그 줄바꿈을 하지 않으면 공백을 없앨 수 있다.

<div style="display:inline-block;width:50px;height:50px;background-color:#ff0000"></div><div style="display:inline-block;width:50px;height:50px;background-color:#00ff00"></div><div style="display:inline-block;width:50px;height:50px;background-color:#0000ff"></div>

VS.

float: left

<div style="float:left;width:50px;height:50px;background-color:#ff0000"></div>
<div style="float:left;width:50px;height:50px;background-color:#00ff00"></div>
<div style="float:left;width:50px;height:50px;background-color:#0000ff"></div>

float - clear 방법

  • 마지막에 빈 div에 clear:both 추가
<div style="float:left;width:50px;height:50px;background-color:#ff0000"></div>
<div style="float:left;width:50px;height:50px;background-color:#00ff00"></div>
<div style="float:left;width:50px;height:50px;background-color:#0000ff"></div>
<div style="clear:both"></div>
  • parent - overflow:hidden 지정
<div style="overflow:hidden">
    <div style="float:left;width:50px;height:50px;background-color:#ff0000"></div>
    <div style="float:left;width:50px;height:50px;background-color:#00ff00"></div>
    <div style="float:left;width:50px;height:50px;background-color:#0000ff"></div>
</div>
  • parent - display:inline-block 지정
<div style="display:inline-block">
    <div style="float:left;width:50px;height:50px;background-color:#ff0000"></div>
    <div style="float:left;width:50px;height:50px;background-color:#00ff00"></div>
    <div style="float:left;width:50px;height:50px;background-color:#0000ff"></div>
</div>

Position

1. postion: static

- 기본값
- div 쌓이는 방식으로 배치
- top, left, right, bottom 불가능

<div style="position:static;width:50px;height:50px;background-color:#ff0000"></div>
<div style="position:static;width:50px;height:50px;background-color:#00ff00"></div>
<div style="position:static;width:50px;height:50px;background-color:#0000ff"></div>
<!-- or -->
<div style="width:50px;height:50px;background-color:#ff0000"></div>
<div style="width:50px;height:50px;background-color:#00ff00"></div>
<div style="width:50px;height:50px;background-color:#0000ff"></div>

2. position: relative

- 상대좌표
- div 쌓이는 방식으로 배치
- top, left, right, bottom, z-index 가능

<div style="position:relative;width:50px;height:50px;background-color:#ff0000"></div>
<div style="position:relative;width:50px;height:50px;background-color:#00ff00;left:50px;"></div>
<div style="position:relative;width:50px;height:50px;background-color:#0000ff"></div>

3. position: absolute

- 절대좌표
- div 절대좌표로 배치 (쌓이는 방식 X)
- top, left, right, bottom, z-index 가능
- 주변 엘리먼트에 영향을 주지 않고 독립적
- parent = relative, absolute, fixed -> 영향 받음
- parent = static -> 영향 받지 않음
- parent = static, parent.parent != static -> 영향 받음

<div style="position:relative">
    <div style="width:50px;height:50px;background-color:#ff0000"></div>
    <div style="width:50px;height:50px;background-color:#00ff00;position:absolute;top:0;left:0"></div>
    <div style="width:50px;height:50px;background-color:#0000ff"></div>
</div>

<div style="position:relative">
    <div style="position: static">
        <div style="width:50px;height:50px;background-color:#ff0000"></div>
        <div style="width:50px;height:50px;background-color:#00ff00;position:absolute;top:0;left:0"></div>
        <div style="width:50px;height:50px;background-color:#0000ff"></div>
    </div>
</div>

4. position: fixed

- 브라우저 스크롤 시 위치 고정
- 주변 엘리먼트에 영향을 주지 않음
- top, left, right, bottom, z-index 가능
- parent 무시

Z-index

- 엘리먼트의 우선순위(z-index:0)
- 나중에 추가한 요소가 위에 위치
- position: static 아닌 경우만 사용
Written on December 31, 2015