Day 5. Styling the Overall Page
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="daily-challenge.css" rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
<body>
<img src="challenges-trophy.jpg" alt="A trophy">
<h1>Hoon' Challenge for Tuesday, May 20th</h1>
<p id="todays-challenge">
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>
body {
text-align: center;
background-color: rgb(233, 215, 207);
margin: 50px;
}
img {
width: 200px;
height: 200px;
border-radius: 100px;
}
h1 {
font-family: 'Oswald', sans-serif;
color: rgb(83, 75, 75);
}
p {
font-family: 'Fira Sans', sans-serif;
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. 적절한 요소 선택의 중요성 웹페이지 전체에 배경색을 적용하려면 어떤 요소를 타겟팅해야 할까? 정답은 body다. body는 모든 가시적 콘텐츠를 포함하는 요소이기 때문에, 전체 페이지 스타일링에 있어 가장 중요한 출발점이다. 요소 선택은 기능적인 문제가 아니라 의도와 목적의 문제다.
2. CSS 속성명의 직관성 CSS의 매력적인 부분 중 하나는 속성명이 대체로 직관적이라는 점이다. 배경색을 설정하는 속성은 당연하게도 background-color다. 이런 직관적인 이름 덕분에 새로운 속성을 쉽게 기억하고 활용할 수 있다.
3. RGB 값으로 섬세한 색상 표현하기 색상을 설정할 때 RGB 방식을 사용하면 정밀한 제어가 가능하다. 예를 들어 rgb(233, 215, 207)와 같이 빨강, 초록, 파랑 값을 조절해 섬세한 파스텔 톤을 만들 수 있다. 이 방식은 브랜드 색상을 정확히 구현해야 할 때 특히 유용하다.
4. 여백으로 호흡을 주는 디자인 콘텐츠 주변에 적절한 여백(margin)을 추가하는 것은 디자인에 '호흡'을 불어넣는 작업이다. margin: 50px와 같은 간단한 코드 한 줄로 콘텐츠 주변에 50픽셀의 여백을 모든 방향(상, 하, 좌, 우)에 균등하게 적용할 수 있다.
5. 여백의 실제 작동 방식 이해하기 여백을 모든 방향에 설정해도 실제로 눈에 보이는 효과는 콘텐츠가 있는 영역에만 나타난다. 예를 들어, 페이지 좌측, 우측, 하단에 콘텐츠가 없다면 그 방향의 여백은 시각적으로 인지되지 않는다. 이처럼 CSS 속성의 효과는 콘텐츠와의 관계 속에서 완성된다.
이런 작은 조정들이 모여 웹사이트의 완성도를 높인다. 처음에는 단순한 HTML 구조에 불과했던 페이지가 CSS의 마법을 통해 점점 생동감 있는 웹사이트로 변모해가는 과정이 항상 경이롭다.
디자인에서 '덜 하는 것'이 '더 하는 것'보다 어려울 때가 많다. 적절한 배경색과 여백만으로도 복잡한 디자인 요소 없이 세련된 웹사이트를 만들 수 있다는 점을 기억하자. 결국 좋은 디자인은 화려함이 아닌 사용자 경험에 얼마나 집중했는지에서 빛을 발한다.