Day7: HTML과 CSS 기본 연동법🚀
웹 개발의 기초 중의 기초, HTML과 CSS를 연동하는 방법에 대해 정리했습니다. 처음 웹 개발을 시작하면 이 두 언어를 어떻게 함께 사용해야 할지 헷갈리지만, 아래 예제를 통해 쉽게 이해 하실 수 있을거에요. 😊
| HTML과 CSS란?
웹 페이지를 만들 때, HTML은 뼈대를, CSS는 옷과 장식품을 담당한다고 생각하면 쉬워요. 🏗️
- HTML (HyperText Markup Language): 웹 페이지의 구조와 내용을 정의합니다.
- CSS (Cascading Style Sheets): 웹 페이지의 디자인과 시각적 표현을 담당합니다.
이 두 언어는 함께 작동하여 우리가 매일 보는 아름다운 웹사이트를 만들어냅니다! 💫
※ 실습 환경 추천
| CSS 연동 방법 3가지
HTML에 CSS를 연동하는 방법은 크게 세 가지가 있어요. 각각의 방법에는 장단점이 있으니 상황에 맞게 선택하면 됩니다.
1. 인라인 스타일 (Inline Style) 📌
HTML 요소 안에 직접 style 속성을 사용하는 방법입니다.
<p style="color: blue; font-size: 16px;">안녕하세요! 이것은 인라인 스타일입니다.</p>
장점:
- 빠르게 적용할 수 있어요.
- 외부 파일 없이 바로 스타일을 적용할 수 있습니다.
단점:
- 코드가 지저분해지고 유지보수가 어려워요.
- 여러 요소에 같은 스타일을 적용할 때 비효율적입니다.
2. 내부 스타일 시트 (Internal Style Sheet) 📝
HTML 문서의 <head> 부분에 <style> 태그를 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>내부 스타일 시트 예제</title>
<style>
p {
color: green;
font-size: 18px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>이 텍스트는 녹색으로 표시됩니다.</p>
<p class="highlight">이 텍스트는 녹색에 노란 배경으로 표시됩니다.</p>
</body>
</html>
장점:
- 한 페이지에서만 사용되는 스타일을 정의하기 좋아요.
- 클래스나 ID를 사용해 여러 요소에 같은 스타일을 적용할 수 있습니다.
단점:
- 여러 페이지에서 같은 스타일을 사용할 때 중복이 발생해요.
- HTML 문서와 CSS가 분리되지 않아 관리가 어려울 수 있습니다.
3. 외부 스타일 시트 (External Style Sheet) 🔗
별도의 CSS 파일을 만들고 HTML 문서에 연결하는 방법입니다.
style.css 파일:
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
margin-bottom: 15px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
HTML 파일:
<!DOCTYPE html>
<html>
<head>
<title>외부 스타일 시트 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>외부 CSS 파일 연동하기</h1>
<p>이 텍스트는 외부 CSS 파일에 정의된 스타일을 사용합니다.</p>
<p>여러 페이지에서 일관된 디자인을 유지할 수 있어요!</p>
</div>
</body>
</html>
장점:
- 여러 HTML 페이지에서 같은 스타일을 사용할 수 있어요. ✨
- HTML과 CSS를 분리하여 유지보수가 쉬워집니다.
- 브라우저가 CSS 파일을 캐싱해서 페이지 로딩 속도가 빨라질 수 있어요.
단점:
- 추가 파일을 관리해야 합니다.
- 매우 간단한 페이지에는 과할 수 있어요.
| 실습 예제: 나만의 프로필 카드 만들기 👨💻
이제 세 가지 방법을 모두 사용해서 간단한 프로필 카드를 만들어 볼게요!
1단계: 기본 HTML 구조 만들기
먼저 profile-card.html 파일을 만들고 다음 코드를 작성합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 프로필 카드</title>
<!-- 여기에 내부 스타일 시트가 들어갈 거예요 -->
<!-- 여기에 외부 스타일 시트 연결이 들어갈 거예요 -->
</head>
<body>
<div class="profile-card">
<div class="profile-header">
<h2 class="profile-name">홍길동</h2>
</div>
<div class="profile-body">
<p class="profile-bio">안녕하세요! 웹 개발을 배우고 있는 홍길동입니다.</p>
<div class="profile-info">
<p><strong>직업:</strong> 웹 개발자</p>
<p><strong>위치:</strong> 서울, 대한민국</p>
<p><strong>취미:</strong> 코딩, 독서, 여행</p>
</div>
</div>
<div class="profile-footer">
<!-- 인라인 스타일을 적용할 버튼 -->
<button style="background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">연락하기</button>
</div>
</div>
</body>
</html>
2단계: 내부 스타일 시트 추가하기
<head> 태그 안에 다음 스타일을 추가합니다:
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.profile-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
overflow: hidden;
}
.profile-header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
.profile-image {
border-radius: 50%;
border: 3px solid white;
}
.profile-name {
margin-top: 10px;
}
.profile-body {
padding: 20px;
}
.profile-bio {
color: #666;
text-align: center;
margin-bottom: 15px;
}
.profile-info p {
margin: 5px 0;
}
.profile-footer {
text-align: center;
padding: 15px;
background-color: #f9f9f9;
}
</style>
3단계: 외부 스타일 시트 만들고 연결하기
profile-styles.css 파일을 생성하고 다음 코드를 추가합니다:
/* 버튼에 마우스를 올렸을 때의 효과 */
button:hover {
background-color: #45a049 !important;
transform: scale(1.05);
transition: all 0.3s ease;
}
/* 프로필 카드에 마우스를 올렸을 때 약간 들어 올리는 효과 */
.profile-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* 프로필 이미지에 마우스를 올렸을 때 회전 효과 */
.profile-image:hover {
transform: rotate(360deg);
transition: all 0.8s ease;
}
그리고 HTML 파일의 <head> 부분에 다음 코드를 추가하여 연결합니다:
<link rel="stylesheet" href="profile-styles.css">
완성된 결과 🎉
이제 HTML 파일을 브라우저에서 열면 다음과 같은 프로필 카드가 표시됩니다:
- 기본 카드 구조는 HTML로 작성했어요
- 카드의 기본 스타일은 내부 스타일 시트로 적용했습니다
- 버튼에는 인라인 스타일을 적용했어요
- 마우스 효과(hover)는 외부 스타일 시트로 적용했습니다
이렇게 세 가지 방식을 모두 활용해 보았습니다! 실제로는 대부분의 프로젝트에서 외부 스타일 시트를 사용하는 것이 가장 효율적이에요. 하지만 상황에 따라 세 가지 방법을 적절히 혼합해서 사용할 수도 있습니다. 😉
| Q&A 자주 묻는 질문
Q1: CSS 연동 방법 중 어떤 것이 가장 좋은가요?
A: 일반적으로 외부 스타일 시트가 가장 권장됩니다. HTML과 CSS를 분리하여 코드의 유지보수가 쉬워지고, 여러 페이지에서 같은 스타일을 재사용할 수 있기 때문이에요.
Q2: 인라인 스타일을 사용하면 안 되나요?
A: 인라인 스타일은 특별한 경우(이메일 템플릿이나 동적으로 스타일을 변경할 때)에만 사용하는 것이 좋습니다. 일반적인 웹 개발에서는 유지보수 문제로 인해 피하는 것이 좋아요.
Q3: 내부 스타일 시트와 외부 스타일 시트를 함께 사용해도 되나요?
A: 네, 함께 사용 가능합니다. 일반적으로 외부 스타일 시트에 공통 스타일을 정의하고, 내부 스타일 시트에는 해당 페이지에만 특별히 적용할 스타일을 정의해요.
Q4: CSS 우선순위는 어떻게 되나요?
A: CSS 우선순위는 일반적으로 !important > 인라인 스타일 > ID 선택자 > 클래스 선택자 > 태그 선택자 순입니다. 같은 우선순위라면 나중에 선언된 스타일이 적용됩니다.
Q5: 모바일 기기에서도 같은 스타일이 적용되나요?
A: 반응형 디자인을 구현하지 않았다면 스타일이 모바일에서 다르게 보일 수 있습니다. 미디어 쿼리(Media Queries)를 사용하여 다양한 화면 크기에 맞게 스타일을 조정할 수 있어요.
