인라인 요소
위의 사진에서 각 요소들 사이에 띄어쓰기가 있는 이유가 무엇일까?
앞서 말한 사용자 에이전트의 마진일까?
크롬 검사를 확인해보면 사용자 에이전트에는 마진이 표시되어있지 않다!
❗️ 인라인 요소에는 그 다음 요소들을 위해 간격이 제공된다는 것을 알 수 있다.
❗️ 인라인과 인라인 요소 사이의 공간이 제공된다.
❗️ 정해진 픽셀 없고, 폰트 사이즈 작아지면 간격도 작아진다.
<header class="header">
<a class="icon" href="">Citrus Jam</a>
<a class="icon" href="">LEMON</a>
<a class="icon" href="">ORANGE</a>
<a class="icon" href="">JAMONG</a>
</div>❗️인라인 요소에는 width 개념이 존재하지 않음
❗️인라인 레벨 요소에서는 width 지정할 필요 없음 ➡️ 길이 개념에 가깝다.
❗️margin을 지정해도 인라인 요소에는 (좌우로만 가능)
세로로는 안된다!
그럼 인라인 요소의 크기를 지정하고 싶으면 어떻게 해야할까?
➡️ Inline-block
Inline-block
인라인 요소를 강제로 블락 요소로 만드는 것이다.
그러면 이렇게 태생이 인라인 요소인 a 태그를 block으로 만든 후 가로, 세로를 원하는 크기로 지정할 수 있다.
✔️ 텍스트 아무것도 안적었을 때 정렬 (텍스트의 baseline에 맞추어 정렬)
baseline
텍스트의 바닥으로 생각하면 된다.
line-height
폰트 사이즈의 배수로 정한다.
픽셀로 표현되지 않고 폰트 종류, 사이즈에 따라 유동적으로 정해진다.
✔️ normal
초기값은 line-height: normal 으로 폰트 종류에 따라 다르다. 정해진 고정 값 없음!
font-family에 따라 달라진다. 각 글꼴마다 정해진 line-height가 있음
✔️ 고정
font-family와 상관없이 무조건 글꼴에 맞춤
font-size: 10px;
line-height: 1.2;라고 한다면 폰트 사이즈가 10픽셀이고 line-height는 12px라고 생각하면된다.
1.2로 고정한다면 폰트의 종류가 달라져도 무조건 폰트사이즈에 따라 12px로 고정된다.
❗️line-height를 크게 주면 leading area가 많아지면서 텍스트가 중앙 정렬 되는 것 처럼 보이게 할 수 있다.
leading area
모든 글자는 half leading area 공간이 상하단에 존재한다.
그리고 이 공간이 합쳐지면 leading area라고 하고 이것이 우리가 흔히 알고 있는 줄 간격이다.
다중 클래스
<div class="fruits apple"> </div>
css
.fruits {}
.apple {}첫번째 클래스 = fruits
두번째 클래스 = apple
웹을 보는 방식
내부 컨텐츠를 볼게 아니라 덩어리 위주로 봐야한다.
Selector
선택자는 규칙 내부의 CSS 속성 값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴이다. 선택자에 의해 선택되는 요소를 선택자의 대상이라고 한다.
Universial Selector
* { }Type Selector
<h1></h1>
h1 { }Class Selector
<div class="fruits"> </div>
.fruit { }Descendant Selector
<div class="main">
<div class="section"></div>
</div>
css
main section { }의사 클래스 Selector
a: hover요소의 표현 방식
💡
block
한 줄 전체를 할당받음
박스 모델 모두 사용 가능
div, ul, li, p, h1~h5
💡
Inline
텍스트의 배치 흐름
박스 모델 중 일부 지원
-
strong,span,a,img -
width,height개념 자체가 없음 -
margin- 좌우 : 적용 가능
- 상하단 : 적용 불가능
-
border- 좌우 : 적용 가능
- 상하단 : 보여지긴 하지만 공간을 차지하지 않음
💡
Inline-block
외부 관점에서의 배치는 inline, 내부 관점에서의 배치는 block
즉, inline 방식으로 배치된 block
➡️ block의 장점과 inline의 장점을 모두 가지고 있는 표현 방식
❗️ inline 이기 때문에
콘텐츠의 양만큼 전체 너비가 자동 조절된다.
부모 요소에게 지정된 text-align 속성에 영향을 받는다.
vertical-align 속성에 영향을 받는다.
❗️ block 이기 때문에
원하는 width, height 속성 값을 직접 지정 할 수 있다.
박스 모델을 자유자재로 사용할 수 있다.
white-space
<br/>을 안쓰고도 띄어쓰기나 줄바꿈을 내가 적은대로 하고 싶을때 (p태그에서 사용!)
p {
white-space: pre;
}