티스토리 뷰
블럭 태그에 text-align : center를 주면 그 내부에 있는 모든 인라인 요소가 가운데 정렬 된다. 이 속성은 상속 되는 속성이다.
블럭 태그 안의 모든 인라인 요소를 가운데 정렬 하고 싶을때는 text-align : center!
h1은 블럭태그이다. box 태그에 text-align : center를 줬기 때문에 h1도 이 속성을 상속 받았고 h1내부에 있는 글자도 그 속성을 상속 받아서 결과적으로 텍스트가 중앙정렬 되는 것이다. 절대로 h1태그 자체가 가운데 정렬 되는것이 아니다. 다음의 이미지를 보면 이해 할 수 있다.
보면 h1은 기본적으로 블락태그이기 때문에 한 행을 다 차지한다. 그런데, 텍스트는 가운데 정렬 되어 있다.(텍스트는 인라인 요소기 때문에 상속된 text-align : center 때문에 정렬 되는 것임!!)
그래서 h1 태그에 width를 주게 되면 위와 같이 변하게 된다.
그럼 h1태그 자체를 가운데 정렬 하고 싶으면? h1은 블럭태그이므로 margin 0 auto를 주면 되겠다!
h1의 width 값이 250으로 고정된 상황에서 텍스트의 크기를 늘리면 위와 같이 기이한 현상이 발생한다.
출처 : https://programmers.co.kr/learn/courses/4521/lessons/14635
'HTML&CSS' 카테고리의 다른 글
CSS - line-height 총 정리 (0) | 2019.04.24 |
---|---|
CSS - 음수 마진 (0) | 2019.04.24 |
CSS - Font Weight 속성 렌더링 이슈 (0) | 2019.04.24 |
CSS - 2019.04.23 (0) | 2019.04.23 |
CSS정리 - 2019.04.18 (0) | 2019.04.18 |
댓글
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- atomic design
- rendering scope
- typescript
- javascript
- promise
- state
- props
- useRef
- storybook
- computed
- async
- mobx
- Polyfill
- reflow
- Action
- type alias
- useEffect
- react
- es6
- react hooks
- server side rendering
- webpack
- return type
- Next.js
- reactdom
- await
- reducer
- hydrate
- design system
- Babel
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함