HTML정리

백주현·2023년 4월 13일

html개요

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML Intro</title>
</head>

<body>

    <h1>여러분을 환영합니다!!</h1>

</body>
 
</html>

html의 기초

h1,h2, h3..., h6

p

html의 기본구조

이러한 메타데이터는 title, style, meta, link, script, base태그 등을 이용하여 표현할 수 있습니다.

html의 요소 구조

속성 이름은 언제나 소문자로 작성하자!

HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다.
하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다.
또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 합니다.

속성값은 언제나 따옴표로 감싸자!

HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습니다.

하지만 속성값을 따옴표로 감싸지 않으면, 다음과 같은 예상치 못한 오류가 발생할 수 있습니다.

예제

제목

h1~h6까지 다양한 크기로 사용가능

단락

p태그 , pre태그, br태그를 사용할수있다

p태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현됩니다
pre태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.
br태그 를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있습니다.

서식

HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공합니다.

강조효과

굵게 표현하고 싶을 때는 b태그,strong태그를 사용하면 된다.
이탤릭체를 표현하고 싶을 때에는 i태그, em태그 를 사용합니다.

하이라이팅효과
텍스트에 하이라이팅 효과를 적용시키는 mark태그를 사용한다.

삭제효과
del태그를 사용하면 가로줄로 지운것처럼 표현할 수 있다.

삽입효과
ins태그를 사용하면 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내줍니다

위첨자와 아래첨자 효과
위첨자는 sup태그를 사용하여, 아래첨자는 sub태그를 사용하여 각각 표현할 수 있습니다.

인용구

짧은 인용구

q태그를 이용하여 " 를 표현할수있다

블록 인용구

blockquote태그를 이용하여 이러한 인용 부분을 별도의 단락으로 구분하여 나타냅니다.

축약형 표현

abbr태그를 사용하면 축약하여 표현가능

주소표현

address태그를 사용하면 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입됩니다

엔티티

HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다.

html 스타일

HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있습니다.
하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다.

배경색 변경

다음 예제는 style 속성을 이용하여 배경색을 변경하는 예제입니다.

색 표현

html 색

색상 이름으로 표현
RGB 색상값으로 표현
16진수 색상값으로 표현

색상으로 이름 표현

RGB로 색상표현
16진수로 색상 표현

html 배경

HTML 문서의 기본 배경(background)은 흰색입니다.
또한, HTML 요소들도 각자 자신만의 배경을 가지고 있습니다.

배경을 다른 색으로 변경
배경을 다른 이미지로 변경

배경색을 다른색으로 변경

HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하도록 하고 있습니다

배경을 다른 이미지로 변경

background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있습니다.

html 링크

하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 a태그로 표현합니다.

target 속성

a태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다.

html 이미지

이미지의 삽입

HTML 문서에 이미지를 삽입할 때는 img태그를 사용합니다

이미지의 크기

width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있습니다.

이미지의 테두리 설정

border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있습니다.

이미지의 링크 설정

이미지에 a태그를 이용하여 링크를 설정할 수 있습니다.

이미지맵 만들기

map태그를 이용하여 이미지 맵(image map)을 제작할 수 있습니다.
img태그의 usemap 속성을 map태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정됩니다
map태그는 하나 이상의 area태그를 가지며, 이 area태그가 바로 버튼과 같은 역할을 합니다.

html 리스트

순서가 없는 리스트(unordered list)
순서가 있는 리스트(ordered list)
정의 리스트(definition list)

순서가 없는 리스트

순서가 없는 리스트는 ul태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 li태그로 시작합니다.
각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다.

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.

disc : 검정색 작은 원 모양 (기본설정)
circle : 흰색 작은 원 모양
square : 사각형 모양

순서가 있는 리스트

순서가 있는 리스트는 ol태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 li태그로 시작합니다.
각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.
decimal : 숫자 (기본설정)
upper-alpha : 영문 대문자
lower-alpha : 영문 소문자
upper-roman : 로마 숫자 대문자
lower-roman : 로마 숫자 소문자

html 테이블

HTML에서는 table태그를 사용하여 이러한 테이블을 작성할 수 있습니다.

tr태그는 테이블에서 열을 구분해 줍니다.
th태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.
td태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.
border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다

테이블 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있습니다.

테이블 행 합치기

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있습니다.

테이블 열과행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있습니다

테이블 캡션설정

caption태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

블록과 인라인

html 요소의타입

블록(block)
인라인(inline)

블록 타입의 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.

div 요소

div요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.
div요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.

인라인의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
-또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

span요소

span요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.
span요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.

레이아웃

div 요소를 이용한 레이아웃
HTML5 레이아웃
table 요소를 이용한 레이아웃

div 요소를 이용한 레이아웃

div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용됩니다

HTML5 레이아웃

HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공합니다.
이러한 요소들을 의미(semantic) 요소라고 합니다.

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다.

table 요소를 이용한 레이아웃

table 요소를 이용하여 레이아웃을 작성하는 방법은 오래전에 사용하던 방식이며, 현재는 거의 사용하지 않습니다.
-table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니므로, 테이블로 작성된 레이아웃은 수정이 매우 힘듭니다.

input의 요소 속성

input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있습니다.

value속성

value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다.

readonly 속성

eadonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다.
-disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다.

disabled 속성

disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다.
-disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없습니다.
또한, readonly 속성과는 달리 전송 버튼(submit)을 눌러도 초깃값이 서버로 전송되지 않습니다.