1. position 속성

relative

• 좌표에 따라 위치가 정해짐

예시)
relative속성을 가진 두 테두리에 한 테두리에는 좌표(top -20, left 30)를 정해진 것을 볼 수 있다.

absolute

• 부모 태그 (relative) 위치 내에서 상대적 위치가 정해짐 ( 부모 태그가 없다면 현 문서 전체내에서 정해짐 )

예시)

relative속성을 가진 테두리 내에서 absolute속성을 가진( 노란 영역 )의 좌표( left 0, bottom 0 )에 따라 위치가 정해진 것을 볼 수 있다.

fixed

• 위에 속성과 다르게 스크롤에 관여 받지 않고 좌표에 따라 고정이 됨

예시)


fixed속성을 검은색 영역이 위에 사진과 같이 스크롤을 내려도 변함없니 고정되어 있음을 확인 할 수 있다.

2. inline, inline-block, block

2.1 inline ( span, a, i, b 태그 해당 )

      .inline1 {
        width: 100px;
        border: 1px solid black;
      }
      .inline2 {
        width: 200px;
        border: 1px solid black;
      }
      
    <span class="inline1">
      inline1
    </span>
    <span class="inline2">
      inline2
    </span>

width값이 정해져 있더라도 content에 따라 정해지고, 줄 바꿈이 되지 않는다.

2.2 inline-block

      .inline-block1 {
        display: inline-block;
        width: 100px;
        border: 1px solid black;
      }
      .inline-block2 {
        display: inline-block;
        width: 200px;
        border: 1px solid black;
      }
      
    <span class="inline-block1">
      inline-block1
    </span>
    <span class="inline-block2">
      inline-block2
    </span>

width값에 따라 그 영역을 사용하고, 대신 줄 바꿈이 되지 않는다.

2.3 block ( div, h, p, li 태그 해당 )

  .block1 {
     width: 100px;
     border: 1px solid black;
     }
  .block2 {
     width: 200px;
     border: 1px solid black;
     }
   
 <div class="block1">
   block1
 </div>
 <div class="block2">
   block2
 </div>

width의 값에 따라 그 영역을 통으로 사용, 줄 바꿈까지 됨. ( width 값이 없으면 전체를 사용 )

*3. float의

3.1 기본값

      header {
        background-color: yellow;
      }

      aside {
        width : 200px;
        background-color: green;
      }

      section {
        background-color: blue;
      }
      
       <header>
        header
      </header>
      <aside >
        aside
      </aside>
      <section>
        section
      </section>     

3.2 none

      header {
        background-color: yellow;
        float: none;
      }

      aside {
        width : 200px;
        background-color: green;
      }

      section {
        background-color: blue;
        float: none;
      }
      
      <header>
        header
      </header>
      <aside >
        aside
      </aside>
      <section>
        section
      </section>

기본 값과 같다 결과의 변화가 없음.

3.3 left

      header {
        background-color: yellow;
      }

      aside {
        width : 200px;
        background-color: green;
        float: left;
      }

      section {
        background-color: blue;
      }
 
       <header>
        header
      </header>
      <aside >
        aside
      </aside>
      <section>
        section
      </section>

aside float값을 left 로 주었더니 section이 aside오른쪽으로 위치되었다.
left로 줌으로써 aside를 왼쪽으로 위치시키면서 그에 따라 section이 위치된다는 것을 알게 되었다.

3.4 right

      header {
        background-color: yellow;
      }

      aside {
        width : 200px;
        background-color: green;
        float: right;
      }

      section {
        background-color: blue;
      }
 
       <header>
        header
      </header>
      <aside >
        aside
      </aside>
      <section>
        section
      </section>

반대로 aside float값을 right 로 주었더니 section이 aside왼쪽으로 위치되었다.
right로 줌으로써 aside를 오른쪽으로 위치시키면서 그에 따라 section이 위치된다는 것을 알게 되었다.