CSS를 활용한 웹사이트 스타일링의 효과적인 방법
Day 4. Styling the Anchor Element
웹 개발을 하다 보면 HTML 구조를 만드는 것은 시작에 불과하다. 진짜 중요한 것은 그 콘텐츠를 어떻게 스타일링하느냐이다. 오늘은 CSS를 활용한 링크 스타일링에 대한 몇 가지 인사이트를 나누고 싶다.
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
<title>My Daily Challenge</title>
</head>
<body> <h1>Hoon's challenge for Tuesday, May 6th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>
</body>
</html>
1. 요소별 스타일 적용하기
HTML 요소마다 고유한 스타일을 적용할 수 있다. "우리는 h1 요소와 단락에 대한 스타일을 이미 만들었으니, 이제 앵커 요소에 대한 스타일을 추가할 수 있습니다." 요소 이름을 사용해 CSS 규칙을 만드는 것이 기본이다. 이것을 '타입 선택자'라고 부른다.
2. 인라인 스타일 지양하기
스타일 속성을 여기에 추가할 수 있지만, 앞서 언급한 이유로 더 이상 이렇게 하고 싶지 않습니다. 인라인 스타일은 코드 관리가 어렵고 재사용성이 떨어진다. 대신 CSS 규칙을 사용하는 것이 좋다.
3. 선택자 사용 방법 이해하기
CSS 규칙은 항상 이런 방식으로 작동합니다. 이 타입 선택자를 사용할 때는 HTML 요소 타입으로 선택하며, 항상 HTML 요소의 이름을 각괄호 없이 그대로 반복합니다. 이는 CSS의 기본 문법이며, 이해하고 넘어가야 할 핵심 원칙이다.
4. 색상 정의의 다양한 방법
색상을 정의하는 다양한 방법이 있으며, rgb, hsl 또는 hex 코드 중 어떤 접근법을 선호하는지는 여러분에게 달려 있습니다. 개인적으로는 RGB 함수가 직관적이라 선호한다. 예를 들어 rgb 함수로 색상을 정의하고 빨간색 값 167, 녹색 값 1, 파란색 값 78를 사용하면 자두 빨간색이 나옵니다.
5. 텍스트 장식 제어하기
링크의 밑줄을 제거하고 싶다면, text-decoration: none을 설정하면 된다. 이 속성을 재정의하려면, 색상을 재정의했던 것처럼 해당 속성을 반복하고 다른 값을 지정하면 됩니다. 이것이 CSS의 '캐스케이딩' 특성이다.
6. 의사 선택자(:hover)의 강력함
링크가 호버될 때 모양을 바꾸는 것이 일반적이지만, 현재 링크는 항상 같은 모양입니다. 이를 해결하기 위해 의사 선택자를 사용한다. a:hover와 같이 호버 의사 선택자를 앵커 요소에 적용하면, 페이지의 어떤 앵커 요소든 마우스가 그 위에 올라갈 때 적용됩니다.
7. 사용자 경험 향상을 위한 인터랙션
특히 호버 의사 선택자는 CSS 코드를 작성할 때 항상 사용하게 될 매우 중요한 선택자 유형입니다. 링크와 버튼에서 마우스 포인터가 그 위에 올라갈 때 스타일을 변경하는 것이 매우 일반적이기 때문입니다. 사용자 경험을 향상시키는 핵심 요소다.
웹 개발에서 CSS는 단순히 '예쁘게 만드는 것'이 아니라, 사용자가 웹사이트와 어떻게 상호작용하는지에 큰 영향을 미친다. 특히 호버와 같은 상호작용 요소는 웹사이트의 사용성을 크게 향상시킬 수 있다. 이런 작은 디테일이 모여 훌륭한 사용자 경험을 만든다. 결국 개발자로서 우리는 코드를 작성하는 것이 아니라, 사람들이 직관적으로 사용할 수 있는 디지털 공간을 만드는 것이다.
