HTML, CSS 기초 입문부터 HTML CSS 적용 방법, 예제까지
인사이트
HTML, CSS 기초 입문부터 HTML CSS 적용 방법, 예제까지
2022년 09월 27일
웹사이트는 어떤 요소들로 구성되어 있을까요? 대부분의 웹사이트는 HTML 문서를 기반으로 디자인과 가독성을 높이기 위한 CSS 그리고 웹 사이트와 사용자 간의 다양한 상호작용을 구성할 수 있는 자바스크립트(JavaScript)가 덧붙여진 형태입니다. 따라서 웹사이트의 보이는 영역을 다루는 프론트엔드 개발을 시작하고 싶다면 HTML, CSS, JavaScript 3가지 언어의 작동 원리 및 문법을 필수적으로 학습해야 합니다.
오늘은 이 중 웹페이지의 뼈대를 이루는 HTML과 HTML 요소의 서식을 지정할 수 있는 CSS, 그리고 HTML에 CSS를 적용하는 방법에 대해 알아보도록 하겠습니다.
HTML이란?
HTML은 Hypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어입니다. 따라서 우리가 브라우저를 통해 보는 페이지는 모두 HTML로 작성되어 있습니다.
HTML에서 Hypertext의 의미는 링크를 통해 다른 문서로 이동할 수 있는 문서를 뜻합니다. 하이퍼텍스트라는 개념이 등장하기 전에는 방대한 양의 문서를 효율적으로 다루기 위해 색인 또는 다양한 문서 분류법이 사용되었습니다. 하지만 웹이 등장하면서 HTML 문서를 이용해 문서 간의 참조가 자유로워짐에 따라 특정 단어가 담긴 문서를 쉽게 검색할 수 있게 되었습니다. 이렇게 웹은 우리 생활 깊숙이 자리 잡게 되었습니다.
또한 HTML은 마크업 언어로써, 여러 가지 태그를 이용하여 제목이나 문단 등을 구분해 정보를 구조화할 수 있습니다. 마크업 언어는 주어진 데이터를 구조화하고 형식을 나타낸다는 점에서 변수나 함수 등을 이용해 기능을 구현하는 프로그래밍 언어와 차이가 있습니다.
HTML 구조
HTML은 트리구조로 이루어져 있으며 이는 나무의 뿌리가 기둥에서부터 여러 갈래로 갈라지는 것처럼 부모 요소 안에서 여러 가지 자식 태그들이 갈라져 나온 형태입니다. HTML 문서를 트리 구조로 도식화 한다면 아래와 같은 이미지가 됩니다.
HTML 문서를 작성할 땐 <!DOCTYPE html> 태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시하고 <html> 태그로 전체 틀을 구성합니다. 그리고 해당 태그 안에서 크게 <head> 와 <body>로 영역을 나눕니다. 바디 태그 사이에는 사용자 눈에 보이는, 즉 브라우저를 통해 표시될 내용을 담고 헤드 태그 사이에는 사용자 눈에는 보이지 않지만, 브라우저가 해당 문서를 해석하는데 필요한 여러 정보(metadata)를 표기합니다.
HTML 태그
HTML은 열린 태그 <>과 닫힌 태그 </> 사이에 콘텐츠를 위치하여 문서의 구조를 표현할 수 있습니다. 문법 자체는 비교적 학습하기 쉬운 편입니다. 각각의 태그들은 목적에 따른 여러가지 속성을 가지고 있으며 이에 대한 속성값을 지정할 수 있습니다. 위 이미지처럼 콘텐츠에 링크를 연결할 수 있는 <a> 태그의 경우 연결될 링크의 주소를 href
HTML의 대표적인 태그들과 그들이 가진 속성에 대해 좀 더 자세히 알아보겠습니다.
h1 태그
먼저 대표적으로 문서의 제목(Heading)을 표시하는 <h1><h1><h6>
p 태그
제목뿐만 아니라 단락을 지정할 수 있는 <p><p>
img 태그
이미지를 표시할 수 있는 <img>
이미지 태그의 srcwidthheight
또한 이미지에 마우스를 올렸을 때 표시할 텍스트를 titlealt
input, button 태그
웹사이트에서 로그인과 같이 사용자의 정보 입력이 필요할 경우, <input><input>typeplaceholder
사용자가 클릭할 수 있는 버튼이 필요할 경우에는 <input type="button" /><button><button>
ul, ol, li 태그
HTML로 리스트를 표현하고 싶다면 <ul><ol><ul><ol><ul><ol><li>
div, span 태그
이 외에도 앞에서 다룬 <button><div><span>
페이지의 영역을 분리(division)할 때는 <div><span>
시맨틱 태그 (Semantic Tags)
앞서 다룬 여러 가지 태그 외에도 웹 페이지의 각 영역을 보다 의미 있게 작성할 수 있는 시맨틱 태그가 있습니다. 시맨틱 태그는 태그 이름 자체만으로도 해당 태그가 페이지 내에서 어떤 역할을 하는지 알 수 있도록 의미가 담긴 것이 특징입니다.
시맨틱 태그 (Semantic Tags) 사용 이유
기존에는 태그의 역할 및 레이아웃과 관계없이 블록 요소라면 모두 <div><span><header><footer>
시맨틱 태그를 사용하면 브라우저 검색 시, 문서 구조를 보다 정확히 분석할 수 있기 때문에 알맞은 검색 결과를 찾도록 유도할 수 있습니다. 그리고 개발자 또한 코드를 더욱 직관적으로 이해할 수 있기 때문에 유지보수하기도 더욱 쉬워집니다.
시맨틱 태그 (Semantic Tags) 종류
<header><nav><main><aside><footer><section><div>를 대신하여 사용합니다.<article><section>
CSS란?
CSS는 Cascading Style Sheets의 약자로 기본적인 스타일이 이미 지정된 HTML 요소를 개발자가 직접 다양한 스타일로 디자인할 수 있는 언어입니다.
만약 <button>구매하기</button>
그뿐만 아니라 버튼에 마우스를 올리거나 버튼을 클릭했을 때와 색상이 변하는 등 특정 이벤트에 따른 스타일도 지정할 수 있어 다채로운 사용자 경험을 제공할 수 있습니다.
그래서 CSS를 활용하면 위처럼 내용과 형식이 혼재된 HTML 문서를 사용자가 보기에 심미성 있고 다루기도 편리한 웹사이트로 만들 수 있습니다.
CSS 기본 문법
CSS 문법은 크게 셀렉터와 선언 블록으로 나뉩니다. 먼저 셀렉터로 스타일을 지정할 HTML 요소나 idclass;
예시를 통해 알아보도록 하겠습니다. 위에서 다룬 버튼 요소에 지정된 CSS를 살펴보겠습니다. 주석에 적힌 내용을 CSS 문법으로 작성한다면 다음과 같습니다.
HTML 태그 이외에도 #id.class
idclass<h1>id"title"<div>class"article"idclass
해당 CSS를 적용한다면 다음과 같은 화면으로 바뀌게 됩니다. articleclassidclasstagclassid
HTML에 CSS 적용하기
CSS 문법에 대해 알아봤으니 이제 작성한 CSS를 HTML과 연결할 차례입니다. HTML과 CSS를 연결하는 방법은 크게 3가지로 나누어집니다.
다음과 같이 <h1>
인라인 스타일 (Inline Style)
HTML 태그 내에 style 속성을 이용하여 CSS를 지정할 수 있습니다. 이 방법의 경우 이미 스타일을 적용할 요소가 지정되어 있기 때문에 선택자 및 선언 블록없이 바로 스타일 속성값을 지정합니다.
내부 스타일 시트(Internal Stylesheet)
HTML 문서의 <head><style>
외부 스타일 시트(External Stylesheet)
HTML 문서 내부가 아닌 외부에서 CSS 파일을 작성했다면, HTML 문서의 <head><link><link>relstylesheetherf
HTML, CSS, JavaScript 까지
프론트엔드 개발 부트캠프에서
웹사이트를 만드는 데 있어 뼈대가 되는 HTML과 이를 꾸며주는 CSS, 그리고 HTML에 CSS를 적용하는 방법까지 알아보았습니다. 여기에 브라우저에서 유일하게 알아들을 수 있는 프로그래밍 언어인 JavaScript를 추가하면 단순히 예쁘게 보이는 페이지를 넘어 유튜브, 에어비앤비와 같이 사용자와 동적으로 소통하는 사이트로 만들 수 있습니다.
코드스테이츠 프론트엔드 개발 부트캠프는 사용자 친화적 웹 서비스 개발 능력을 갖춘 프론트엔드 개발자 양성 과정으로 HTML, CSS의 기초 문법을 이해하고 응용하여 다양한 디자인과 레이아웃을 구현할 수 있도록 커리큘럼이 짜여져 있으며 JavaScript, React 등의 웹 프론트엔드 개발 언어 기초와 심화 도 다루고 있습니다.
글 김은혜 Educational Software Engineer (Front-End)
편집 조주연 Content Manager
👩💻 개발자 커리어의 시작,
코드스테이츠 부트캠프가 더 궁금하다면?
목록 보기
추천글
