34일차 - [HTML] 기초(1, 태그와 요소, 속성)
안녕하세요. pitang입니다.
JAVA개념이 끝나고 HTML 시작하겠습니다.
HTML5
현대 웹 페이지에 사용되는 표준 기술은 세 가지로, HTML5 표준, CSS3 표준, ECMAScript 표준(자바스크립트 공식 명칭)이다.
HTML5는 큰 의미로 웹 표준 기술을 총칭하고, Hyper Text Markup Language의 약자이다.
작은 의미로 웹 페이지를 구성하는 HTML 마크업 언어, 그 자체를 뜻하기도 한다.
HTML 페이지를 구성하는 각 부품을 요소(element)라 하고, 요소는 컨텐트를 어떻게 표시해야 하는지 브라우저에게 알려준다.
예제를 실습하려면 HTML 페이지를 작성할 에디터와 작성한 페이지를 실행해 결과를 확인할 웹 브라우저가 필요하다.
에디터는 비주얼 스튜디오 코드를 이용하고 웹 브라우저는 구글 크롬을 사용해 진행한다.
실행을 할 때는 코드가 저장되어 있는 경로를 파일까지 복사해 웹 브라우저에 붙여 넣으면 결과가 보이게 된다.
비주얼 스튜디오 코드는 아래 사이트에서 다운로드할 수 있다.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
그리고 많은 내용을 여기서 보며 알아갈 것이다.
tag(태그)와 element(요소)
요소는 시작 태그, 컨탠트, 종료 태그로 이루어져 있고, 브라우저에게 컨텐트가 어떻게 출력되어야 하는지 알려준다.
태그는 이러한 요소를 만들 때 사용하는 작성 방법이다. 태그라는 말을 더 많이 사용할 것이다.
삼각 괄호 안에 태그명 작성한다. ex) <태그명>
삼각괄호 안에 태그명이 /로 시작하면 종료 태그, 그렇지 않다면 시작 태그이다.
태그는 항상 시작 태그와 종료 태그가 같은 이름으로 쌍이 맞아야 하고 둘 다 있다면 내용을 가질 수 있는 요소이다.
대문자, 소문자 구분이 없지만 대부분 소문자를 사용한다.
글자 태그
제목 글자 태그에서 h는 heading(제목)을 의미한다.
본문 글자를 입력할 때는 p, br, hr 태그를 사용한다.
p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미한다.
| h1 | 첫 번째로 큰 제목 글자 생성 |
| h2 | 두 번째로 큰 제목 글자 생성 |
| h3 | 세 번째로 큰 제목 글자 생성 |
| h4 | 네 번째로 큰 제목 글자 생성 |
| h5 | 다섯 번째로 큰 제목 글자 생성 |
| h6 | 여섯 번째로 큰 제목 글자 생성 |
| p | 본문 문단 생성 |
| br | 줄 바꿈 |
| hr | 수평 줄 삽입 |
ex1)
웹 브라우저에 따라 기본 글꼴이 달라서 출력되는 글꼴도 다르다.
ex2)
p 태그가 문단을 하나씩 만들고 있다.
lorem을 치면 의미 없는 문자가 출력됨.
lorem3, lorem5 이런 식으로 lorem 뒤에 숫자를 붙이게 되면 그 숫자만큼의 랜덤 단어가 생성된다.
ex3)
hr태그는 다른 글자 태그 내부에 삽입할 수 없다.
ex4)
br태그는 줄 바꿈이고, 다른 글자 태그 내부에 삽입할 수 있다.
html에서 스페이스는 하나의 스페이스로 만들기 때문에 여러 스페이스는 를 사용해야 한다. 엔터 또한, 무시된다.
이 부분은 뒤에서 더 알아볼 것이다.
ex5)
pre 태그는 작성한 문단 그대로 출력된다.
attribute(속성)
속성(attribute)은 태그에 추가 정보를 부여할 때 사용하는 것이다. 즉, 요소(element)의 부가정보이다.
시작 태그에 작성하고 하나의 요소에 여러 개가 작성될 수 있다.
이름/값을 쌍으로 작성한다. ex) name = "Value"
값은 따옴표로 표시하는데 생략도 가능하다.
따옴표로 표시할 때 만약 작은따옴표를 쓸 땐 큰 따옴표로 묶어야 하고, 큰 따옴표를 쓸 때는 작은따옴표로 묶어야 한다.
속성 또한 요소와 같이 대소문자 구분 없이 작성 가능하지만, 보통 소문자로 작성한다.
img 태그는 내용물을 가질 수 없는 태그이다. 아래는 img 태그의 속성과 설명이다.
| src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미지의 너비 지정 |
| height | 이미지의 높이 지정 |
표시하고 싶은 이미지 파일을 HTML 페이지와 같은 폴더에 넣고 그 이미지의 이름을 작성하면 된다.
ex)
title 속성은 마우스 포인터를 사진에 올렸을 때, 표시되는 말이다.
href 속성은 href="사이트 주소"사이트 주소의 이름(클릭하게 되면, 사이트로 이동) 하게 된다.
entity
entity는 코드를 코드로 읽지 않고 글자 그대로 읽을 수 있게 만들어 주는 코드이다.
entity는 아래의 사이트를 참고하면 된다.
https://dev.w3.org/html5/html-author/charref
ex)
감사합니다.
*m1 맥북을 사용 중입니다.*