HTML&CSS 시작하기

HTML 시작하기

영상으로 학습하기




html

HyperText Markup Language의 약자인 HTML은 브라우저에서 보여지는 데이터들의 뼈대입니다.
웹 페이지는 HTML 문서라고도 불리우며, HTML 없이 웹은 존재하지 않습니다.

다양한 요소들을 사용하여 문서의 구조와 내용을 정의합니다.
HTML 문서는 일반적으로 부모-자식 관계를 가지는 요소들의 계층 구조로 이루어져 있습니다.
이것은 태그들이 서로 중첩되어 사용되고, 열림 태그와 닫힘 태그가 쌍을 이루며,
들여쓰기와 내어쓰기를 통해 가독성을 높일 수 있습니다.

개발자도구로 HTML 기본모습 보기

네이버 웹사이트에서 F12를 누르고 Element(요소) 탭을 봅니다.

  1. <head> 선택 후 Delete 키로 삭제
  2. html만 남은 모습 관찰하기
head 삭제 전후 - html만 남은 네이버 화면
head 삭제 전후 - html만 남은 네이버 화면

이 형태는 CSS 없이 HTML 문서만 남은 형태입니다.

HTML (document):
웹 페이지의 구조를 정의합니다. 웹 페이지에 어떤 내용이 들어가야 하는지,
그 내용은 어떤 형태로 배치되어야 하는지 등을 정하는 역할을 합니다.
HTML은 기본적인 "틀"을 제공하는데, 이를 통해 페이지의 뼈대가 형성됩니다.
텍스트, 이미지, 링크 등을 배치하고 각 요소를 어떤 의미로 사용할지 결정합니다.

CSS (style):
CSS는 HTML로 만든 구조에 스타일을 입히는 역할을 합니다.
웹 페이지를 보기 좋고 직관적이며, 사용자가 편리하게 이용할 수 있도록
시각적인 디자인을 추가하는 것이 CSS입니다.

HTML과 CSS는 상호보완적

HTML과 CSS는 상호보완적으로 웹 페이지의 기능과 미적 요소를 동시에 제공해야 합니다.

개발자도구 더 살펴보기

html을 본격적으로 알아보기 전에!
웹 개발을 하려면 개발자도구를 볼 줄 알아야 합니다.

개발자도구의 Elements 탭에서는 HTML의 구조를 볼 수 있어 가장 많이 사용됩니다. 개발자도구를 여는 방법은 네 가지입니다.

  1. 개발자도구 열기 — F12
  2. Element 탭 바로 열기 — Ctrl + Shift + I
  3. 요소 검사기 바로 열기 (Best!) — Ctrl + Shift + C
  4. 우클릭 - 검사
개발자도구의 요소 검사기와 요소 탭 위치
개발자도구의 요소 검사기와 요소 탭 위치

기본 코드 자세히 보기

! + Tab으로 자동작성된 기본 코드를 자세히 봅니다. 코드 좌측의 숫자는 줄번호(n번 라인)입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

1번 라인의 <!DOCTYPE html>은 독타입선언이라고 부릅니다. 자세히 보기

head

head 안에 작성되는 내용들은 유저에게 보여지지 않습니다.
실제 웹사이트에 보여지는 영역을 제외하고 정보(데이터)를 지정합니다.

<head>
    <meta charset="UTF-8"> <!-- HTML문서의 문자 인코딩을 지정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <!-- HTML문서의 제목 지정 - 탭에 표시됨 -->
</head>

body

body 안에 작성되는 내용들은 실제로 유저들에게 보여지는 영역으로,
웹 사이트에 나타나는 영역입니다. (화면에 출력되는 내용)

<body>
    <h1>헤드라인</h1>
    <p>본문 텍스트</p>
</body>

태그

HTML의 요소들은 태그(tag)로 이루어져 있습니다.
글씨를 쓰는 태그, 링크를 만드는 태그, 이미지를 띄우는 태그, 레이아웃을 만드는 태그 등
다양한 성격의 태그가 있고, 이를 적재적소에 활용하며 웹사이트를 만듭니다.

VSCODE에서는 사용할 태그명을 입력하고 Tab 키를 누르면 HTML 요소가 자동완성됩니다.

<body>
    h1 + Tab  →  <h1></h1>
    p + Tab   →  <p></p>
</body>

여는 태그, 닫는 태그

html은 <태그이름> 그리고 </태그이름> 사이에 콘텐츠를 입력합니다.
여는태그(tag) + 내용 + 닫는태그를 합쳐 **요소(element)**라고 부릅니다.

<p>꽁꽁 얼어붙은 한강 위로 고양이가 걸어다닙니다.</p>

제목 태그 h1~h5와 본문 태그 p는 기본 크기를 가집니다. 피그마의 Text styles처럼 미리 정의된 스타일이라고 생각하면 됩니다.

<h1>h1은 가장 큰 제목으로, 기본 32px입니다.</h1>
<h2>h2은 두번째로 큰 제목으로, 기본 24px입니다.</h2>
<h3>h3은 세번째로 큰 제목으로, 기본 19px입니다.</h3>
<h4>h4은 네번째로 큰 제목으로, 기본 16px입니다.</h4>
<h5>h5은 다섯번째로 큰 제목으로, 기본 12px입니다.</h5>
<p>p는 본문으로, 기본 16px입니다.</p>

HTML의 구성요소

태그에는 속성과 값이 더해질 수 있습니다.
여는태그(tag) + 속성 + 값 + 콘텐츠 + 닫는태그 전체를 **요소(element)**라고 부릅니다.

<a href="#" target="_blank" class="go-naver">네이버로 이동</a>
요소의 구성 - 여는태그, 속성, 값, 콘텐츠, 닫는태그
요소의 구성 - 여는태그, 속성, 값, 콘텐츠, 닫는태그

속성 (Attribute), 값 (Value)

html은 요소의 특성에 따라 속성/값을 지원합니다.

링크 태그인 a에 필요한 속성

  • href — 이동할 주소
  • target — 새 창/현재창 설정
  • class — 이름짓기

a 요소는 다른 페이지로 이동하는 링크 기능을 합니다.
따라서 a요소는 '이동할 주소'를 받는 href 속성을 지원합니다.
또한 링크가 열릴 때 새 창으로 열지, 현재 페이지에 열지 정하는 target 속성 등을 지원합니다.

이러한 속성들은 다른 태그에는 필요 없기 때문에 주로 a 태그의 속성으로만 쓰입니다.

결과: '네이버로 이동'(콘텐츠)을 클릭하면 새 탭으로 네이버 웹사이트가 열립니다.

이미지 태그인 img에 필요한 속성

  • src — 이미지 주소
  • alt — 대체 텍스트
<img src="images/mongja.jpg" alt="몽자 비쥬얼">

img 요소는 이미지를 나타내는 기능을 합니다.
이미지 경로를 src 속성의 "값"으로 입력합니다.
이미지가 제대로 나오지 않을 때 대체할 텍스트를 작성할 수 있습니다.
대체 텍스트를 alt 속성의 "값"으로 입력합니다.

실습용 이미지: 몽자 이미지 주소