[Web] html 기초정리

2021. 6. 16. 14:18

HTML은 Hyper Text Markup Language의 약자이자 the standard markup language로서 웹페이지를 제작하기 위해 사용되는 언어이다. 웹의 전체적인 구조를 구현하는데 사용된다.

하나의 HTML은 아래와 같이 태그들의 조합으로 이루어진다.

HTML에 대해 공부하기 위해 사용되는 태그의 종류와 각 태그의 역할에 대해서 알아보자.

HTML 문서의 구조

1. HTML문서는 <!DOCTYPE html>로 시작한다.

2. 문서 내용 자체는 <html> </html>태그 사이에 해당되어야 한다.

3. 작성한 문서가 '보이는'부분은 <body></body>태그 안에 들어간다.

대부분의 태그는 <h1>안녕하세요</h1>과 같이 시작태그, 끝태그의 조합으로서 사용된다.(즉 일부태그는 단독으로 사용이 가능하다)

간단한 태그들

<!DOCTYPE>은 문서의 유형을 나타낸다.

<!DOCTYPE htm> - 해당문서가 HTML5를 정의한다는 것을 명시한다.

<html> - HTML 페이지의 root element이다.

<head> - HTML page의 meta information을 포함하는 태그이다.

<title> - HTML page의 제목을 설정하는 태그이다.

<body> - 문서의 본문을 정의한다. 제목, 단락, 이미지, 하이퍼 링크, 표, 목록 등의 내용을 body태그에서 담당한다.

<h1> - large heading(큰 제목)을 정의한다.

제목의 정의는 <h1>~<h6>까지로, 제목의 크기에 따라 달라진다.

<p> - paragrahp(문단, 단락)을 정의한다.

<br> - 엔터를 친 효과를 낸다. 아래 빈 한줄 생성. 끝 태크없이 단독으로 사용가능하다.

<a> - html의 링크를 정의한다. href속성에 링크가될 대상을 지정해준다. ex) <a href = "https://~~~">This is a link</a>

<img> - html의 이미지를 정의한다. 소스 파일 - src, 대체 텍스트 - alt, width 및 height 속성을 지정하여 이미지를 생성한다.

HTML의 대표적인 attributes(속성)

html의 모든 요소들은 attributes(속성)값을 가질 수 있으며, 속성을 통해 추가적인 정보를 명시할 수 있다.

href - <a>태그에서, link가 연결되는 페이지의 URL

src - <img>태그에서, 삽입할 이미지의 경로

width, height - <img>태그에서, 이미지의 가로 및 세로 길이

alt - <img>태그에서, 이미지가 정상적으로 로드되지 않을 경우 대체될 택스트를 설정하는 속성이다.

style - 태그의 스타일을 지정할 수 있다. color, font, size등의 다양한 속성을 설정할 수 있다.

스타일 속성은 css의 속성이다.대표적인 style 속성은 다음과 같다.

background-color - 배경 색상

color - 텍스트 색상

font-family - 텍스트 글꼴

font-size - 텍스트 크기

text-align - 텍스트 정렬

lang - 웹 페이지의 언어를 선언하기 위한 속성이다. lang는 <html>태그 안의 속성값으로 지정된다. lang는 검색 엔진 및 브라우저를 지원하기위해 사용된다.

title - 태그에 대한 추가 정보를 정의할 수 있다. 웹페이지에서 해당 내용에 마우스를 올리면 title 속성의 값이 툴팁으로 표시된다.

HTML 단락에 관한 태그

<p> - 일반적인 단락을 생성한다. <p>태그는 공백이나 줄바꿈을 모두 생략하여 표시된다.

<pre> - <p>태그와 달리 html파일 상에서 적용한 띄어쓰기나 줄바꿈 등의 형식이 웹 페이지상에 적용된다.

<hr> - 수평선을 통해 내용를 나눌 수 있음.

HTML 서식 요소

html의 서식 요소들은 다음과 같다.

<b> - 굵은 텍스트

<strong> -중요한 텍스트

<i> -이탤릭체

<em> -강조된 텍스트

<mark> -표시된 텍스트

<small> -더 작은 텍스트

<del> -삭제 된 텍스트

<ins> -삽입 된 텍스트

<sub> -첨자 텍스트

<sup> -위첨자 텍스트

다음과 같이 태그 안에서 활용될 수 있다.

인용문과 관련된 태그

<blockquote> - 인용문(인용문 단락이 들여쓰기 된다)

<q> - 짧은 인용문(보통 ""를 통해 나타난다)

<address> - 태그는 문서 또는 기사 작성자 / 소유자의 연락처 정보를 정의한다. 해당 텍스트는 일반적으로 이탤릭체로 렌더링되며, <address>요소 앞뒤에 줄 바꿈이 추가된다.

주석

다음과 같이 주석을 사용할 수 있다.

HTML color

html에서 색상은 RGB, HEX, HSL, RGBA, or HSLA 등 여러 형태로 나타낼 수 있다.

standard color name

또한 html은 140여개의 standard color name을 제공하여 color name만으로 색상을 삽입할 수 있다.

대표이미지 삭제

배경색 지정

baakground-color:colorname을 통해 배경색을 지정할 수 있다.

테두리 지정

border:2px solid 색상명 을 통해 테루리를 지정할 수 있다. 2px에서 숫자 조정을 통해 테두리 너비를 조정할 수 있다.

HTML CSS

CSS는 Cascading Style Sheet의 약자이며, 여러 웹 페이지의 레이아웃(색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소 배치 및 배치 방법 등)을 한 번에 제어 할 수 있기에 편리하다.

css의 사용방법은 크게 3가지로 나뉜다.

1. Inline -HTML 요소 내부의 style속성을 통한 사용

2. Internal - head에서 <style> element를 통한 사용

3. External - <link> element를 사용하여 외부 CSS 파일에 연결하는 방식

가장 일반적인 방법은 링크를 통해 외부 CSS 파일에 스타일을 가져오는 방식이다.

대표적인 CSS의 property(속성)

color - 사용할 텍스트 색상을 정의한다.

font-family - 사용할 글꼴을 정의한다.

font-size - 사용할 텍스트 크기를 정의한다.

border - HTML 요소 주위의 테두리를 정의한다.

margin - 테두리 외부의 여백 (공백)을 정의합니다.

padding - 텍스트와 테두리 사이의 패딩 (공백)을 정의한다.

margin은 테두리 외부의 여백, padding은 텍스트와 테두리 사이의 내부여백을 결정한다.

HTML LINK

다음과 같이 <a>태그를 통해 하이터링크를 생성할 수 있다.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

target속성 :

_self- 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 연다.

_blank -새 창 또는 탭에서 문서를 연다

_parent -parent 프레임에서 문서를 연다

_top -창 전체에서 문서를 연다

또한 이런식으로 <a>태그 안에 <img>태그를 넣게 되면 해당이미지에 링크가 걸리게 된다.

</a>

또한 link를 통해 스타일을 지정할 수 있다.

HTML배경이미지

background-Image: url ('URL'); 를 통해 html문서전체, 해당 paragraph 등의 배경이미지 설정이 가능하다.

만약 background로 설정한 이미지의 크기가 설정하고자 하는 영역보다 작으면 이미지가 반복되어 입혀지게 된다.

배경 이미지가 자체가 반복되지 않도록하려면 background-repeat속성을 no-repeat으로 설정한다.

HTML Tables

<tr>, <th> <table> 태그를 통해 기본적인 table구조를 잡게 된다.

id를 통해 하나의 table을 자신이 고유하게 스타일 지정하여 적용할 수 있다.

border: 1px solid black;로 일반적인 테두리 설정을 할 경우

테두리를 하나의 테두리로 축소하려면 border-collapse: collapse;로 설정해주면 된다.

<table> - 테이블 정의

<tr> - 테이블 행 정의

<th> - 테이블 제목을 정의(보통 맨 윗줄을 의미한다.)

<td> - 테이블 데이터 정의(나머지 각각의 셀)

<caption> - 테이블 캡션 정의

border - 테두리 정의

border-collapse - 셀 테두리 축소

padding - 셀에 패딩 추가

text-align - 셀 텍스트 정렬

border-spacing - 셀 사이의 간격을 설정

colspan - 셀을 여러 열로 확장

rowspan - 셀을 여러 행으로 확장

id - 하나의 테이블을 고유하게 정의

HTML list

다음과 같은 형식(순서가 없는?)의 list는 <ul> - list정의, <li> - 목록내용 정의 를 통해 나타낸다.

다음과 같은이 순서가 있는 list는 <ol> - list정의, <li> - 목록내용 정의 를 통해 나타낸다.

다음과 같은 형식(순서가 없는?)의 list는 <dl> - list정의, <dt> - 목록내용 정의 <dd> - 설명하는 부분?을 통해 나타낸다.

HTML div

div는 말그래도 웹문서 전체중에 일부분의 영역을 나누는 것이다. <div></div>를 통해 한 영역을 설정할 수 있다.

'개발 > Web' 카테고리의 다른 글

[web] css 중앙정렬 방법 (0)	2021.06.17
[web] css 기초정리 (0)	2021.06.17
[Web] html form (0)	2021.06.16
[Web] html 기초정리2 (0)	2021.06.16
[Web] dothome hosting (0)	2021.06.16

Grace