CSS Position, Float, Pre, Vendor Prefix

191219 수업 내용 정리

---

position 속성

 -  위치 설정 속성(width, height와 같이 사용)
   1. static : 작성한 순서대로 화면에 배치, default
   2. absolute : 절대 좌표 지정, 포함되어 있는 요소의 기준점 기준 ( default = 브라우저 좌측 상단 )

                             ex) div {position: absolute; top: 0px; left: 0px;} (크기 지정 필수, 편의상 생략, 아래의 예들도 동일)

                                    → 해당 div태그가 브라우저 좌측 상단에 위치
   3. relative : 상대적인 좌표 지정, 기준 default = 요소가 만들어지는 흐름 안에서 이전 요소의 끝부분이 원래 있어야 할 위치

                          ex) div {position: relative; top: 10px; left: 10px;}

                                  → 해당 div태그가 바로 위에 위치한 태그의 끝부분에서 아래로 10px, 우측으로 10px 이동
   4. fixed : 고정된 위치에서 움직이지 않게 함, 스크롤해도 이동하지 않음, 기준점은 absolute와 동일함

                     ex) div {position: fixed; bottom: 0px; right: 0px;}

                            → 해당 div태그가 우측 하단에 고정됨, 스크롤해도 항상 같은 자리에 위치
  ※ static 외에는 좌표를 꼭 부여해 주어야 함
        ex) div { position: absolute; left: 0; top: 0; }

 

 

---

 

Float, Clear 속성
  float 

    - div태그로 설정된 영역들 사이에서 수평 정렬할 때 사용하는 속성, left/right 값 사용

    - 블록 태그들은 위에서 아래로 자동배치되지만, float를 사용하면 좌우로 배치해 줄 수 있음

 

  clear: both 

    - float를 적용한 요소의 다음 요소도 float에 영향을 받음

       → 따라서 float 사용이 끝났으면 clear 속성을 사용해서 float를 해제해야함

       → div { clear:both; }, 해당 태그부터 다시 수직으로 자동 배치

 

---

<pre> 태그

    - 소스코드에 작성된 텍스트를 화면에 그대로 표출하게 해줌, 원하는 부분을 <pre>로 감싸주면 됨

---

Vendor Prefix(브라우저별 접두어) 

   - CSS3 속성을 적용시킬 때 브라우저별로 다르게 표시하는 것이 필요할 때 속성 앞에 붙여서 사용
      1. -webkit- : Chrome, Opera, Safari 

      2. -ms- : IE(Internet Explorer)

      3. -moz- : FireFox

      4. -o- : Opera

---

position 속성은 생각보다 활용이 훨씬 어렵기 때문에 반복연습이 필요합니다.

div태그로 여러가지 박스를 만들어서 활용해 보는 것을 추천합니다.