CSS로 이미지에 생명을 불어넣는 방법
Day 5. Styling the Image & Body Tag
<!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;
}
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. 타입 셀렉터의 힘 웹 페이지에 이미지가 하나뿐이라면, 복잡한 클래스나 ID 대신 간단히 img 타입 셀렉터를 사용할 수 있다. 하지만 이 선택은 모든 이미지에 동일한 스타일을 적용하게 된다는 점을 항상 기억해야 한다.
2. 크기 조절은 기본 중의 기본 이미지를 다룰 때 가장 먼저 생각해야 할 것은 적절한 크기다. width와 height 속성을 통해 이미지 크기를 픽셀 단위로 지정할 수 있다. 이는 단순히 이미지뿐 아니라 거의 모든 HTML 요소에 적용 가능한 범용적인 속성이다.
3. 경계를 넘어 창의적으로 border-radius 속성은 생각보다 강력하다. 200x200 픽셀 이미지에 100픽셀 반경을 적용하면 완벽한 원형 이미지가 만들어진다. 왜 100픽셀일까? 너비와 높이의 절반이기 때문이다. 이런 관계를 이해하면 다양한 형태의 디자인을 구현할 수 있다.
4. 정렬의 오해와 진실 CSS에서 가장 많은 초보자들이 혼란스러워하는 부분이 바로 요소 중앙 정렬이다. text-align: center를 이미지에 직접 적용해도 이미지는 중앙에 위치하지 않는다. 이유는 간단하다: text-align은 해당 요소 자체가 아닌 그 요소의 내용물을 정렬하기 때문이다. 이미지는 내용물이 없는 빈(void) 요소이므로 영향을 받지 않는다.
5. 부모-자식 관계의 중요성 이미지를 중앙에 정렬하려면 이미지가 아닌 그 부모 요소에 text-align: center를 적용해야 한다. 이미지는 부모 요소의 내용물로 취급되기 때문이다. 이처럼 CSS에서는 요소 간의 관계를 이해하는 것이 핵심이다.
6. CSS 코드의 구조화 CSS 파일을 구성할 때는 HTML 구조를 반영하는 것이 좋다. 예를 들어, body 요소를 먼저 스타일링하고 그 다음 내부 요소들을 순서대로 작성하는 방식이다. 또한 타입 셀렉터끼리, ID 셀렉터끼리 그룹화하는 습관도 코드 가독성을 높여준다.
7. 중복 코드 제거하기 body에 text-align: center를 적용했다면, 그 내부의 h1이나 p 요소에 동일한 속성을 중복 적용할 필요가 없다. 부모의 스타일이 자식에게 상속되기 때문이다. 아무 효과 없는 코드는 제거하는 것이 좋은 습관이다.
이렇게 간단한 이미지 스타일링을 통해서도 CSS의 깊이를 엿볼 수 있다. 표면적으로는 단순해 보이는 속성들 사이에 숨겨진 관계와 원리를 이해할 때, 비로소 우리는 웹 디자인의 진정한 가능성을 발견하게 된다.
CSS 공부를 계속하면서 깨닫는 건, 결국 문제 해결은 '왜 그런지' 이해하는 데서 시작된다는 점이다. 단순히 코드를 외우는 것보다 그 원리를 이해하는 것이 훨씬 더 강력한 도구가 된다.
