-
[HTML] HTML의 모든 것 - (1)HTML, 기본 문법,Attribute, Heading, Style, Text, ColorsSTUDY/HTML.CSS.JS 2021. 3. 3. 14:36
빠른 검색
HTML
HTML은 HyperText Markup Language의 약자로, HyperText(웹 페이지에서 다른 페이지로 이동할 수 있게 하는 것)를 가장 중요한 특징으로 하고, Makrup이라는 형식을 가진 컴퓨터 프로그래밍 언어라는 뜻이다. 프로그래밍 언어는 컴퓨터와 사람 간의 약속이다. 그 중에서도 이 HTML은 웹 브라우저와 사람 간 서로가 이해할 수 있는 언어이다.
웹 페이지
웹 페이지는 World Wide Web(WWW, W3)에 있는 개개의 문서를 말한다. 웹 페이지는 .html 혹은 .htm 이라는 확장자 포맷을 가지고 있다. HTML 문서는 단순한 텍스트 파일이다.
예를 들어, 우리는 각자의 컴퓨터에서 메모장에 글을 입력한 후, 이 파일의 확장자를 .html로 저장한 후, 문서를 열어보면 일반 txt 파일과 전혀 다를 것이 없는 텍스트 파일이다. 하지만, HTML 파일이 웹 브라우저를 만나면 상황이 전혀 달라진다.
웹 브라우저가 HTML 파일을 해석하여 렌더링을 진행해주어, 우리가 HTML 파일의 데이터를 실제 우리가 보는 화면으로 보여지게 해줍니다.
HTML 기본 문법
HTML 문서인 웹 페이지는 HEAD 영역과 BODY 영역으로 나누어진다.
HEAD 영역 : 본문의 내용과는 관련이 없는 내용을 담는다. 문서의 제목(title)이나 문자 저장 방식 등을 포함한다.
BODY 영역 : 본문의 내용을 담는다. 즉 화면에 표시되는 내용들을 BODY에 포함한다.
Element : element는 시작 태그, 내용, 종료 태그로 정의된다. 그리고 이 element 안에는 다양한 속성(attribute)과 값(value)들이 포함될 수 있다.
Attribute : attribute(속성)는 element에 추가적인 정보를 제공하는 역할을 한다. attribute는 항상 시작태그에 위치해야 한다. (값도 마찬가지!) 일반적으로 attribute name = "value" 형식으로 사용한다.
주석 : HTML에서는 <!-- -->을 이용해 주석을 처리한다.
Note1: 어떠한 element는 내용과 종료 태그를 가지지 않고, 오직 시작 태그만을 가지기도 한다! (예를 들면, <br> 태그) 이러한 태그들을 empty tag라고 한다.
Note2: HTML 태그들은 대소문자를 구분하지 않는다. <P>나 <p> 모두 동일하게 동작한다.
출처 : http://langintro.com/cljsbook/appendix_a.html 기본적인 HTML 문서 구조
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html><!DOCTYPE html> 는 이 문서가 HTML5 유형으로 작성했다는 것을 정의한다. 문서형은 HTML5, HTML4, XHTML 세가지 유형이 존재하고, 이 유형에 따라 문서의 element와 attribute 등을 처리하는 방법이 달라지게 된다. 그렇기 때문에 이 문서 타입을 HTML 문서 최상위에 위치시켜야한다.
<html> 태그는 HTML 페이지의 Root 요소이다. <html> 태그 아래에 <head>와 <body> 태그가 온다.
<head> 태그는 HTML 페이지의 meta 정보를 포함한다. 화면에 보여지는 콘텐츠의 내용은 가지지 않고, 문서 자체의 정보를 포함하고 있다. 문서는 어떤 방식으로 저장되어 있는지, 누가 만들었는지 등의 정보를 포함한다.
내부에 <title> , <base />, <link />, <meta />, <style> 등의 태그를 주로 사용한다.
<title> 태그는 HTML 페이지의 제목을 나타내는 태그이다. 웹 브라우저의 탭에 보이는 페이지의 제목을 이 <title> 태그를 이용해 지정할 수 있다.
<body> 태그는 문서의 본문을 담당한다. 즉, 웹 브라우저 상에서 실제로 보여지는 내용들이 모두 여기에 작성한다.
<h1>과 <p> 태그는 각각 큰 제목과 단락을 정의하는 태그들이다.
Attribute
속성은 위에서 설명했듯, element 내의 추가적인 정보를 제공하는 것으로 시작태그내에 위치해야 하며,
일반적으로 name = "value"의 형식으로 사용된다.
Note : HTML은 그렇게 빡빡한(?) 언어가 아니기 때문에, 큰 따옴표를 사용하지 않거나, 큰 따옴표 대신 작은 따옴표를 사용하거나 해도 모두 동일하게 동작하고, 대소문자도 구분하지 않는다. 하지만, 속성의 값을 쓸 때는 큰 따옴표를 사용하기를 권장하고, 태그와 속성은 소문자로 작성할 것을 권장한다!
1. href 속성
<a> 태그는 하이퍼링크를 정의한다. href 속성에 특정 페이지의 URL 정보를 value로 적으면, 해당 페이지로 이동할 수 있다.
<a href="https://www.w3schools.com">Visit W3Schools</a>2. src 속성
<img> 태그는 HTML 페이지 내에 이미지를 포함할 때 사용한다. src 속성은 화면에 보여줄 이미지의 주소를 지정한다.
<img src="img_girl.jpg">▷ src에 특정한 주소를 지정하는 방법
1) 절대 URL : 다른 웹 사이트에 호스팅 되어있는 이미지의 링크를 사용한다. 예 : src="https://www.w3schools.com/images/img_girl.jpg"
2) 상대 URL : 웹 사이트 내에서 호스팅되는 이미지의 링크. 이런 경우에는 위에 절대 URL 처럼 도메인 이름을 포함할 필요가 없고, 현재 페이지를 기준으로해서 파일명만 적어주면 된다. 예 : src ="img_girl.jpg"
상대 URL을 이용하는 것이 더 좋다! 이유는. 절대 URL을 사용할 경우에 외부 웹 사이트에서 도메인을 변경하거나 이미지를 변경하면 사진이 깨질 수 있지만, 상대 URL은 도메인을 변경해도 사진에 전혀 영향이 없다.
3. width, height 속성
width와 height 속성을 이용하여 이미지의 크기를 조절할 수 있다.
<img src="img_girl.jpg" width="500" height="600">4. alt 속성
alt 속성은 이미지가 보여지지 않는 경우, 이미지에 대한 설명을 보여주는 태그이다. 시각장애가 있는 사용자들을 위한 스크린 리더기에 이러한 alt 속성을 통해 이 이미지가 어떤 이미지인지에 대해 정보를 제공할 수 있다.
<img src="img_girl.jpg" alt="Girl with a jacket">5. style 속성
style 속성은 element에 색깔, 폰트, 크기 등의 스타일을 더해준다.
<p style="color:red;">This is a red paragraph.</p>6. lang 속성
lang 속성은 <html> 태그와 함께 쓰이며, 이 페이지가 어떠한 언어로 정의되어있는지를 나타낸다.
<!DOCTYPE html> <html lang="en"> <body> ...7. title 속성
title 속성은 element에 대한 추가적인 설명을 제공한다. element에 마우스 커서를 올려놓으면 정보가 나타난다.
<p title="I'm a tooltip">This is a paragraph.</p>
Heading과 Paragraphs
Headings
HTML문서에서 제목은 <h1> ~ <h6> 태그로 나타낸다.
검색엔진은 heading을 통해 웹 페이지의 구조와 내용을 인덱싱한다.
<h1>은 제일 메인 제목으로 사용되고, <h2>는 제목, <h3>는 덜 중요한 제목 등으로 사용해야 한다.
절대 heading 태그를 글자를 강조하거나 크게 표시하는 데 사용하지 말아야한다. (스크린 리더기는 이러한 태그를 바탕으로 웹 브라우저를 읽기 때문에 이러한 규칙을 잘 지켜야 비장애인이던지 장애인이던지 모두 동일하게 웹을 이용할 수 있다!)
heading은 오직 제목으로만 사용!
heading heading 태그들은 기본적으로 정해진 글자 크기를 갖는다. 하지만 style의 font-size를 이용해 크기를 조절할 수 있다.
Note : HTML5에서는 더이상 heading tag에서 align 속성을 지원하지 않으니 css 사용!
<h1 style="font-size:60px;">Heading 1</h1>참고로, h1: 2em, h2 :1.5em, h3 :1.17em, h4 :1em, h5; 0.83em, h6 :0.67em 이다..
Paragraphs
<p>는 문단을 구분하는 태그이다. 문단은 항상 줄바꿈을 하고 시작하고, 웹 브라우저는 자동으로 문단 간 공백을 넣는다. HTML 문서에는 아래 사진 처럼 아무리 공백이나 줄바꿈을 하더라도, 웹브라우저에는 전혀 보여지지 않는다.
<p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p>위의 코드 실행 화면 위의 코드처럼 줄 바꿈을 유지하면서 출력하는 방법은
첫번째는, 문장 하나하나마다 줄바꿈 태그인 <br> 태그를 넣는 방법이다. 물론 이 방식으로 원하는 바를 얻을 수 있지만, 매번 문장을 바꿀때마다 <br> 태그를 넣는게 얼마나 귀찮은 일인가!!!! 문장이 30개만 되더라도 참 골치 아픈 일이 된다.
<p> <br> My Bonnie lies over the ocean.<br> My Bonnie lies over the sea.<br> My Bonnie lies over the ocean.<br> Oh, bring back my Bonnie to me.<br> <br> </p>그래서 두번째 방법이 있는 것이다. 바로 <pre> 태그! pre 태그를 사용하면 공백과 줄 바꿈을 모두 유지할 수 있다.
<pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre>
Styles
style은 element에 색깔, 글씨체, 크기 등을 추가하는 속성이다.
<tag style="property:value;"> 의 형식으로 사용한다. (여기서 property와 value는 CSS의 속성과 값이다!)
이제 style에서 사용할 수 있는 property에 대해 알아보자. 간단한 내용이라 설명없이 property의 종류만 소개한다.
1. background color
<body style="background-color:powderblue;"> <h1 style="background-color:powderblue;">This is a heading</h1>2. Text Color
<h1 style="color:blue;">This is a heading</h1>3. Fonts (font-family)
<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>4. Text Size
<h1 style="font-size:300%;">This is a heading</h1>5. Text Alignment
<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>
Text Formating
1. 굵은 글씨 (볼드체)
- <b> - 볼드체(굵은 글씨), 중요한 내용은 아님
- <strong> - 중요한 내용을 볼드체(굵은 글씨)로 표시, 스크린 리더기 등의 음성 읽기 도구에서 더 강조해서 읽어줌
2. 기울어진 글씨
- <i> - 다른 언어, 생각, 배의 이름 등을 표시할때 사용. 웹 브라우저 상에서만 기울어져서 표시.
- <em> - 스크린 리더기 등의 음성 읽기 도구에서 더 강조해서 읽어줌
3. 기타
- <mark> - 하이라이트로 강조된 글씨
- <small> - Smaller text
- <del> - 취소선
- <ins> - 밑줄, 추가된 텍스트를 표시
- <sub> - 약간 아래에 글자가 적힘 ex) H2O
- <sup> - 약간 위에 글자가 적힘
- <q> - 짧은 인용구 (" 인용구 " 형식으로 표현)
Color
HTML에서 기본적으로 정해져 있는 색깔의 이름은 아래의 사진과 같다. 사용은 아래의 코드처럼 사용하면 된다.
출처 : https://www.w3schools.com/html/html_colors.asp <h1 style="background-color:Tomato;">Tomato</h1>HTML에서는 색깔을 표시하는 방법으로는 RGB, HEX, HSL, RGBA, HSLA 방법이 있다.
아래는 각각 RGB, HEX, HSL 방법으로 색을 표시한 것이다.
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>1. Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>2. Text Color
<h1 style="color:Tomato;">Hello World</h1>3. Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>Note: RGB vs RGBA?
RGB : RED + GREEN + BLACK
RGBA : RED + GREEN + BLACK + ALPA(OPACITY, 불투명도)
RGBA
rgba(255, 99, 71, 0.4)
RGB
rgb(255, 99, 71)
이 글 생활코딩과 w3school을 참고하여 작성된 글입니다.
'STUDY > HTML.CSS.JS' 카테고리의 다른 글
