앞에서 클라우드와 리눅스에 대한 내용들을 학습했다. 이제는 직접 서비스를 만들어보고 앞에서 배운 내용을 토대로 배포까지 해보는 과정으로 진행할 것이다. 그렇기에 기본적인 HTML과 CSS를 학습해 우리가 보는 화면을 먼저 구성해보려한다.
CSS를 학습하기 전에 HTML을 먼저 학습해 구조를 먼저 익힐 것이다.
📘 HTML (HyperText Markup Language)
✅ HTML이란?
1️⃣ HTML의 정의
HTML(HyperText Markup Language)는 웹 페이지의 구조(뼈대)를 만들기 위한 마크업 언어(Markup Language)이다.
- HyperText: 다른 문서나 웹 페이지로 이동(링크)할 수 있는 텍스트
- Markup Language: 내용을 감싸고 구조와 의미를 표현하는 언어
(예: “이건 제목이야”, “이건 이미지야”, “이건 버튼이야”처럼 알려주는 것)
즉, HTML은 웹 브라우저에게
“이건 제목이니까 크게 보여줘!”
“이건 링크야, 누르면 다른 페이지로 가게 해줘!”
라고 지시하는 설계도 같은 역할을 한다.
2️⃣ HTML의 목적
HTML의 핵심 목적은 웹페이지에서 정보의 구조화이다.
사용자가 보는 웹페이지에 있는 텍스트, 이미지, 버튼, 동영상 등이
- 어떤 의미를 가지고
- 어떤 순서로 나열되고
- 어떤 구조로 구성되는지를 정의한다.
3️⃣ HTML은 프로그래밍 언어가 X
많은 사람들이 헷갈리는 것 중 하나인데, HTML은 프로그래밍 언어가 아니다.
- 왜냐면 조건문(if), 반복문(for) 같은 로직(logic)이 없기 때문이다.
- HTML은 정적인(Static) 웹페이지를 만드는 데 사용되고,
- 동적인(Dynamic) 기능은 JavaScript가 담당한다.
4️⃣ HTML의 역할은 "구조"
HTML은 다음과 같은 역할을 한다.
| 역할 | 설명 | 예시 |
| 구조 만들기 | 제목, 본문, 목록 등을 구분 | <h1>, <p>, <ul> |
| 의미 부여 | 문장이 단순한 글인지, 중요한 제목인지 알려줌 | <strong>, <em> |
| 링크 연결 | 다른 페이지나 외부 웹사이트로 연결 | <a href=""> |
| 미디어 포함 | 이미지, 동영상 등을 삽입 | <img>, <video> |
5️⃣ HTML의 기본 문법
HTML은 태그(tag)를 이용해서 작성해.
<p>이건 문단입니다.</p>- <p>: 문단 시작 태그
- </p>: 문단 종료 태그
- 태그는 항상 <태그이름> 과 </태그이름> 구조로 열고 닫아야 한다.
6️⃣ 브라우저는 HTML을 어떻게 처리할까?
- 사용자가 HTML 파일을 열면
- 브라우저(크롬, 사파리 등)는 이 HTML을 해석해서
- 우리가 눈으로 볼 수 있는 웹페이지 형태로 화면에 렌더링(rendering)해준다.
예시로 아래의 예시를 출력해보자. 아래 기본 구조의 코드처럼 HTML 파일을 작성해서 열면 웹 페이지가 보일 것이다.
✅ 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>First Web Page</title>
</head>
<body>
<h1>HI!</h1>
<p>Welcome!!</p>
</body>
</html>| 태그(tag) | 설명 |
| <!DOCTYPE html> | HTML5 문서임을 선언 |
| <html> | 전체 HTML 문서 시작과 끝 |
| <head> | 문서의 정보(title, 스타일 등)이 포함 |
| <body> | 실제 화면에 보이는 내용이 포함 |
📘 HTML 태그들
| 태그(tag) | 설명 | 예시 |
| <h1>~<h6> | 제목 (숫자가 작을수록 더 큰 제목) | <h1>제목</h1> |
| <p> | 문단(Paragraph) | <p>내용입니다</p> |
| <a> | 하이퍼링크 | --- |
| <img> | 이미지 삽입 | <img src="cat.jpg" alt="고양이"> |
| <ul> / <ol> | 순서 없는/있는 리스트 | <ul><li>항목</li></ul> |
| <div> | 구역 나누기 | <div>여기는 구역입니다</div> |
HTML을 학습하다보니 자연스럽게 CSS를 알게되었고, CSS가 왜 필요했는지가 궁금해졌다. 또 CSS와 HTML은 어떤 관계를 가지고 연동되어서 HTML이 구조를 담당하고 CSS가 그를 디자인하게 되었는지가 궁금해서 관련된 내용을 찾아보았다.
🔗 HTML과 CSS의 관계
✅ HTML은 구조
무엇이 있는지?
예: "여기에 제목", "여기에 사진", "여기에 버튼"
✅ CSS는 스타일
어떻게 보일지?
예: "제목은 빨간색", "사진은 둥글게", "버튼은 파란 배경에 흰 글씨"
👩💻 예시 비교
▶ HTML만 있을 때
<h1>나의 블로그</h1>
<p>HTML과 CSS를 배우는 중입니다.</p>👉 글자만 있고, 색상이나 크기는 기본값이라 밋밋해 보인다.
▶ HTML + CSS를 함께 썼을 때
<head>
<style>
h1 {
color: #ff4d4d;
font-size: 40px;
}
p {
font-family: 'Arial';
color: gray;
}
</style>
</head>
<body>
<h1>나의 블로그</h1>
<p>HTML과 CSS를 배우는 중입니다.</p>
</body>👉 제목은 빨간색에 크고, 글씨체도 바뀌는 것을 확인할 수 있다.
✅ CSS를 HTML에 연동하는 3가지 방법
| 방식 | 설명 | 예시 |
| 1. Inline CSS | 태그 안에 직접 style 속성을 사용 | <p style="color:red;">안녕</p> |
| 2. Internal CSS | HTML 내부 <style> 태그 안에 정의 | <head><style>p {color:red;}</style></head> |
| 3. External CSS | .css 파일을 따로 만들고 <link>로 연결 | <link rel="stylesheet" href="style.css"> |
📁 외부 CSS 예시
🔸 index.html
<!DOCTYPE html>
<html>
<head>
<title>서연이의 포트폴리오</title>
<link rel="stylesheet" href="style.css"> <!-- 외부 CSS 연결 -->
</head>
<body>
<h1>안녕하세요! 서연입니다.</h1>
<p>프론트엔드 개발자 지망생이에요 :)</p>
</body>
</html>🔸 style.css
h1 {
color: navy;
font-size: 36px;
}
p {
color: #555;
font-family: 'Arial';
}이렇게 하면 HTML은 구조만 담당하고,
CSS는 스타일만을 담당하게 됨.
깔~끔하게 역할이 나뉘어서 유지보수도 쉽다는 장점이 있다.
✅ 요약
- HTML: 무엇을 보여줄지 (제목, 문단, 이미지, 버튼 등)
- CSS: 어떻게 보여줄지 (색상, 크기, 정렬, 여백 등)
- CSS는 HTML에 Inline / Internal / External 방식으로 연결됨
- 실무에서는 External CSS로 .css 파일을 따로 관리하는 것이 표준
이렇게 HTML과 CSS에 대해 간단히 알아보았다.
사실 HTML과 CSS 같은 경우 직접 실습을 해보면서 어떤 기능들이 있고, 어떤 요소들을 추가하고 설정하느냐에 따라 변화하는 모습을 직접 확인하면서 공부하는 것이 가장 좋은 방법이 아닐까 생각된다.
다음 글에서는 HTML과 CSS에 대한 내용을 조금 더 구체적으로 다뤄 볼 예정이다.
본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.
