[inline-block 여백 제거를 위한 여정..!😭]
👇 👇 👇
👇 👇 👇
👇 👇 👇
[브라우저에서 텍스트 취급받는 요소]
1. 텍스트
2. inline
3. inline-block
[텍스트 특징]
- 행간과 자간이 있다.
ㄴ 행간: 줄과 줄 사이 여백
ㄴ 자간: 글자와 글자 사이 여백
[그래서 여백이 왜 생기는가?]
기본적으로 폰트는 가독성 때문에 자간과 행간이 존재한다.
inline과 inline-block도 브라우저에서 텍스트 취급받기 때문에
텍스트처럼 양 옆과 하단에 여백이 생긴다고 이해하면 좋다.
inline-block의 요소 하나하나가 글자처럼 여겨져 '자간'이 생겨버린다. 그것이 여백이 된것이다.
[해결법]
박스의 폰트 사이즈를 0으로 적용한다.
박스만 적용하고 싶다면 상위 엘리먼트에 폰트 사이즈 0을 적용하고
박스에는 정상적인 폰트 사이즈를 재적용해준다.
(*혹은 상위엘리먼트의 display속성을 flex로 적용시켜준다.)
[css 선택자 힘 서열💪]
1순위 인접 + 클래스 > + .
2순위 클래스 .
3순위 인접 >
4순위 태그 div
같은 동급끼리라면
- 아래에 있는 것
- 개발자 모드에 있는 것
이 우선시된다.
+ 여기서 알아가는 것, 개발자 모드라고 다 먼저 우선시 되는 게 아니다.
[a태그]
1. 사이트 이동
2. display: inline;
3. href=""안에 적혀있는 링크를 '하이퍼링크'라 부른다.
4. 클릭할 모양이 필요하므로 태그 안에 내용물이 있어야 한다.
5. target이라는 속성이 기본적으로 들어있고 기본값은 _self이다.
_self : 내가 보고있는 페이지가 바뀌며 페이지 이동
_blank : 새페이지가 열리며 페이지 이동
6. title 속성은 마우스를 링크에 올렸을 때 나타나는 부가 설명 박스이다.