Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- async
- 중앙정렬
- truthy
- 동기적
- 논리연산자
- 돔조작
- 리액트
- addEventListener
- icoMoon
- git
- falsy
- 코딩공부
- 전역변수
- js
- INCLUDES
- 비동기적
- Await
- 이벤트위임
- 이벤트리스너
- 비구조화
- text-align
- 어웨이트
- 자바스크립트기초
- 버블링
- 자바스크립트
- map()
- 지역변수
- 프론트엔드
- 캡쳐링
- 단락회로평가
Archives
- Today
- Total
피리부는 사나이 (pied piper)
[CSS] inline, inline-block 본문
display의 속성
**Block vs Inline**
※Question : inline에 padding을 적용할 수 있을까?
■ Answer : 반은 맞고 반은 틀렸다. 좌우로는 패딩이 적용되나 싶은데,
상하로는 line-height 영역을 침범한다. (다른 줄의 base-line)
그렇다면 inline 요소의 성질을 유지한채로 block의 속성까지 갖을 수 있을까?
(block은 width, height 값이 먹고, padding 값을 먹으니까)
Inline-block이 해결해준다. 말 그대로 inline + block (하이브리드)
inline-block 패딩을 통해서 상하로 밀수 있음
- em상자의 높이는 어떻게 결정되는가?
=> content 영역의 크기는 font-size로 결정된다
- line-height : 베이스라인과 베이스라인의 사이 거리를 이야기함
- inline 상자의 구성
- 콘텐츠 area : 14px
- line-height : 21px
- line-height가 들어오면 inline 상자가 확장된다.
+ border를 치면 14px인 컨텐츠 영역에 들어감
+ padding을 넣어도 컨텐츠 border 안에 들어간다
Question : inline에서 line-height를 쓰면 세로 길이가 확장되는가?
Answer : YES
line-height를 쓰면 말그대로 위아래 값이 길어짐 (패딩 상하를 주는 것과 같은 효과)
vertical-align이란? middle을 하면 베이스라인을 따르지 않고 자기의,
소위 말해 알파벳 중간에 맞추는 것이다
*문제는 완전히 맞지않는다 알파벳 크기는 다 다르니까
해결방법 : vertical-align: 으로 px을 직접 써야한다.
언젠가 vertical-align을 줘야하는 상황이 있을 것이다.
'CSS' 카테고리의 다른 글
[CSS] 그리드 시스템 (0) | 2022.06.06 |
---|---|
[CSS] float (0) | 2022.04.22 |
[CSS] Flexbox 전반적인 팁 (0) | 2022.04.20 |
[CSS] 중앙 정렬하는 3가지 방식 (0) | 2022.02.16 |
(CSS)박스 사이징 : content-box vs border-box (0) | 2022.02.15 |
Comments