CSS와 HTML의 분리된 역할
Day 4. Working with "font-size" and "px"
웹 개발을 하다 보면 특정 요소에 특별한 스타일을 주고 싶을 때가 있다. 특히 같은 HTML 태그를 사용하더라도 각각 다르게 표현해야 할 필요가 있다. 이번에는 텍스트를 굵게 만들고 크기를 키우는 방법과 함께, HTML과 CSS의 근본적인 역할 분담에 대한 중요한 인사이트를 나누고자 한다.
h1 {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
p {
font-family: sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
a {
color: rgb(167, 1, 78);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#todays-challenge {
color: rgb(170, 96, 83);
font-weight: bold;
font-size: 52px;
}
1. 텍스트를 굵게 만드는 방법
텍스트를 굵게 만들기 위해서는 이전에 사용하지 않은 CSS 속성인 font-weight를 활용해야 한다. 이 속성은 다양한 폰트 두께를 값으로 받는다. "normal"처럼 기본값을 지정할 수도 있고, "bold"처럼 굵게 만들 수도 있다. 이 속성을 설정하고 페이지를 새로고침하면 텍스트가 굵어진 것을 확인할 수 있다.
2. 폰트 크기 증가시키기
크기를 증가시키려면 font-size CSS 속성을 사용한다. 이 속성은 이전에 배운 색상이나 텍스트 정렬과는 다른 새로운 유형의 값인 크기 값이 필요하다. 크기를 설정할 때는 숫자 값과 함께 단위를 제공해야 한다.
3. CSS 단위의 세계
실생활에서 센티미터, 미터, 킬로미터, 인치 등 다양한 단위로 크기를 측정하듯이, CSS에서도 크기를 표현하는 여러 단위가 있다. 픽셀(px) 단위는 기기 독립적인 화면 픽셀을 대상으로 CSS에서 크기나 치수를 설정할 수 있다.
4. 기기 독립적 단위의 중요성
"기기 독립적"이란 무슨 의미일까? 고해상도 기기에서 페이지를 볼 때, 항상 같은 수의 화면 픽셀을 할당한다면, 고해상도 기기는 사용 가능한 화면 픽셀이 훨씬 많기 때문에 항목이 더 작아질 것이다. 예를 들어 10픽셀 너비로 설정하면, 고해상도 기기에서는 저해상도 기기보다 훨씬 작게 보일 것이다. 기기 독립적이라는 것은 자동으로 크기가 조정된다는 의미다.
5. 픽셀의 장점
CSS에서 무언가를 10픽셀로 설정하면 브라우저는 어떤 기기에서 웹사이트를 보든 동일한 물리적 크기로 보이도록 한다. 따라서 고해상도 기기에서 매우 작게, 저해상도 기기에서 매우 크게 보일 위험 없이 안전하게 10픽셀로 설정할 수 있다. 픽셀은 기기 해상도를 제외하고는 다른 요소에 상대적이지 않은 훌륭한 절대 단위다.
6. HTML의 의미론적 역할의 중요성
이 시점에서 초반에 언급했던 중요한 원칙을 되짚어보자. CSS로 모든 것을 변경할 수 있기 때문에 스타일링을 위해 HTML 요소를 사용하지 않는다. 기본 스타일링은 얻을 수 있지만, 그것이 HTML 요소를 사용하는 이유가 아니다. HTML 요소는 콘텐츠를 설명하고 콘텐츠 주변에 올바른 의미론을 제공하기 위해 사용한다.
7. 실제 적용의 예
이제 이 원칙이 매우 분명해졌다. ID 선택자로 스타일링한 요소는 여전히 단락(p)이다. h1 요소가 아니다. 하지만 이제 h1 요소보다 더 크게 만들었다. 이것이 웹 개발에서 항상 할 일이다. 원하는 모양으로 보이도록 스타일을 조정하고, HTML 요소를 사용하여 콘텐츠를 올바르게 설명한다. 특정 스타일을 얻기 위해 요소를 사용하지 않는다. 그것은 CSS만으로 한다.
이런 접근 방식은 단순히 웹 페이지를 '예쁘게' 만드는 것을 넘어서 웹의 근본적인 설계 철학을 반영한다. HTML은 구조와 의미를, CSS는 스타일과 시각적 표현을 담당하는 명확한 역할 분담이 있다. 이 원칙을 잘 지키면 유지보수하기 쉽고, 접근성이 좋으며, 다양한 기기에서 잘 작동하는 웹사이트를 만들 수 있다. 결국 좋은 웹 개발자는 단순히 코드를 작성하는 사람이 아니라, 웹의 기본 원칙을 이해하고 존중하는 사람이다.
