개발 공부/기타

[HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법

악마의 개발자 2025. 3. 19. 11:30
반응형

안녕하세요! 😊 지난번에는 HTML의 핵심 태그 (div, span, table, form)를 배웠어요.

 

[HTML 핵심 태그] div, span, table, form 태그 자세히 알아보기

안녕하세요! 😊 지난번에 HTML의 기본 개념과 기초 태그들을 배웠어요. [HTML 기초] 태그 구조와 활용법 정리 🚀안녕하세요! 😊 오늘은 HTML 기초에 대해 차근차근 알아볼 거예요.HTML이 처음이라

it-afternoon.tistory.com

하지만 HTML만 사용하면 모양이 단순해서 멋진 웹사이트를 만들기 어려워요.

그래서 오늘은 CSS를 사용해서 HTML을 꾸미는 방법을 배워볼 거예요!

 

📌 CSS(Cascading Style Sheets)는 웹페이지의 디자인(색상, 크기, 배치 등)을 조정하는 스타일 시트 언어예요.
자, 그럼 HTML과 CSS를 연결하는 방법부터 시작해볼까요? 🎨✨

1️⃣ HTML과 CSS 연결하는 3가지 방법

✅ 1. 인라인 스타일 (Inline Style)

HTML 태그 안에 style 속성을 직접 작성하는 방법이에요.
🔹 장점: 간단하고 빠르게 스타일을 적용할 수 있음
🔹 단점: 코드가 지저분해지고, 유지보수가 어려움

 

📌 예제

 
<p style="color: blue; font-size: 20px;">이 문장은 파란색이고, 글자 크기가 20px이에요!</p>

✅ 2. 내부 스타일 (Internal CSS)

HTML 문서의 <head> 태그 안에 <style>을 추가하는 방법이에요.
🔹 장점: 여러 요소에 공통 스타일 적용 가능
🔹 단점: HTML과 CSS가 섞여 있어서 코드 관리가 어려움

 

📌 예제

 
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>이 문장은 초록색이고, 글자 크기가 18px이에요!</p>
</body>

✅ 3. 외부 스타일 (External CSS)

CSS를 별도의 파일(style.css)로 만들어 연결하는 방법이에요.
🔹 장점: 코드가 깔끔하고 유지보수하기 쉬움
🔹 단점: 별도의 CSS 파일을 만들어야 함

 

📌 HTML 파일 (index.html)

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>이 문장은 외부 CSS 파일에서 스타일이 적용돼요!</p>
</body>
 

📌 CSS 파일 (style.css)

p {
    color: red;
    font-size: 16px;
}

 

✅ Tip!
실무에서는 대부분 외부 스타일(External CSS)을 사용해요.
HTML과 CSS를 분리하면 코드를 깔끔하게 유지할 수 있기 때문이에요! 🚀

2️⃣ CSS의 기본 문법

CSS는 선택자(Selector) + 속성(Properties) + 값(Value) 형태로 작성돼요.

📌 기본 문법

선택자 {
    속성: 값;
}

 

✅ 예제

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

🔹 color: 글자 색상
🔹 font-size: 글자 크기
🔹 text-align: 텍스트 정렬 (왼쪽, 가운데, 오른쪽)

3️⃣ CSS로 HTML 꾸미기

이제 CSS를 이용해서 HTML 요소들을 더 예쁘게 꾸며볼까요? 😊

 

✅ 1. 배경색 변경 (background-color)

body {
    background-color: lightgray;
}

✅ 전체 배경을 연한 회색으로 변경

✅ 2. 글자 스타일 변경 (color, font-size, font-family)

p {
    color: darkblue;
    font-size: 18px;
    font-family: Arial, sans-serif;
}

✅ 글자 색상, 크기, 글꼴(font) 변경

✅ 3. 박스 스타일링 (width, height, border, padding, margin)

.box {
    width: 300px;
    height: 100px;
    background-color: pink;
    border: 2px solid red;
    padding: 10px;
    margin: 20px;
}

✅ 박스 크기 조정, 테두리(border) 및 여백(padding, margin) 추가

 

📌 이렇게 적용하면?

<div class="box">이 박스 안에 있는 글자예요!</div>

✅ 4. 버튼 스타일링 (border-radius, hover 효과)

button {
    background-color: green;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: darkgreen;
}

 

✅ 버튼에 마우스를 올리면 색이 바뀌는 효과 추가

 

📌 HTML에서 버튼 사용하기

<button>클릭하세요!</button>

📌 마무리 & 다음 단계는?

오늘은 HTML과 CSS를 연결하는 3가지 방법과 CSS 기초 스타일링을 배웠어요!
이제 여러분은 HTML 문서를 예쁘게 꾸밀 수 있어요. 🎨✨

 

📢 다음 글에서는?

👉 CSS 레이아웃 배우기! (display, position, flexbox 활용법)
👉 반응형 웹 디자인 만들기! (media query로 모바일 대응하기)

 

 

 

[HTML과 CSS 레이아웃 완전 정복] display, position, flexbox 활용법 총정리!

안녕하세요! 😊 지난번에는 HTML과 CSS를 연결하는 방법과 기본적인 스타일링을 배웠어요. [HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법안녕하세요! 😊 지난번에는 HTML의 핵심 태그 (di

it-afternoon.tistory.com

 

반응형