코드스테이츠 & 블로그

인사이트

HTML, CSS 기초 입문부터 HTML CSS 적용 방법, 예제까지

2022년 09월 27일

웹사이트는 어떤 요소들로 구성되어 있을까요? 대부분의 웹사이트는 HTML 문서를 기반으로 디자인과 가독성을 높이기 위한 CSS 그리고 웹 사이트와 사용자 간의 다양한 상호작용을 구성할 수 있는 자바스크립트(JavaScript)가 덧붙여진 형태입니다. 따라서 웹사이트의 보이는 영역을 다루는 프론트엔드 개발을 시작하고 싶다면 HTML, CSS, JavaScript 3가지 언어의 작동 원리 및 문법을 필수적으로 학습해야 합니다.

오늘은 이 중 웹페이지의 뼈대를 이루는 HTML과 HTML 요소의 서식을 지정할 수 있는 CSS, 그리고 HTML에 CSS를 적용하는 방법에 대해 알아보도록 하겠습니다.

HTML CSS 기초 입문

HTML이란?

HTML은 Hypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어입니다. 따라서 우리가 브라우저를 통해 보는 페이지는 모두 HTML로 작성되어 있습니다.

HTML에서 Hypertext의 의미는 링크를 통해 다른 문서로 이동할 수 있는 문서를 뜻합니다. 하이퍼텍스트라는 개념이 등장하기 전에는 방대한 양의 문서를 효율적으로 다루기 위해 색인 또는 다양한 문서 분류법이 사용되었습니다. 하지만 웹이 등장하면서 HTML 문서를 이용해 문서 간의 참조가 자유로워짐에 따라 특정 단어가 담긴 문서를 쉽게 검색할 수 있게 되었습니다. 이렇게 웹은 우리 생활 깊숙이 자리 잡게 되었습니다.

html 프로그래밍 언어 마크업 언어
프로그래밍 언어와 마크업 언어

또한 HTML은 마크업 언어로써, 여러 가지 태그를 이용하여 제목이나 문단 등을 구분해 정보를 구조화할 수 있습니다. 마크업 언어는 주어진 데이터를 구조화하고 형식을 나타낸다는 점에서 변수나 함수 등을 이용해 기능을 구현하는 프로그래밍 언어와 차이가 있습니다.

HTML 구조

HTML은 트리구조로 이루어져 있으며 이는 나무의 뿌리가 기둥에서부터 여러 갈래로 갈라지는 것처럼 부모 요소 안에서 여러 가지 자식 태그들이 갈라져 나온 형태입니다. HTML 문서를 트리 구조로 도식화 한다면 아래와 같은 이미지가 됩니다.

html 트리 구조
HTML 트리 구조

HTML 문서를 작성할 땐 <!DOCTYPE html> 태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시하고 <html> 태그로 전체 틀을 구성합니다. 그리고 해당 태그 안에서 크게 <head><body>로 영역을 나눕니다. 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담고 헤드 태그 사이에는 사용자 눈에는 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기합니다.

HTML 문서 작성 방법 head body
HTML 문서 작성 방법

HTML 태그

HTML은 열린 태그 <>과 닫힌 태그 </> 사이에 콘텐츠를 위치하여 문서의 구조를 표현할 수 있습니다. 문법 자체는 비교적 학습하기 쉬운 편입니다. 각각의 태그들은 목적에 따른 여러가지 속성을 가지고 있으며 이에 대한 속성값을 지정할 수 있습니다. 위 이미지처럼 콘텐츠에 링크를 연결할 수 있는 <a> 태그의 경우 연결될 링크의 주소를 href라는 속성을 통해 지정할 수 있습니다.

html 열린 태그 닫힌 태그
HTML 태그

HTML의 대표적인 태그들과 그들이 가진 속성에 대해 좀 더 자세히 알아보겠습니다.

h1 태그

먼저 대표적으로 문서의 제목(Heading)을 표시하는 <h1> 태그가 있습니다. <h1> ~ <h6>까지, 다양한 크기로 문서의 제목과 소제목을 병기할 수 있습니다.

html h1태그
HTML h1 태그

p 태그

제목뿐만 아니라 단락을 지정할 수 있는 <p> 태그도 있습니다. <p> 태그는 Paragraph의 약자로 해당 태그를 사용하면 문단의 앞뒤로 여백이 추가됩니다.

html p 태그
HTML p 태그

img 태그

이미지를 표시할 수 있는 <img> 태그는 닫힌 태그 없이도 작성이 가능한 Self-Closing 태그입니다.

이미지 태그의 src 속성으로 표시할 이미지의 주소값을 입력하며 width 혹은 height 속성을 이용해 이미지의 크기를 지정할 수 있습니다.

또한 이미지에 마우스를 올렸을 때 표시할 텍스트를 title 속성으로 지정할 수 있으며 위 화면의 두 번째 이미지처럼 이미지를 정상적으로 불러오지 못했을 때 alt 속성을 이용해 대체할 텍스트를 지정할 수 있습니다.

html img 태그
HTML img 태그

input, button 태그

웹사이트에서 로그인과 같이 사용자의 정보 입력이 필요할 경우, <input> 태그를 사용할 수 있습니다. <input> 태그 또한 Self-Closing 태그이며 입력받는 정보가 어떤 것인지에 따라 type을 지정할 수 있습니다. 사용자에게 어떤 정보를 입력해야 하는지 힌트를 주고 싶다면 placeholder 속성을 사용할 수 있습니다. 이 속성에 텍스트를 지정하면 사용자가 해당 태그를 클릭하기 전까지 해당 텍스트가 표시됩니다.

사용자가 클릭할 수 있는 버튼이 필요할 경우에는 <input type="button" /> 혹은 <button> 태그를 사용할 수 있습니다. <button> 태그는 열린 태그와 닫힌 태그로 이루어져 있기 때문에 태그 사이에 컨텐츠를 포함해 시각적인 효과를 줄 수 있습니다.

html input 태그 button 태그
HTML input 태그, button 태그

ul, ol, li 태그

HTML로 리스트를 표현하고 싶다면 <ul> 혹은 <ol> 태그를 사용할 수 있습니다. <ul>은 unordered list의 약자로 순서가 없는 불릿 형태로 작성된 리스트를 뜻합니다. <ol>은 ordered list의 약자로 순서가 있는 리스트를 뜻합니다. 리스트에 위치할 항목들은 <ul>, <ol> 상관없이 공통으로 <li> 태그를 이용해 작성합니다.

HTML ul 태그 ol 태그 li 태그
HTML ul 태그, ol 태그, li 태그

div, span 태그

이 외에도 앞에서 다룬 <button> 태그처럼 태그 사용 시 요소가 즉각적으로 나타나는 것과는 별개로 화면 내에서 아무런 역할을 하진 않지만, HTML 문서의 영역을 분리하거나 인라인 요소를 감쌀 때 사용하는 <div><span> 태그도 있습니다.

페이지의 영역을 분리(division)할 때는 <div> 태그, 텍스트와 같이 줄 바꿈없이 한 줄로 나열되는 인라인 요소들을 나타낼 때는 <span> 태그를 사용합니다.

HTML div 태그, span 태그
HTML div 태그, span 태그

시맨틱 태그 (Semantic Tags)

앞서 다룬 여러 가지 태그 외에도 웹 페이지의 각 영역을 보다 의미 있게 작성할 수 있는 시맨틱 태그가 있습니다. 시맨틱 태그는 태그 이름 자체만으로도 해당 태그가 페이지 내에서 어떤 역할을 하는지 알 수 있도록 의미가 담긴 것이 특징입니다.

HTML 시맨틱 태그 (Semantic Tags)
HTML 시맨틱 태그 (Semantic Tags)

기존에는 태그의 역할 및 레이아웃과 관계없이 블록 요소라면 모두 <div>, 인라인 요소라면 모두 <span>을 쓰는 것이 대부분이었지만 웹의 레이아웃이 점점 다양해지면서 영역을 구분하여 코드를 작성하는 것이 중요해지게 되었습니다. 따라서 HTML5 버전부터 <header>, <footer> 와 같이 태그 자체에 의미를 담은 여러 가지 시맨틱 태그들이 등장하게 되었습니다.

시맨틱 태그를 사용하면 브라우저 검색 시, 문서 구조를 보다 정확히 분석할 수 있기 때문에 알맞은 검색 결과를 찾도록 유도할 수 있습니다. 그리고 개발자 또한 코드를 더욱 직관적으로 이해할 수 있기 때문에 유지보수하기도 더욱 쉬워집니다.

  • <header> : 페이지 상단에 로고 혹은 메뉴바 등이 담겨있는 영역을 구분할 때 사용합니다.
  • <nav> : Navigation의 약자로 메뉴바처럼 여러가지 링크들을 모아놓은 영역을 구분할 때 사용합니다.
  • <main> : 제목이나 본문처럼 페이지의 가장 중요한 영역을 구분할 때 사용합니다.
  • <aside> : 페이지의 사이드바처럼 본문과 별개의 내용을 포함하는 사이드에 위치한 영역을 구분할 때 사용합니다.
  • <footer> : 카피라이트나 회사 정보 등이 담겨있는 페이지의 하단 영역을 구분할 때 사용합니다.
  • <section> : 한 영역 안에서 구분이 필요한 경우 <div>를 대신하여 사용합니다.
  • <article> : <section>과 비슷하지만, 관련 뉴스 혹은 관련 컨텐츠처럼 그 자체만으로도 독립적인 영역을 구분할 때 사용합니다.

CSS란?

CSS는 Cascading Style Sheets의 약자로 기본적인 스타일이 이미 지정된 HTML 요소를 개발자가 직접 다양한 스타일로 디자인할 수 있는 언어입니다.

만약 <button>구매하기</button>가 적힌 HTML 문서를 브라우저가 해석하면 기본적인 버튼 스타일이 적용되어 하단 이미지의 왼쪽과 같은 버튼이 화면에 나타나게 됩니다. 이때 버튼 태그의 너비 또는 높이, 색 등을 지정한 CSS를 HTML과 연결하면 하단 이미지의 오른쪽과 같은 디자인이 가미된 버튼으로 바꿀 수 있습니다.

HTML CSS 차이점
HTML 언어와 CSS 언어의 차이

그뿐만 아니라 버튼에 마우스를 올리거나 버튼을 클릭했을 때와 색상이 변하는 등 특정 이벤트에 따른 스타일도 지정할 수 있어 다채로운 사용자 경험을 제공할 수 있습니다.

HTML CSS 활용
HTML 문서에 CSS를 활용하면?

그래서 CSS를 활용하면 위처럼 내용과 형식이 혼재된 HTML 문서를 사용자가 보기에 심미성 있고 다루기도 편리한 웹사이트로 만들 수 있습니다.

CSS 기본 문법

CSS 문법은 크게 셀렉터선언 블록으로 나뉩니다. 먼저 셀렉터로 스타일을 지정할 HTML 요소나 id, class 등을 선택한 뒤 그에 대한 스타일을 선언 블록인 중괄호{} 사이에 지정하는 방식입니다. 그리고 각각의 스타일 속성들은 세미콜론;으로 구분합니다.

CSS 기본 문법
CSS 기본 문법

예시를 통해 알아보도록 하겠습니다. 위에서 다룬 버튼 요소에 지정된 CSS를 살펴보겠습니다. 주석에 적힌 내용을 CSS 문법으로 작성한다면 다음과 같습니다.

HTML CSS 차이점
HTML CSS 차이점

HTML 태그 이외에도 #를 이용하여 특정 요소에 지정된 id에 따라 스타일을 지정하거나 .을 이용하여 class를 공유하는 특정 요소들의 스타일을 지정할 수 있습니다.

HTML CSS 적용 방법
HTML CSS 적용

id 속성은 웹 페이지 내의 유일한 요소에 지정합니다. class의 경우에는 웹 페이지 내의 여러 요소에 지정할 수 있습니다. 위 HTML 문서에서 <h1>태그의 id"title"이 지정되어있고 <div>태그의 class"article"로 지정되어 있습니다. 여기서 HTML 태그의 스타일이 아닌 idclass를 선택해 CSS를 작성한다면 위와 같이 작성할 수 있습니다.

HTML CSS 연결

해당 CSS를 적용한다면 다음과 같은 화면으로 바뀌게 됩니다. article이라는 class를 공유하는 모든 요소에 동일한 스타일이 적용된 것을 확인할 수 있습니다. 만약 특정 요소에 id, class가 모두 지정되어 있다면 스타일이 적용되는 우선순위는 tag < class < id 가 됩니다.

HTML에 CSS 적용하기

CSS 문법에 대해 알아봤으니 이제 작성한 CSS를 HTML과 연결할 차례입니다. HTML과 CSS를 연결하는 방법은 크게 3가지로 나누어집니다.

다음과 같이 <h1>의 색상은 빨간색으로 바꾸고 배경색을 노란색으로 바꾼다고 가정해보겠습니다.

HTML CSS 적용 연결

인라인 스타일 (Inline Style)

HTML 태그 내에 style 속성을 이용하여 CSS를 지정할 수 있습니다. 이 방법의 경우 이미 스타일을 적용할 요소가 지정되어 있기 때문에 선택자 및 선언 블록없이 바로 스타일 속성값을 지정합니다.

내부 스타일 시트(Internal Stylesheet)

HTML 문서의 <head> 태그 내에 <style> 태그를 삽입하고 해당 태그 사이에 CSS 문법을 작성해 스타일을 지정할 수 있습니다. 이 경우 해당 HTML 문서에만 스타일이 적용됩니다.

내부 스타일 시트(Internal Stylesheet)

외부 스타일 시트(External Stylesheet)

HTML 문서 내부가 아닌 외부에서 CSS 파일을 작성했다면, HTML 문서의 <head> 태그 내에 <link> 태그를 삽입하여 HTML 문서에 CSS를 연결할 수 있습니다. <link> 태그의 rel 속성을 stylesheet로 지정하고 herf 속성으로 CSS 파일의 경로를 지정하여 연결할 수 있습니다.

외부 스타일 시트(External style sheet)

HTML, CSS, JavaScript 까지
프론트엔드 개발 부트캠프에서

웹사이트를 만드는 데 있어 뼈대가 되는 HTML과 이를 꾸며주는 CSS, 그리고 HTML에 CSS를 적용하는 방법까지 알아보았습니다. 여기에 브라우저에서 유일하게 알아들을 수 있는 프로그래밍 언어인 JavaScript를 추가하면 단순히 예쁘게 보이는 페이지를 넘어 유튜브, 에어비앤비와 같이 사용자와 동적으로 소통하는 사이트로 만들 수 있습니다.

코드스테이츠 프론트엔드 개발 부트캠프는 사용자 친화적 웹 서비스 개발 능력을 갖춘 프론트엔드 개발자 양성 과정으로 HTML, CSS의 기초 문법을 이해하고 응용하여 다양한 디자인과 레이아웃을 구현할 수 있도록 커리큘럼이 짜여져 있으며 JavaScript, React 등의 웹 프론트엔드 개발 언어 기초와 심화도 다루고 있습니다.

김은혜 Educational Software Engineer (Front-End)
편집 조주연 Content Manager


👩‍💻 개발자 커리어의 시작,
코드스테이츠 부트캠프가 더 궁금하다면?

추천글

코드스테이츠 스토리

“제가 왜 불합격인가요?” 프론트엔드·백엔드 수강생 선발 기준ㅣ코드스테이츠 어드미션팀 이현석님

2022년 10월 04일

코드스테이츠 불합격 재도전

수료생 후기

“디자이너에서 ML 서비스 개발자로 커리어를 전환했어요.”ㅣ프론트엔드 개발 부트캠프 35기 지원재님

2022년 09월 28일

프론트엔드 개발 부트캠프 후기

인사이트

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법

2022년 09월 16일

자바스크립트 DOM javascript

코드스테이츠 스토리

“제가 왜 불합격인가요?” 프론트엔드·백엔드 수강생 선발 기준ㅣ코드스테이츠 어드미션팀 이현석님

2022년 10월 04일

코드스테이츠 불합격 재도전

수료생 후기

“디자이너에서 ML 서비스 개발자로 커리어를 전환했어요.”ㅣ프론트엔드 개발 부트캠프 35기 지원재님

2022년 09월 28일

프론트엔드 개발 부트캠프 후기

인사이트

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법

2022년 09월 16일

자바스크립트 DOM javascript

인사이트

HTML, CSS 기초 입문부터 HTML CSS 적용 방법, 예제까지

2022년 09월 27일

웹사이트는 어떤 요소들로 구성되어 있을까요? 대부분의 웹사이트는 HTML 문서를 기반으로 디자인과 가독성을 높이기 위한 CSS 그리고 웹 사이트와 사용자 간의 다양한 상호작용을 구성할 수 있는 자바스크립트(JavaScript)가 덧붙여진 형태입니다. 따라서 웹사이트의 보이는 영역을 다루는 프론트엔드 개발을 시작하고 싶다면 HTML, CSS, JavaScript 3가지 언어의 작동 원리 및 문법을 필수적으로 학습해야 합니다.

오늘은 이 중 웹페이지의 뼈대를 이루는 HTML과 HTML 요소의 서식을 지정할 수 있는 CSS, 그리고 HTML에 CSS를 적용하는 방법에 대해 알아보도록 하겠습니다.

HTML CSS 기초 입문

HTML이란?

HTML은 Hypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어입니다. 따라서 우리가 브라우저를 통해 보는 페이지는 모두 HTML로 작성되어 있습니다.

HTML에서 Hypertext의 의미는 링크를 통해 다른 문서로 이동할 수 있는 문서를 뜻합니다. 하이퍼텍스트라는 개념이 등장하기 전에는 방대한 양의 문서를 효율적으로 다루기 위해 색인 또는 다양한 문서 분류법이 사용되었습니다. 하지만 웹이 등장하면서 HTML 문서를 이용해 문서 간의 참조가 자유로워짐에 따라 특정 단어가 담긴 문서를 쉽게 검색할 수 있게 되었습니다. 이렇게 웹은 우리 생활 깊숙이 자리 잡게 되었습니다.

html 프로그래밍 언어 마크업 언어
프로그래밍 언어와 마크업 언어

또한 HTML은 마크업 언어로써, 여러 가지 태그를 이용하여 제목이나 문단 등을 구분해 정보를 구조화할 수 있습니다. 마크업 언어는 주어진 데이터를 구조화하고 형식을 나타낸다는 점에서 변수나 함수 등을 이용해 기능을 구현하는 프로그래밍 언어와 차이가 있습니다.

HTML 구조

HTML은 트리구조로 이루어져 있으며 이는 나무의 뿌리가 기둥에서부터 여러 갈래로 갈라지는 것처럼 부모 요소 안에서 여러 가지 자식 태그들이 갈라져 나온 형태입니다. HTML 문서를 트리 구조로 도식화 한다면 아래와 같은 이미지가 됩니다.

html 트리 구조
HTML 트리 구조

HTML 문서를 작성할 땐 <!DOCTYPE html> 태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시하고 <html> 태그로 전체 틀을 구성합니다. 그리고 해당 태그 안에서 크게 <head><body>로 영역을 나눕니다. 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담고 헤드 태그 사이에는 사용자 눈에는 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기합니다.

HTML 문서 작성 방법 head body
HTML 문서 작성 방법

HTML 태그

HTML은 열린 태그 <>과 닫힌 태그 </> 사이에 콘텐츠를 위치하여 문서의 구조를 표현할 수 있습니다. 문법 자체는 비교적 학습하기 쉬운 편입니다. 각각의 태그들은 목적에 따른 여러가지 속성을 가지고 있으며 이에 대한 속성값을 지정할 수 있습니다. 위 이미지처럼 콘텐츠에 링크를 연결할 수 있는 <a> 태그의 경우 연결될 링크의 주소를 href라는 속성을 통해 지정할 수 있습니다.

html 열린 태그 닫힌 태그
HTML 태그

HTML의 대표적인 태그들과 그들이 가진 속성에 대해 좀 더 자세히 알아보겠습니다.

h1 태그

먼저 대표적으로 문서의 제목(Heading)을 표시하는 <h1> 태그가 있습니다. <h1> ~ <h6>까지, 다양한 크기로 문서의 제목과 소제목을 병기할 수 있습니다.

html h1태그
HTML h1 태그

p 태그

제목뿐만 아니라 단락을 지정할 수 있는 <p> 태그도 있습니다. <p> 태그는 Paragraph의 약자로 해당 태그를 사용하면 문단의 앞뒤로 여백이 추가됩니다.

html p 태그
HTML p 태그

img 태그

이미지를 표시할 수 있는 <img> 태그는 닫힌 태그 없이도 작성이 가능한 Self-Closing 태그입니다.

이미지 태그의 src 속성으로 표시할 이미지의 주소값을 입력하며 width 혹은 height 속성을 이용해 이미지의 크기를 지정할 수 있습니다.

또한 이미지에 마우스를 올렸을 때 표시할 텍스트를 title 속성으로 지정할 수 있으며 위 화면의 두 번째 이미지처럼 이미지를 정상적으로 불러오지 못했을 때 alt 속성을 이용해 대체할 텍스트를 지정할 수 있습니다.

html img 태그
HTML img 태그

input, button 태그

웹사이트에서 로그인과 같이 사용자의 정보 입력이 필요할 경우, <input> 태그를 사용할 수 있습니다. <input> 태그 또한 Self-Closing 태그이며 입력받는 정보가 어떤 것인지에 따라 type을 지정할 수 있습니다. 사용자에게 어떤 정보를 입력해야 하는지 힌트를 주고 싶다면 placeholder 속성을 사용할 수 있습니다. 이 속성에 텍스트를 지정하면 사용자가 해당 태그를 클릭하기 전까지 해당 텍스트가 표시됩니다.

사용자가 클릭할 수 있는 버튼이 필요할 경우에는 <input type="button" /> 혹은 <button> 태그를 사용할 수 있습니다. <button> 태그는 열린 태그와 닫힌 태그로 이루어져 있기 때문에 태그 사이에 컨텐츠를 포함해 시각적인 효과를 줄 수 있습니다.

html input 태그 button 태그
HTML input 태그, button 태그

ul, ol, li 태그

HTML로 리스트를 표현하고 싶다면 <ul> 혹은 <ol> 태그를 사용할 수 있습니다. <ul>은 unordered list의 약자로 순서가 없는 불릿 형태로 작성된 리스트를 뜻합니다. <ol>은 ordered list의 약자로 순서가 있는 리스트를 뜻합니다. 리스트에 위치할 항목들은 <ul>, <ol> 상관없이 공통으로 <li> 태그를 이용해 작성합니다.

HTML ul 태그 ol 태그 li 태그
HTML ul 태그, ol 태그, li 태그

div, span 태그

이 외에도 앞에서 다룬 <button> 태그처럼 태그 사용 시 요소가 즉각적으로 나타나는 것과는 별개로 화면 내에서 아무런 역할을 하진 않지만, HTML 문서의 영역을 분리하거나 인라인 요소를 감쌀 때 사용하는 <div><span> 태그도 있습니다.

페이지의 영역을 분리(division)할 때는 <div> 태그, 텍스트와 같이 줄 바꿈없이 한 줄로 나열되는 인라인 요소들을 나타낼 때는 <span> 태그를 사용합니다.

HTML div 태그, span 태그
HTML div 태그, span 태그

시맨틱 태그 (Semantic Tags)

앞서 다룬 여러 가지 태그 외에도 웹 페이지의 각 영역을 보다 의미 있게 작성할 수 있는 시맨틱 태그가 있습니다. 시맨틱 태그는 태그 이름 자체만으로도 해당 태그가 페이지 내에서 어떤 역할을 하는지 알 수 있도록 의미가 담긴 것이 특징입니다.

HTML 시맨틱 태그 (Semantic Tags)
HTML 시맨틱 태그 (Semantic Tags)

기존에는 태그의 역할 및 레이아웃과 관계없이 블록 요소라면 모두 <div>, 인라인 요소라면 모두 <span>을 쓰는 것이 대부분이었지만 웹의 레이아웃이 점점 다양해지면서 영역을 구분하여 코드를 작성하는 것이 중요해지게 되었습니다. 따라서 HTML5 버전부터 <header>, <footer> 와 같이 태그 자체에 의미를 담은 여러 가지 시맨틱 태그들이 등장하게 되었습니다.

시맨틱 태그를 사용하면 브라우저 검색 시, 문서 구조를 보다 정확히 분석할 수 있기 때문에 알맞은 검색 결과를 찾도록 유도할 수 있습니다. 그리고 개발자 또한 코드를 더욱 직관적으로 이해할 수 있기 때문에 유지보수하기도 더욱 쉬워집니다.

  • <header> : 페이지 상단에 로고 혹은 메뉴바 등이 담겨있는 영역을 구분할 때 사용합니다.
  • <nav> : Navigation의 약자로 메뉴바처럼 여러가지 링크들을 모아놓은 영역을 구분할 때 사용합니다.
  • <main> : 제목이나 본문처럼 페이지의 가장 중요한 영역을 구분할 때 사용합니다.
  • <aside> : 페이지의 사이드바처럼 본문과 별개의 내용을 포함하는 사이드에 위치한 영역을 구분할 때 사용합니다.
  • <footer> : 카피라이트나 회사 정보 등이 담겨있는 페이지의 하단 영역을 구분할 때 사용합니다.
  • <section> : 한 영역 안에서 구분이 필요한 경우 <div>를 대신하여 사용합니다.
  • <article> : <section>과 비슷하지만, 관련 뉴스 혹은 관련 컨텐츠처럼 그 자체만으로도 독립적인 영역을 구분할 때 사용합니다.

CSS란?

CSS는 Cascading Style Sheets의 약자로 기본적인 스타일이 이미 지정된 HTML 요소를 개발자가 직접 다양한 스타일로 디자인할 수 있는 언어입니다.

만약 <button>구매하기</button>가 적힌 HTML 문서를 브라우저가 해석하면 기본적인 버튼 스타일이 적용되어 하단 이미지의 왼쪽과 같은 버튼이 화면에 나타나게 됩니다. 이때 버튼 태그의 너비 또는 높이, 색 등을 지정한 CSS를 HTML과 연결하면 하단 이미지의 오른쪽과 같은 디자인이 가미된 버튼으로 바꿀 수 있습니다.

HTML CSS 차이점
HTML 언어와 CSS 언어의 차이

그뿐만 아니라 버튼에 마우스를 올리거나 버튼을 클릭했을 때와 색상이 변하는 등 특정 이벤트에 따른 스타일도 지정할 수 있어 다채로운 사용자 경험을 제공할 수 있습니다.

HTML CSS 활용
HTML 문서에 CSS를 활용하면?

그래서 CSS를 활용하면 위처럼 내용과 형식이 혼재된 HTML 문서를 사용자가 보기에 심미성 있고 다루기도 편리한 웹사이트로 만들 수 있습니다.

CSS 기본 문법

CSS 문법은 크게 셀렉터선언 블록으로 나뉩니다. 먼저 셀렉터로 스타일을 지정할 HTML 요소나 id, class 등을 선택한 뒤 그에 대한 스타일을 선언 블록인 중괄호{} 사이에 지정하는 방식입니다. 그리고 각각의 스타일 속성들은 세미콜론;으로 구분합니다.

CSS 기본 문법
CSS 기본 문법

예시를 통해 알아보도록 하겠습니다. 위에서 다룬 버튼 요소에 지정된 CSS를 살펴보겠습니다. 주석에 적힌 내용을 CSS 문법으로 작성한다면 다음과 같습니다.

HTML CSS 차이점
HTML CSS 차이점

HTML 태그 이외에도 #를 이용하여 특정 요소에 지정된 id에 따라 스타일을 지정하거나 .을 이용하여 class를 공유하는 특정 요소들의 스타일을 지정할 수 있습니다.

HTML CSS 적용 방법
HTML CSS 적용

id 속성은 웹 페이지 내의 유일한 요소에 지정합니다. class의 경우에는 웹 페이지 내의 여러 요소에 지정할 수 있습니다. 위 HTML 문서에서 <h1>태그의 id"title"이 지정되어있고 <div>태그의 class"article"로 지정되어 있습니다. 여기서 HTML 태그의 스타일이 아닌 idclass를 선택해 CSS를 작성한다면 위와 같이 작성할 수 있습니다.

HTML CSS 연결

해당 CSS를 적용한다면 다음과 같은 화면으로 바뀌게 됩니다. article이라는 class를 공유하는 모든 요소에 동일한 스타일이 적용된 것을 확인할 수 있습니다. 만약 특정 요소에 id, class가 모두 지정되어 있다면 스타일이 적용되는 우선순위는 tag < class < id 가 됩니다.

HTML에 CSS 적용하기

CSS 문법에 대해 알아봤으니 이제 작성한 CSS를 HTML과 연결할 차례입니다. HTML과 CSS를 연결하는 방법은 크게 3가지로 나누어집니다.

다음과 같이 <h1>의 색상은 빨간색으로 바꾸고 배경색을 노란색으로 바꾼다고 가정해보겠습니다.

HTML CSS 적용 연결

인라인 스타일 (Inline Style)

HTML 태그 내에 style 속성을 이용하여 CSS를 지정할 수 있습니다. 이 방법의 경우 이미 스타일을 적용할 요소가 지정되어 있기 때문에 선택자 및 선언 블록없이 바로 스타일 속성값을 지정합니다.

내부 스타일 시트(Internal Stylesheet)

HTML 문서의 <head> 태그 내에 <style> 태그를 삽입하고 해당 태그 사이에 CSS 문법을 작성해 스타일을 지정할 수 있습니다. 이 경우 해당 HTML 문서에만 스타일이 적용됩니다.

내부 스타일 시트(Internal Stylesheet)

외부 스타일 시트(External Stylesheet)

HTML 문서 내부가 아닌 외부에서 CSS 파일을 작성했다면, HTML 문서의 <head> 태그 내에 <link> 태그를 삽입하여 HTML 문서에 CSS를 연결할 수 있습니다. <link> 태그의 rel 속성을 stylesheet로 지정하고 herf 속성으로 CSS 파일의 경로를 지정하여 연결할 수 있습니다.

외부 스타일 시트(External style sheet)

HTML, CSS, JavaScript 까지
프론트엔드 개발 부트캠프에서

웹사이트를 만드는 데 있어 뼈대가 되는 HTML과 이를 꾸며주는 CSS, 그리고 HTML에 CSS를 적용하는 방법까지 알아보았습니다. 여기에 브라우저에서 유일하게 알아들을 수 있는 프로그래밍 언어인 JavaScript를 추가하면 단순히 예쁘게 보이는 페이지를 넘어 유튜브, 에어비앤비와 같이 사용자와 동적으로 소통하는 사이트로 만들 수 있습니다.

코드스테이츠 프론트엔드 개발 부트캠프는 사용자 친화적 웹 서비스 개발 능력을 갖춘 프론트엔드 개발자 양성 과정으로 HTML, CSS의 기초 문법을 이해하고 응용하여 다양한 디자인과 레이아웃을 구현할 수 있도록 커리큘럼이 짜여져 있으며 JavaScript, React 등의 웹 프론트엔드 개발 언어 기초와 심화도 다루고 있습니다.

김은혜 Educational Software Engineer (Front-End)
편집 조주연 Content Manager


👩‍💻 개발자 커리어의 시작,
코드스테이츠 부트캠프가 더 궁금하다면?

추천글

코드스테이츠 불합격 재도전

코드스테이츠 스토리

“제가 왜 불합격인가요?” 프론트엔드·백엔드 수강생 선발 기준ㅣ코드스테이츠 어드미션팀 이현석님

코드스테이츠 부트캠프를 통해 성공적인 직무 전환을 이뤄낼 잠재력이 있는 지원자를 선발하기 위해 끊임없이 고민하는 어드미션팀 PM 이현석님의 인터뷰입니다.

2022년 10월 04일

프론트엔드 개발 부트캠프 후기

수료생 후기

“디자이너에서 ML 서비스 개발자로 커리어를 전환했어요.”ㅣ프론트엔드 개발 부트캠프 35기 지원재님

코드스테이츠 개발 부트캠프는 개발자가 가져야하는 자세나, 공부 습관, 탄탄한 기반을 닦기에 정말 좋은 곳 이라는 생각이 들어요.

2022년 09월 28일

인사이트

HTML, CSS 기초 입문부터 HTML CSS 적용 방법, 예제까지

2022년 09월 27일

웹사이트는 어떤 요소들로 구성되어 있을까요? 대부분의 웹사이트는 HTML 문서를 기반으로 디자인과 가독성을 높이기 위한 CSS 그리고 웹 사이트와 사용자 간의 다양한 상호작용을 구성할 수 있는 자바스크립트(JavaScript)가 덧붙여진 형태입니다. 따라서 웹사이트의 보이는 영역을 다루는 프론트엔드 개발을 시작하고 싶다면 HTML, CSS, JavaScript 3가지 언어의 작동 원리 및 문법을 필수적으로 학습해야 합니다.

오늘은 이 중 웹페이지의 뼈대를 이루는 HTML과 HTML 요소의 서식을 지정할 수 있는 CSS, 그리고 HTML에 CSS를 적용하는 방법에 대해 알아보도록 하겠습니다.

HTML CSS 기초 입문

HTML이란?

HTML은 Hypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어입니다. 따라서 우리가 브라우저를 통해 보는 페이지는 모두 HTML로 작성되어 있습니다.

HTML에서 Hypertext의 의미는 링크를 통해 다른 문서로 이동할 수 있는 문서를 뜻합니다. 하이퍼텍스트라는 개념이 등장하기 전에는 방대한 양의 문서를 효율적으로 다루기 위해 색인 또는 다양한 문서 분류법이 사용되었습니다. 하지만 웹이 등장하면서 HTML 문서를 이용해 문서 간의 참조가 자유로워짐에 따라 특정 단어가 담긴 문서를 쉽게 검색할 수 있게 되었습니다. 이렇게 웹은 우리 생활 깊숙이 자리 잡게 되었습니다.

html 프로그래밍 언어 마크업 언어
프로그래밍 언어와 마크업 언어

또한 HTML은 마크업 언어로써, 여러 가지 태그를 이용하여 제목이나 문단 등을 구분해 정보를 구조화할 수 있습니다. 마크업 언어는 주어진 데이터를 구조화하고 형식을 나타낸다는 점에서 변수나 함수 등을 이용해 기능을 구현하는 프로그래밍 언어와 차이가 있습니다.

HTML 구조

HTML은 트리구조로 이루어져 있으며 이는 나무의 뿌리가 기둥에서부터 여러 갈래로 갈라지는 것처럼 부모 요소 안에서 여러 가지 자식 태그들이 갈라져 나온 형태입니다. HTML 문서를 트리 구조로 도식화 한다면 아래와 같은 이미지가 됩니다.

html 트리 구조
HTML 트리 구조

HTML 문서를 작성할 땐 <!DOCTYPE html> 태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시하고 <html> 태그로 전체 틀을 구성합니다. 그리고 해당 태그 안에서 크게 <head><body>로 영역을 나눕니다. 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담고 헤드 태그 사이에는 사용자 눈에는 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기합니다.

HTML 문서 작성 방법 head body
HTML 문서 작성 방법

HTML 태그

HTML은 열린 태그 <>과 닫힌 태그 </> 사이에 콘텐츠를 위치하여 문서의 구조를 표현할 수 있습니다. 문법 자체는 비교적 학습하기 쉬운 편입니다. 각각의 태그들은 목적에 따른 여러가지 속성을 가지고 있으며 이에 대한 속성값을 지정할 수 있습니다. 위 이미지처럼 콘텐츠에 링크를 연결할 수 있는 <a> 태그의 경우 연결될 링크의 주소를 href라는 속성을 통해 지정할 수 있습니다.

html 열린 태그 닫힌 태그
HTML 태그

HTML의 대표적인 태그들과 그들이 가진 속성에 대해 좀 더 자세히 알아보겠습니다.

h1 태그

먼저 대표적으로 문서의 제목(Heading)을 표시하는 <h1> 태그가 있습니다. <h1> ~ <h6>까지, 다양한 크기로 문서의 제목과 소제목을 병기할 수 있습니다.

html h1태그
HTML h1 태그

p 태그

제목뿐만 아니라 단락을 지정할 수 있는 <p> 태그도 있습니다. <p> 태그는 Paragraph의 약자로 해당 태그를 사용하면 문단의 앞뒤로 여백이 추가됩니다.

html p 태그
HTML p 태그

img 태그

이미지를 표시할 수 있는 <img> 태그는 닫힌 태그 없이도 작성이 가능한 Self-Closing 태그입니다.

이미지 태그의 src 속성으로 표시할 이미지의 주소값을 입력하며 width 혹은 height 속성을 이용해 이미지의 크기를 지정할 수 있습니다.

또한 이미지에 마우스를 올렸을 때 표시할 텍스트를 title 속성으로 지정할 수 있으며 위 화면의 두 번째 이미지처럼 이미지를 정상적으로 불러오지 못했을 때 alt 속성을 이용해 대체할 텍스트를 지정할 수 있습니다.

html img 태그
HTML img 태그

input, button 태그

웹사이트에서 로그인과 같이 사용자의 정보 입력이 필요할 경우, <input> 태그를 사용할 수 있습니다. <input> 태그 또한 Self-Closing 태그이며 입력받는 정보가 어떤 것인지에 따라 type을 지정할 수 있습니다. 사용자에게 어떤 정보를 입력해야 하는지 힌트를 주고 싶다면 placeholder 속성을 사용할 수 있습니다. 이 속성에 텍스트를 지정하면 사용자가 해당 태그를 클릭하기 전까지 해당 텍스트가 표시됩니다.

사용자가 클릭할 수 있는 버튼이 필요할 경우에는 <input type="button" /> 혹은 <button> 태그를 사용할 수 있습니다. <button> 태그는 열린 태그와 닫힌 태그로 이루어져 있기 때문에 태그 사이에 컨텐츠를 포함해 시각적인 효과를 줄 수 있습니다.

html input 태그 button 태그
HTML input 태그, button 태그

ul, ol, li 태그

HTML로 리스트를 표현하고 싶다면 <ul> 혹은 <ol> 태그를 사용할 수 있습니다. <ul>은 unordered list의 약자로 순서가 없는 불릿 형태로 작성된 리스트를 뜻합니다. <ol>은 ordered list의 약자로 순서가 있는 리스트를 뜻합니다. 리스트에 위치할 항목들은 <ul>, <ol> 상관없이 공통으로 <li> 태그를 이용해 작성합니다.

HTML ul 태그 ol 태그 li 태그
HTML ul 태그, ol 태그, li 태그

div, span 태그

이 외에도 앞에서 다룬 <button> 태그처럼 태그 사용 시 요소가 즉각적으로 나타나는 것과는 별개로 화면 내에서 아무런 역할을 하진 않지만, HTML 문서의 영역을 분리하거나 인라인 요소를 감쌀 때 사용하는 <div><span> 태그도 있습니다.

페이지의 영역을 분리(division)할 때는 <div> 태그, 텍스트와 같이 줄 바꿈없이 한 줄로 나열되는 인라인 요소들을 나타낼 때는 <span> 태그를 사용합니다.

HTML div 태그, span 태그
HTML div 태그, span 태그

시맨틱 태그 (Semantic Tags)

앞서 다룬 여러 가지 태그 외에도 웹 페이지의 각 영역을 보다 의미 있게 작성할 수 있는 시맨틱 태그가 있습니다. 시맨틱 태그는 태그 이름 자체만으로도 해당 태그가 페이지 내에서 어떤 역할을 하는지 알 수 있도록 의미가 담긴 것이 특징입니다.

HTML 시맨틱 태그 (Semantic Tags)
HTML 시맨틱 태그 (Semantic Tags)

기존에는 태그의 역할 및 레이아웃과 관계없이 블록 요소라면 모두 <div>, 인라인 요소라면 모두 <span>을 쓰는 것이 대부분이었지만 웹의 레이아웃이 점점 다양해지면서 영역을 구분하여 코드를 작성하는 것이 중요해지게 되었습니다. 따라서 HTML5 버전부터 <header>, <footer> 와 같이 태그 자체에 의미를 담은 여러 가지 시맨틱 태그들이 등장하게 되었습니다.

시맨틱 태그를 사용하면 브라우저 검색 시, 문서 구조를 보다 정확히 분석할 수 있기 때문에 알맞은 검색 결과를 찾도록 유도할 수 있습니다. 그리고 개발자 또한 코드를 더욱 직관적으로 이해할 수 있기 때문에 유지보수하기도 더욱 쉬워집니다.

  • <header> : 페이지 상단에 로고 혹은 메뉴바 등이 담겨있는 영역을 구분할 때 사용합니다.
  • <nav> : Navigation의 약자로 메뉴바처럼 여러가지 링크들을 모아놓은 영역을 구분할 때 사용합니다.
  • <main> : 제목이나 본문처럼 페이지의 가장 중요한 영역을 구분할 때 사용합니다.
  • <aside> : 페이지의 사이드바처럼 본문과 별개의 내용을 포함하는 사이드에 위치한 영역을 구분할 때 사용합니다.
  • <footer> : 카피라이트나 회사 정보 등이 담겨있는 페이지의 하단 영역을 구분할 때 사용합니다.
  • <section> : 한 영역 안에서 구분이 필요한 경우 <div>를 대신하여 사용합니다.
  • <article> : <section>과 비슷하지만, 관련 뉴스 혹은 관련 컨텐츠처럼 그 자체만으로도 독립적인 영역을 구분할 때 사용합니다.

CSS란?

CSS는 Cascading Style Sheets의 약자로 기본적인 스타일이 이미 지정된 HTML 요소를 개발자가 직접 다양한 스타일로 디자인할 수 있는 언어입니다.

만약 <button>구매하기</button>가 적힌 HTML 문서를 브라우저가 해석하면 기본적인 버튼 스타일이 적용되어 하단 이미지의 왼쪽과 같은 버튼이 화면에 나타나게 됩니다. 이때 버튼 태그의 너비 또는 높이, 색 등을 지정한 CSS를 HTML과 연결하면 하단 이미지의 오른쪽과 같은 디자인이 가미된 버튼으로 바꿀 수 있습니다.

HTML CSS 차이점
HTML 언어와 CSS 언어의 차이

그뿐만 아니라 버튼에 마우스를 올리거나 버튼을 클릭했을 때와 색상이 변하는 등 특정 이벤트에 따른 스타일도 지정할 수 있어 다채로운 사용자 경험을 제공할 수 있습니다.

HTML CSS 활용
HTML 문서에 CSS를 활용하면?

그래서 CSS를 활용하면 위처럼 내용과 형식이 혼재된 HTML 문서를 사용자가 보기에 심미성 있고 다루기도 편리한 웹사이트로 만들 수 있습니다.

CSS 기본 문법

CSS 문법은 크게 셀렉터선언 블록으로 나뉩니다. 먼저 셀렉터로 스타일을 지정할 HTML 요소나 id, class 등을 선택한 뒤 그에 대한 스타일을 선언 블록인 중괄호{} 사이에 지정하는 방식입니다. 그리고 각각의 스타일 속성들은 세미콜론;으로 구분합니다.

CSS 기본 문법
CSS 기본 문법

예시를 통해 알아보도록 하겠습니다. 위에서 다룬 버튼 요소에 지정된 CSS를 살펴보겠습니다. 주석에 적힌 내용을 CSS 문법으로 작성한다면 다음과 같습니다.

HTML CSS 차이점
HTML CSS 차이점

HTML 태그 이외에도 #를 이용하여 특정 요소에 지정된 id에 따라 스타일을 지정하거나 .을 이용하여 class를 공유하는 특정 요소들의 스타일을 지정할 수 있습니다.

HTML CSS 적용 방법
HTML CSS 적용

id 속성은 웹 페이지 내의 유일한 요소에 지정합니다. class의 경우에는 웹 페이지 내의 여러 요소에 지정할 수 있습니다. 위 HTML 문서에서 <h1>태그의 id"title"이 지정되어있고 <div>태그의 class"article"로 지정되어 있습니다. 여기서 HTML 태그의 스타일이 아닌 idclass를 선택해 CSS를 작성한다면 위와 같이 작성할 수 있습니다.

HTML CSS 연결

해당 CSS를 적용한다면 다음과 같은 화면으로 바뀌게 됩니다. article이라는 class를 공유하는 모든 요소에 동일한 스타일이 적용된 것을 확인할 수 있습니다. 만약 특정 요소에 id, class가 모두 지정되어 있다면 스타일이 적용되는 우선순위는 tag < class < id 가 됩니다.

HTML에 CSS 적용하기

CSS 문법에 대해 알아봤으니 이제 작성한 CSS를 HTML과 연결할 차례입니다. HTML과 CSS를 연결하는 방법은 크게 3가지로 나누어집니다.

다음과 같이 <h1>의 색상은 빨간색으로 바꾸고 배경색을 노란색으로 바꾼다고 가정해보겠습니다.

HTML CSS 적용 연결

인라인 스타일 (Inline Style)

HTML 태그 내에 style 속성을 이용하여 CSS를 지정할 수 있습니다. 이 방법의 경우 이미 스타일을 적용할 요소가 지정되어 있기 때문에 선택자 및 선언 블록없이 바로 스타일 속성값을 지정합니다.

내부 스타일 시트(Internal Stylesheet)

HTML 문서의 <head> 태그 내에 <style> 태그를 삽입하고 해당 태그 사이에 CSS 문법을 작성해 스타일을 지정할 수 있습니다. 이 경우 해당 HTML 문서에만 스타일이 적용됩니다.

내부 스타일 시트(Internal Stylesheet)

외부 스타일 시트(External Stylesheet)

HTML 문서 내부가 아닌 외부에서 CSS 파일을 작성했다면, HTML 문서의 <head> 태그 내에 <link> 태그를 삽입하여 HTML 문서에 CSS를 연결할 수 있습니다. <link> 태그의 rel 속성을 stylesheet로 지정하고 herf 속성으로 CSS 파일의 경로를 지정하여 연결할 수 있습니다.

외부 스타일 시트(External style sheet)

HTML, CSS, JavaScript 까지
프론트엔드 개발 부트캠프에서

웹사이트를 만드는 데 있어 뼈대가 되는 HTML과 이를 꾸며주는 CSS, 그리고 HTML에 CSS를 적용하는 방법까지 알아보았습니다. 여기에 브라우저에서 유일하게 알아들을 수 있는 프로그래밍 언어인 JavaScript를 추가하면 단순히 예쁘게 보이는 페이지를 넘어 유튜브, 에어비앤비와 같이 사용자와 동적으로 소통하는 사이트로 만들 수 있습니다.

코드스테이츠 프론트엔드 개발 부트캠프는 사용자 친화적 웹 서비스 개발 능력을 갖춘 프론트엔드 개발자 양성 과정으로 HTML, CSS의 기초 문법을 이해하고 응용하여 다양한 디자인과 레이아웃을 구현할 수 있도록 커리큘럼이 짜여져 있으며 JavaScript, React 등의 웹 프론트엔드 개발 언어 기초와 심화도 다루고 있습니다.

김은혜 Educational Software Engineer (Front-End)
편집 조주연 Content Manager


👩‍💻 개발자 커리어의 시작,
코드스테이츠 부트캠프가 더 궁금하다면?

추천글

코드스테이츠 불합격 재도전

코드스테이츠 스토리

“제가 왜 불합격인가요?” 프론트엔드·백엔드 수강생 선발 기준ㅣ코드스테이츠 어드미션팀 이현석님

코드스테이츠 부트캠프를 통해 성공적인 직무 전환을 이뤄낼 잠재력이 있는 지원자를 선발하기 위해 끊임없이 고민하는 어드미션팀 PM 이현석님의 인터뷰입니다.

2022년 10월 04일

프론트엔드 개발 부트캠프 후기

수료생 후기

“디자이너에서 ML 서비스 개발자로 커리어를 전환했어요.”ㅣ프론트엔드 개발 부트캠프 35기 지원재님

코드스테이츠 개발 부트캠프는 개발자가 가져야하는 자세나, 공부 습관, 탄탄한 기반을 닦기에 정말 좋은 곳 이라는 생각이 들어요.

2022년 09월 28일

자바스크립트 DOM javascript

인사이트

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법

DOM이란 무엇이고, 어떻게 자바스크립트와 DOM을 이용해 인터랙티브한 기능을 구현할 수 있는지 정리했습니다.

2022년 09월 16일

꿈꾸는 커리어의 시작