[HTML] CSS 스타일속성 2

※ 위치속성

  - 절대적 위치 좌표 : x, y좌표를 설정해 절대적 위치를 지정

  - 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적으로 위치를 지정

 

 

 

▶ CSS에서 위치와 관련된 Positioning 방식

  1. normal flow : (default) 사용자가 기본적으로 가지고 있는 positioning

  2. absolute positioning : ★absolute/relative★

  3. float

 

   ▷ top, bottom, left, right

        - 위치지정 속성들은 절대, 상대 위치 지정과 함께 사용

 

 

 

▶ ★position 관련 style 속성

           ㄴ element 의 위치 지정방식, 흐름의 종류를 정함

 

   ▷ static

      - default

      - 엘리먼트가 본래 가지고 있는 흐름을 가짐

      - 태그가 위에서 아래로 순서대로 배치됨

 

   ▷ relative

      - 기본값인 static일 때의 위치를 기준으로 이동한 위치값을 가지게 됨

      - 원래 위치를 기준으로 위치값을 가짐

      - 이동했을때 원래의 위치자리가 없어지지 않고 남아있음

 

   ▷ absolute

      - 엘리먼트의 순서에 따른 흐름을 무시하고 절대적인 위치를 가짐

      - 부모 엘리먼트를 기준으로 위치값을 가짐

          ㄴ 부모가 absolute나 relative여야 부모 기준으로 움직임

              부모가 static이면 부모 무시하고, body기준으로 움직임 ▽

.box1{background:pink; position:absolute; top:100px;left:100px; }
.box2{background:skyblue; left:40px;top:20px; width:80px;height:50px;
        position:absolute;
}

 

 

자손의 position 속성에 absolute 키워드를 적용하려면 지켜야할것

1) 자손의 position 속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력해야함

2) 자손의 position을 absolute 로 적용하면 부모의 position을 relative 로 적용해야함

 

 

[relative/absolute 비교]

  · relative : 엘리먼트의 원래 위치를 기준으로 위치 이동 , 엘리먼트의 원래의 높이와 넓이 값이 적용

  · absolute : 부모 엘리먼트를 기준으로 위치가 이동 , 원래 영역이 사라짐

 

 

 

   ▷ z-index

      - 레이어의 수직 위치를 지정

      - 정수 및 음수값을 가지게 되며, 숫자가 커질수록 위에 보여짐

          ( = z-index 값이 작을수록 아래에 쌓이고, z-index 값이 크면 z-index 값이 작은 요소보다 위에 쌓이게 됨 )

<style>
    .box { 
        width: 100px; height: 100px; 
        position: fixed;
}
	.box:nth-child(1) {
        background-color: red;
        left: 10px; top: 10px;
        z-index: 100;
}
    .box:nth-child(2) {
        background-color: green;
        left: 50px; top: 50px;
        z-index: 10;
}
    .box:nth-child(3) { 
        background-color: blue;
        left: 90px; top: 90px;
        z-index: 1;
}
</style>

  = > z-index 속성이 큰 태그가 앞으로 올라옴

 

 

 

   ▷ overflow 속성

       - 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성

 

     visible : 기본값, 내용이 영역을 바깥으로 벗어나 보이게 됨

     auto : 초과되는 내용이 있을 때만 스크롤을 보여줌

     hidden : 영역을 벗어나는 부분을 보이지 않게 만든다

     scroll : 영역을 벗어나는 부분을 스크롤로 만든다

body > div {
    width: 400px; height: 100px;
    border: 3px solid black;
    position: relative; 
    overflow: hidden; // ☆
}

 

 

---

 

 

※ float 속성

  - 요소를 왼쪽이나 오른쪽에 배치

  - float로 띄운 박스는 문서의 일반 흐름을 타지 않음

         => 다른 블록 엘리먼트들은 float가 적용된 박스가 없는 것처럼 동작

  - float 한번 사용하고 나면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달됨

 

 

▷ left 

  - 태그를 왼쪽에 붙인다. (문서의 왼쪽으로 배치)

 

▷ right

  - 태그를 오른쪽에 붙인다.

 

▷ none (기본값)

 

 

 

▶ float 속성을 사용한 수평 정렬

<style>
    .box {
        width: 100px; height: 100px;
        background-color: red;
        margin: 10px; padding: 10px;
        /* 태그를 왼쪽으로 붙입니다. */
        float: left;
    }
</style>

left

right

 

 

▶ box1이 float : right 된 경우 

<style type="text/css">
    *{margin:0;}
    div{ width:150px;height:50px;text-align:center; }
    .box1{background:pink; float:right; } // ☆
    .box2{background:skyblue; }
    .box3{background:yellow; }
</style>

 

 

▶ 세 개의 박스를 float : left 한 경우

   - 부모 element 의 가로폭이 충분하지 않으면 밑으로 내려가지만

     그렇지 않을경우 left 부터 차례대로 배치됨

 

 

▶ float 속성을 사용한 레이아웃 구성

  - 부모 element 의 넓이가 충분하지 못하다면 float 된 element 가 밑으로 떨어지기 때문에

    이것들을 감싸주는 element 인 container 나 wrapper 가 필요하다

                                               ㄴ 안쪽 element 의 합보다 커야 함

 

  - ★자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용함★

: 레이아웃을 구성할 때 가장 많이 사용하는 공식이니까 그냥 외우자 서현아 ~ 

 

 

화면 레이아웃

  · float layout : (일반적) float 과 clear 속성을 활용하여 엘리먼트의 상대적 위치를 조절하여 화면 레이아웃을 잡아줌

  · position layout : position값과 top, left, right, bottom 값들을 활용하여 엘리먼트의 위치를 조절하여

                           화면 레이아웃을 잡아줌

 

  = > 이렇게 2가지 방법으로 화면의 레이아웃을 구성할 수 있다 ! 

 

 

▷ 초기화

   - 엘리먼트의 기본 스타일값은 브라우저의 종류나 버전별로 미묘한 차이가 있기 때문에

     제대로 된 화면출력을 하기 위해서는 반드시 초기화가 필요함 

   - 공통 선택자(*)를 사용하여 처리하기도 함

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
}

 

 

---

 

※ clear 속성

          - float 속성 무효로 만들기

clear : 속성값;

 

 

 

 ▶ 속성값 

 

     left : 왼쪽으로 떠있지 않도록 함

     right : 오른쪽으로 떠있지 않도록 함

     both : 어디에도 떠있지 않도록 함

     none : (default)왼쪽 오른쪽 모두에 뜰 수 있음

 

<style type="text/css">
    *{margin:0;}
    div{width:150px;height:50px;text-align:center}
    .box1{background:pink;float:left;} 
    .box2{background:skyblue;float:left;} // 여기까지 float left
    .box3{background:yellow;clear:both;} // clear
    .box4{background:green;} // box3 에서 clear 되었기 때문에 float left 의 영향받지않음
</style>