TIL 34 | 내가 몰랐던 HTML, CSS

1. img 의 크기

css 로만 width 와 height 를 조절할 수 있는 줄 알았는데 html에서 태그 안에 attribute 를 이용해서 크기를 조절할 수도 있었다.

img {
  width: 300px;
  height: 300px;
}

<img width="300" height="300" src="" alt="" >

2. font family 에서 "font name"

font-family 는 폰트 스타일을 지정하는 속성이다.

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

🤚🏻 여기서 "Times New Roman" 만 "쌍따옴표" 가 되어있는 이유는
→ 폰트 이름에 띄어쓰기가 되어있기 때문이다.

3. 문장에서의 스페이스

•   가 스페이스를 의미하는 코드이다. 아무리 코드에 스페이스를 10번을 추가해도 브라우저에는 한 번의 스페이스만 표시되기 때문에 일부러 스페이스를 넣어주고 싶을 때는 이 코드를 입력해 주면 된다.

<p>이렇게 띄어&nbsp;&nbsp;&nbsp;&nbsp;쓰기를 하면 됩니다.</p>

• text-indent property를 이용하면 문장의 제일 앞을 원하는 공간만큼 들여 쓰기 할 수 있다. property value의 단위는 mm, px, %, em ..등 의 단위들을 사용한다.

text-indent: 40px;

4. selector 우선순위와 점수

selector 를 표현하는 방법에 따라 우선순위가 달라지며, 그 우선순위는 점수 계산으로 이루어진다.

• inline styling : 1000점
• id : 100점
• class : 10점
• tag : 1점

만약 p.p-tag { } 로 selector 를 써준다면, → 1점(p) + 10점(.p-tag) = 11점 이 되기 때문에 그냥 class 선택자로만(10점) 하는 것보다 우선순위가 된다.

🤚🏻 하지만! 평소에는 대부분의 요소에 class를 부여해주고, class를 selector로 이용해서 styling을 해주기 때문에 이렇게까지 점수를 매번 생각하며 적용해주지는 않는다!
그리고 점수의 gap이 엄청 크기 때문에 tag <<<<< class <<<< id <<<<<< inline css 정도로만 알고 있으면 된다 🙂