[HTML & CSS] 정렬 문제풀이

[문제풀이]

• 아래 문제는 모든 태그와 텍스트를 가운데 정렬해보고자 만든 문제입니다.
• 도형취급을 받는 display 속성과 텍스트취급을 받는 display 속성을 잘 구분해서 풀어봅시다.
• 여유가 된다면 우측 하단에 버튼도 추가해봅시다.

See the Pen 문제 by kimhyeji324 (@kimhyeji324) on CodePen.

 

 

[문제 도전]

• img는 텍스트 취급을 받는 display: inline 요소이다. 따라서 img를 감싸고 있는 엘리먼트에 가운데 정렬을 한다.
• img-box에 text-align: center;을 적용한다.

 

• 하단에 텍스트들은 도형취급을 받는 display: block 요소 안에 써져있다. (h1, p 태그)
• text-box에는 가운데 정렬을 위해 margin-left: auto;와 margin-right: auto;를 적용한다.
• h1, p태그 각각에는 가운데 정렬을 위해 text-align: center;를 적용한다.

 

• '더보기 버튼'은 a태그로 하이퍼링크 속성을 부여한다.
• a태그의 기본 노멀라이즈 작업을 해준다.
• 외곽에 테두리를 생성하고 둥글게 만들어준다.
• a태그는 기본 display 속성이 inline이기 때문에 커스텀을 위한 display: block;를 지정해준다.

See the Pen 문제(psm) by psm817 (@psm817) on CodePen.

 

 

[속성별 풀이]

See the Pen 문제풀이(속성별) by psm817 (@psm817) on CodePen.

 

 

[전체 풀이]

• img의 기본 display 속성은 inline이다.
• inline은 margin: auto를 사용할 수 없다. (텍스트 취급을 하는 요소이기 때문에)
• inline은 무조건 text-align을 통해 정렬을 할 수 있다.
• text-align은 정렬해야하는 요소에 직접 적용할 수 없다.
• img 부모인 .img-box에 text-align을 적용하여 자식인 img를 움직이도록 한다.
• 상위 엘리먼트인 aside가 하위 엘리먼트인 section보다 넓이가 넓기 때문에 img는 중앙 정렬이 가능하다. (뚱냥이 예시)
• section의 기본 display 속성값은 block이다.
• block은 text-align을 사용할 수 없다. (도형 취급을 하는 요소이기 때문에)
• block은 무조건 margin: 0 auto를 사용해야 한다.
• margin: 0 auto는 정렬해야하는 요소 부모에 적용하면 안된다. 직접 적용해야한다.
• h태그는 기본 display 속성값이 block이다.
• block의 특성상 부모 넓이를 상속받기 때문에 .text-box 넓이를 100% 상속받았다.
• Lorem ispum이라는 텍스트는 block이 아니기 때문에 텍스트는 무조건 text-align을 사용해야 한다.
• text-align은 정렬해야하는 요소에 직접 적용할 수 없다.

See the Pen 풀이(전체) by psm817 (@psm817) on CodePen.