CSS 4 정렬

17 Feb 2022

---

13th text-align

• text-align : 테스트 정렬 태그
  
• align : 맞추다 (alignment:조정하다)
  
  

    <div class="left">
        test sentence 1, 2
    </div>
    <div class="center">
        test sentence 3, 4
    </div>
    <div class="right">
        test sentence 5, 6
    </div>

.left { text-align: left; }

    .center {
    text-align: center;
    }

    .right {
    text-align: right;
    }

14th float

• float : 개체를 정렬
  div 세로정렬을 하고 싶을때 float을 쓰는 경향이 있다
  
• left -> right : 123 -> 321 정렬순서 변경
  

• none : 기본속성(float속성부여를 안함)
  
  

• border로 div영역을 시각적으로 확인하면서 조절
  

• black : #000 으로 표현했을 때 호환성이 좋음
  
  

• div에 .을 찍지 않음(따로 지정한 id, class 값이 아님)
  모든 div에 속성을 부여함
  

body {
  border: 1px solid #000;
}

div {
  float: left;
}

.left {
  text-align: left;
  border: 1px solid #000;
}

.center {
  text-align: center;
  border: 1px solid #000;
}

.right {
  text-align: right;
  border: 1px solid #000;
}