[일오갓생 Day6] 프론트엔드 첫걸음- HTML,CSS의 기초 개념 1

컬럼월드·2025년 12월 29일

AI헬스케어부트캠프 오즈코딩스쿨AI헬스케어 헬스케어개발공부 헬스케어블루오션

주말에 젭에 잠깐 들어가서 후딱 벨로그 글만 쓰고 나갈려고 했는데
다들 어딘가에 숨어있더라구요,,,?

지금 사진에 몇 명의 사람이 있을까요~? 맞추면 능력자 ㅎㅎ
.
.
.

오늘의 키워드
1. HTML(HyperText Markup Language) : Hyper + Text ~ = 댕쩌는 텍스트 마크업 언어
2. DOM (Document Object Model) : 기본이 되는 뼈대 🤖
3. CSS(Cascading Style Sheets)란? : 멋들어진 스타일 고르기

1. HTML(HyperText Markup Language) : Hyper + Text ~ = 댕쩌는 텍스트 마크업 언어

HTML(HyperText Markup Language)이란?
웹 페이지의 구조를 정의하는 마크업 언어입니다.
문서의 제목, 단락, 링크, 이미지 등을 태그를 사용하여 표현을 합니다.

여기서 마크업 언어(Markup Language)는 무슨 의미냐면
문서의 구조와 표현 방식을 정의하기 위해 태그(tag)를 사용하는 언어입니다.
HTML은 브라우저에서 사용자가 보는 화면을 만들기 때문에 프론트엔드(사용자가 보는 화면단을 말함)의 대표적인 마크업 언어라고 할 수 있습니다. 그렇지만 마크업 언어 자체는 프론트엔드뿐만 아니라 백엔드, 데이터 처리, 문서 작성 등 다양한 분야에서 폭넓게 활용됩니다. (고로 프론트엔드에서만 쓰이지 않는다~)

구글 딱 처음에 들어가서 개발자 도구를 눌러서 확인해보면 오른쪽에 있는 코드처럼 웹 페이지의 구조를 정의하는 코드를 볼 수 있습니다.

이런 식의 코드가 다 html입니다.

예제 코드:

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 HTML 페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>이것은 단락입니다.</p>
</body>
</html>

HTML의 기본 구조

<!DOCTYPE html> : HTML5 문서임을 선언함
<html> : HTML 문서의 루트 요소
<head> : 메타데이터, 제목, CSS, 스크립트 등을 포함
<body> : 실제 화면에 표시되는 콘텐츠

주요 HTML 태그

제목: <h1> ~ <h6>
단락: <p>
구분선: <hr>
리스트: <ul>, <ol>, <li>
테이블: <table>, <tr>, <td>
이미지: <img src="" alt="">
링크: <a href=""></a>
폼: <form>, <input>, <button>

HTML Attribute(속성)
속성은 태그에 추가 정보를 제공합니다.

href : 링크 주소 지정
src : 이미지 경로 지정
alt : 이미지 대체 텍스트
class : CSS 스타일링을 위한 클래스명
id : 고유 식별자

폼 검증

required : 필수 입력 필드
type : 입력 타입 지정 (email, text 등)
pattern : 정규표현식을 이용한 입력 형식 검증

HTML 속성 예제:

<!-- 링크와 이미지 예제 -->
<a href="https://google.com">구글로 이동</a>
<img src="cat.jpg" alt="고양이 사진" width="300">

<!-- 폼 예제 -->
<form>
  <label for="email">이메일:</label>
  <input type="email" id="email" required>
  <button type="submit">제출</button>
</form>

.
.
.

2. DOM (Document Object Model) : 기본이 되는 뼈대 🤖

HTML 문서를 트리 구조로 표현한 객체 모델입니다. 브라우저가 HTML 파일을 읽으면 각 태그를 JavaScript가 이해할 수 있는 객체(Object)로 변환합니다(이 과정을 파싱(Parsing)이라고함). JavaScript를 통해 웹 페이지를 동적으로 조작할 수 있게 해줍니다

저희 VSCode에서 다음 사진과 같은 익스플로어를 설치해주고

파일 제목을 지을 때 .html 파일로 만들어 줍니다. 그럼 파일이 html에 사용되는 코드구나 인식하게 됩니다.

그 다음에 느낌표(!) + Enter 누르면 다음과 위에 사진처럼 기본 틀이 나옵니다.

이것에 대한 DOM 트리는

이렇게 나타낼 수 있습니다.

간단한 노드 설명을 하면,

document: 최상위 문서 객체
html: 루트 요소, lang="en" 속성을 가짐
head: 메타데이터를 포함하는 영역
meta (charset): 문자 인코딩 설정
meta (viewport): 반응형 디자인을 위한 뷰포트 설정
title: 문서 제목 ("Document")
body: 실제 콘텐츠 영역 (현재 비어있음)

이제 여기서 JavaScript를 사용하면 이 DOM 트리에 동적으로 요소를 추가하거나 수정할 수 있습니다.
.
.
.

3. CSS(Cascading Style Sheets)란? : 멋들어진 스타일 고르기

CSS (Cascading Style Sheets)는 HTML의 시각적 스타일을 정의하는 언어입니다.
HTML이 웹 페이지의 구조를 만든다면, CSS는 그 구조에 옷을 입히는 역할을 합니다.

CSS로 할 수 있는 것들:

색상: 글자 색, 배경색 변경
크기: 폰트 크기, 요소의 너비/높이 조절
간격: 여백(margin, padding) 설정
위치: 요소의 배치와 정렬
레이아웃: Flexbox, Grid를 이용한 페이지 구조
애니메이션: 움직이는 효과
반응형: 다양한 화면 크기에 맞게 조절

.
.

CSS 예제

<!DOCTYPE html>
<html>
<head>
  <title>CSS 예제</title>
  <style>
    /* CSS예제 코드*/
    h1 {
      color: blue;           /* 파란색 글자 */
      font-size: 32px;       /* 32픽셀 크기 */
    }

    .highlight {
      background-color: yellow;  /* 노란색 배경 */
      padding: 10px;             /* 안쪽 여백 */
    }

    #header {                   /* id가 header인 것만 선택 */
      text-align: center;       /* 텍스트를 가운데 정렬 */
    }
  </style>
</head>
<body>
  <h1>파란색 제목</h1>
  <p class="highlight">노란색 배경</p>
  <div id="header">가운데 정렬</div>
</body>
</html>

실행하면

이런 결과를 얻을 수 있습니다.

그리고 저는 이걸 바탕으로 할일을 나타내주는 화면을 구상해보았습니다. CSS적인 부분은 빼고선 진행했습니다.

이 코드를 바탕으로 화면을 생성하면

코드 8~12줄은 이미지 크기 설정 관련된 코드입니다. 너비 300px, 높이는 자동 조정, 모서리는 10px만큼 둥글게 처리하도록 구성했습니다.

코드 15줄~32줄은 실제 화면에 표시될 내용이 들어가는 영역입니다.
h1 ~ /h1 코드는 가장 큰 제목에 들어갈 글을 쓴 것이고,
p ~ /p 코드는 일반 텍스트를 표시입니다.
details ~ /details 코드는 클릭하면 내용이 펼쳐지고 접히는 인터랙티브 요소입니다. 토글 만드는 기능을 뜻합니다.
summary ~ /summary 코드는 detail 요소의 제목을 담당하는 코드입니다.
코드 25 ~ 28줄은 li ~ /li 코드로 제목 바로 밑에 작성이 되는 코드들입니다.
img src="2222.jpeg" alt="카피바라" --> 이미지 삽입 관련 코드로 "2222.jpeg" 파일을 표시하며, 이미지가 로드되지 않으면 "카피바라"라는 대체 텍스트가 표시됩니다.
.
.

이제 토글을 클릭하면

제가 코드를 짠 오늘의 할 일이 보입니다.

HTML 관련해서 영상 참고는 "생활코딩"이라는 유튜버..? 분이십니다.
생활코딩 HTML
내용도 10분 내외로 길지 않고 기초부터 차근차근 가르쳐 주십니다.

결론

오늘 HTML/CSS의 기초를 다져봤습니다!!

HTML은 웹 페이지의 뼈대를, CSS는 멋진 옷을 입히는 역할을 한다는 걸 배웠어요.
좀 더 공부하다 보면은 버튼도 만들고 화면 구성도 멋들어지게 만들 수 있는 날이 올 수 있기를,,,!

컬럼월드

안녕하세요, 코딩과 잡다한 얘기도 좋아해요.

이전 포스트

[일오갓생 Day5] 좋은 의료데이터란 무엇일까? 데이터 뒤에 있는 환자를 상상하는 연습

다음 포스트

[일오갓생 Day7] 내가 원하는 웹 페이지 만들기

10개의 댓글

코야(이셔엉이다냥~!)

2025년 12월 29일

다들 정리 스타일이 달라서 머리아프고 지루하게 자기꺼만 몇번이고 복습하는것보다 블로그 탐방하고 정독하고 답글 다는 방식이 공부효율이나 깊이의 신장에 있어서 훨배 낫네요..(+소통까지?) 오늘 신박한 경험을 합니다요~ 잘보고가구요
이렇게 실력 쌓아가다보면 분명 금방 멋들어진 웹페이지 만들수있을거에요 우리 모두 파이팅해요!

1개의 답글

신운서

2025년 12월 29일

댕쩌는 마크업 언어 ㅎㅎ

1개의 답글