[HTML & CSS] 도형 및 텍스트 가로정렬

[도형 가로정렬]

• 상위 엘리먼트와 하위 엘리먼트의 크기가 같으면 정렬기능을 사용할 수 없다.
• 뚱뚱한 고양이가 박스에 끼어있을 때 사람이 박스를 아무리 흔들어도 움직이지 않는 것처럼 모든 물체나 요소도 똑같이 상위 엘리먼트 크기와 하위 엘리먼트의 크기가 같으면 정렬할 수 없다. (가로와 세로 전부)

 

[브라우저에서 도형 취급을 받는 요소]

• display 속성이 block 요소일 때
• display 속성이 flex 요소일 때

 

[브라우저에서 도형 취급을 받는 요소의 가로정렬]

• margin-left: auto; 와 margin-right: auto; 를 사용한다.
• 두 속성은 움직여야할 태그에 직접 적용해야한다.
• margin-left: auto; 의 속성을 부여하면 도형 취급받는 요소는 오른쪽으로 정렬하게 된다.
• margin-right: auto; 의 속성을 부여하면 도형 취급받는 요소는 왼쪽으로 정렬하게 된다.
• margin-left: auto; 와 margin-right: auto; 의 속성을 둘 다 부여하면 도형 취급받는 요소는 가운데로 정렬하게 된다.

 

예시) 고무줄을 양손으로 잡고있다가 왼손만 놓으면 고무줄이 오른쪽으로 가는 것처럼 margin-left: auto;를 사용하면 왼쪽이 auto로 풀리기 때문에 도형 취급받는 요소가 오른쪽으로 정렬된다. margin-right: auto;도 같은 원리로 왼쪽으로 정렬되고, 고무줄을 양손으로 잡고있다가 양쪽 손 전부 놓으면 고무줄이 중앙으로 가는 것처럼 margin-left: auto; 와 margin-right: auto;를 함께 사용하면 도형 취급받는 요소가 중앙으로 정렬된다.

 

See the Pen 도형 가로정렬 by psm817 (@psm817) on CodePen.

 

 

[텍스트 취급받는 요소의 가로정렬]

• text-align: left; 는 텍스트를 왼쪽 정렬
• text-align: center; 는 텍스트를 가운데 정렬
• text-align: right; 는 텍스트를 오른쪽 정렬
• 움직여야 할 요소를 감싸고 있는 엘리먼트에 적용한다.
• 상위 엘리먼트에서 align을 적용하게 되면 하위 엘리먼트에서 해당 속성값이 적용되고, 하위 엘리먼트 각각에 align을 적용하게 되면 해당 엘리먼트 text에 속성값이 적용된다. (font-size를 통한 inline-block 여백 없애기와 유사)

 

예시)   <div class="inline-block">텍스트</div>
           <span>텍스트</span>

 

• 예시와 같은 html에서 div와 span태그의 상위 엘리먼트는 body이다. body에서 text-align: right;를 적용하면 하위 엘리먼트인 div와 span 태그에 모두 적용되어 태그가 오른쪽으로 정렬하게 된다. 이 때 조건은 div태그의 display 속성을 inline-block으로 바꾼다는 조건 하에 정렬이 가능하다. (텍스트를 취급하는 요소는 inline과 inline-block이기 때문에)
• 텍스트 속성은 적용한 태그부터 하위 엘리먼트까지 전부 적용된다.

 

★★★★★

• 텍스트는 기본적으로 line-height를 가지고 있다.
• line-height는 폰트를 만들면서(텍스트를 입력하면서) 설정된다.
• line-height는 상위 엘리먼트의 세로 중앙정렬을 할 수 있고, 텍스트를 세로 중앙정렬할 때는 absoulte나 flex-item 처리 하는 것보다는 line-height로 정렬하는 것이 좋다.
• line-height 또한 텍스트 속성이기 때문에 적용한 엘리먼트와 하위 엘리먼트에 전부 상속된다.
• line-height는 대부분 a태그 또는 span태그에서 사용된다.
• display가 inline인 요소에 사용하면 텍스트 위치가 고정된 상태로 line-height 수치가 적용된다.

See the Pen 텍스트 취급받는 요소 가로정렬 by psm817 (@psm817) on CodePen.

 

 

[마켓컬리 탑바 제작 연습]

See the Pen 마켓컬리 탑바 제작 by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 8일차 복습 by psm817 (@psm817) on CodePen.