HTML

안재영·2024년 4월 1일

HTML(Hypertext Markup Language)

웹 브라우저가 이해 할 수 있는 언어

html의 기본문법

태그를 생성하기위해서는 기본적으로
<태그>콘텐츠</태그> 또는 <태그 /> 형태를 가지고있다
태그의 종류 에 따라서 속성과 값을 받아 태그의 효과를 줄수있다

<태그 속성=값>

  <a href=”https://naver.com”>네이버</a>

해당 예시는 웹 페이지에 생성되는 네이버 라는 텍스트를 누를시 네이버로 이동하게된다

<!DOCTYPE html>
<html lang="ko">
    <head>
	    <title>예시</title>
    </head>
    <body>
        
    </body>
</html>

위 코드는 기본적인 html의 구조입니다

html의 속성 lang에 ko이용하여를 전달하여 해당 문서가 한국어라는걸 알리고

title태그 내부에 예시를 넣어 해당 문서의 title로 예시가 나타나게 됩니다

body에는 해당 문서의 컨텐츠가 들어가게됩니다

부모요소와 자식요소

위 코드의 태그들의 부모 자식 요소를 구분한다면

html

head
- title
body

로 구성됩니다

html의 주석

<!-- 내용 -->

해당 방식으로 주석을 생성 할 수 있습니다.

html의 주석은 해당 문서에서 개발자 도구 창을 열면 누구에게나 보이기 때문에 중요 정보 또는 비밀 유지가 필요한 정보를 주석에 적어두면 안됩니다

head 태그

사람의 눈에는 보이지 않는 문서의 정보를 입력하는 구문입니다

head 태그가 가질수있는 정보의 종류

타이틀

메타 데이터

인코딩 정보

문서 설명

문서 작성자

css,Script

style

해당 문서의 css문법을 바로 적용 할 수 있는 방법

link

문서에 파일을 연결하여 적용 할 수 있는 방법

script

문법을 사용하거나 파일의 경로를 지정하여 해당파일 또는 태그내의 JS를 적용시킬수 있는 방법

head의 사용 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
	    <title>문서 제목</title>
	    
	    <meta charset="utf-8">
	    <meta name="description" content="이 문서는 실습 문서입니다.">
	    <meta name="author" content="작성자">
	    <link rel="stylesheet" href="style.css">
	    <style>
				 body{color: blue}
	    </style>
	    <script src="script.js"></script>
	    <script>
		    const hi ="hello"
		    console.log(hello)
	    </script>
	    
	    
    </head>
    <body>
        문서 내용
    </body>
</html>

body태그

block

레고 블록처럼 차곡차곡 쌓이고 화면 너비에 꽉 차는 요소
- 블록의 크기와 내/외부에 여백을 지정할수 있고 일반적으로 페이지의 구조적 요소를 나타낸다
- 인라인 요소를 포함할수 있으나 인라인 요소에 포함 될 수 없다
inline

블록처럼 쌓이지않고 옆으로 계속 나열이 되는 요소
- 주로 문장, 단어 같은 작은부분에 사용되며 한줄에 나열된다
- 좌우에 여백을 넣는것만 허용된다
inline-block

글자처럼 취급되나, block태그의 성질을 가지는 요소

block과 마찬가지로 크기와 내/외부 여백을 지정할수 있다
css로 성질을 바꾼 것 이기 때문에 의미상 인라인 레벨의 요소이다

레이아웃 태그

div

가장 흔히 사용되는 레이아웃 태그, 단순히 구역을 나누기 위해 사용함

header

글 제목, 작성일 등의 주요 정보를 담는 태그

main

페이지의 가장 큰 부분으로 사이트의 내용 즉 주요 컨텐츠를 담는 태그

section

콘텐츠의 구역을 나누는 태그

article

구역 안에서 포스트, 뉴스 기사와 같은 독립전인 문서를 전달하는 태그

aside

문서의 주요내용에 간접적인 정보를 전달하는 태그
쇼핑몰의 오른쪽에 따라다니는 “오늘 본 상품” 같은 것으로도 사용함

레이아웃 태그를 사용하는 이유

html5 부터 태그를 의미있게 사용하기 위해 “Semantic(시멘틱)”태그를 사용하여 문서 구조를 작성

단순히 의미 구분자인 <div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미있게 전달

시멘틱 하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임

h1 ~ h6

문서 구획 제목을 나타내는 태그로 heading 태그라고 부른다
- h1부터 h6까지 사용가능
- h1태그는 페이지내 한번만 사용하며 구획의 순서는 지켜져야 한다

p

문서에서 하나의 문단(Paragraph)를 나타내는 태그이다
- 제목태그와 함께 쓰기도하고 단독으로 사용되기도 한다

b, strong

글씨의 두께를 조절할수있다
- b태그는 단순히 굵은 글씨로 변경만 해준다
- strong 태그는 굵은 글씨로 변경후 강조의 의미를 부여한다

i, em

글씨의 기울기를 조절할수 있다
- i 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분될경우 사용
- em태그는 기울임과 내용의 강조를 나타낸다

u

글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다.

s, del

글씨에 취소선을 추가할수 있다
- s태그는 시각적인 취소선만 추가된다
- del 태그는 문서에서 제거된 텍스트를 뜻한다 ins태그와 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할수 있다

멀티미디어

img

문서 애에 이미지를 넣을수 있는 태그
- src속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
- alt속성을 사용해 이미지 로딩에 문제가 발생했을때 대체 텍스트를 띄울 수 있음

figure, figcaption

하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을수 있는 태그
- figcaption태그를 사용해 콘텐츼의 설명 혹은 범례를 추가할수 있고 제일 처음이나 제일아래 추가해서 사용할수 있다
- 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을수 있다.

video

문서 내에 영상을 첨부할수 있는 태그
- src 송성을 사용하여 비디오를 문서 내에 첨부할수 있다
- poster 속성을 사용하면 비디오가 로드되기전에 포스터를 보여줄 수 있다
- source 태그를 사용하면 여러타입의 비디오를 제공할수 있다

audio

문서 내에 소리를 첨부할수 있는 태그
- 비디오 태그와 속성이 대부분 곂친다

svg

그래픽으로 만들어진 이미지
- 일반 이미지랑 다르게 수학공식을 사용하여 그려지기때문에 확대 축소가 자유롭다

리스트

ul, li

정렬되지 않은 목록 태그
- 기본 불릿(bullet)형식으로 목록을 그린다
- li태그를 사용하여 목록을 구성할수 있고 다양한 태그를 포함할수 있다
- ul 태그의 자식요소로는 li태그만 들어와야 된다 하위 리스트를 만들려면 li태그 안에 ul,ol 태그를 사용하여 만든다

ol, li

정렬된 목록 태그
- 기본 숫자 형식으로 목록을 그린다
- li태그를 사용하여 목록을 구성할수 있고 다양한 태그를 포함할수 있다
- ul 태그의 자식요소로는 li태그만 들어와야 된다 하위 리스트를 만들려면 li태그 안에 ul,ol 태그를 사용하여 만든다

dl,dt,dd

설명 목록 태그

dt태그에 사용된 단어 혹은 내용의 설명을 dd태그에 작성할 수 있다
주로 용어 사전이나 키-값이 있는 쌍을 목록으로 나타낼 때 사용한다
dt태그를 여러개 작성하고 하나의 dd태그를 작성하는 것으로 여러개의 용어를 설명할수 있다
위와 반대로 dt태그 하나에 여러개의 dd태그를 가질수 있다

표

table

표를 만드는 테그

th
- 태그로 셀의 제목을 만들수 있다
tr
- 태그로 행을 구분할수있다(row 라고 부른다)
td
- 태그로 열을 생성할수 있다(cell이라고 부른다)
thaed
- 태그 안에 열의 제목(th)를 넣음으로서 그룹을 지을 수 있다
tbody
- 태그 안에 열의 행(tr)을 넣음으로서 그룹을 지을 수 있다
tfoot 태그
- 표 바닥글 요소 태그
  - 태그안에 열의 행(tr)을 넣음으로서 표의 바닥글 요소를 넣을수있다
  - 문서 버전이 html4라면 tbody 보다 먼저작성되어야하지만
  - html5버전이라면 tbody 뒤에 배치되어도 괜찮다
caption
- 표의 설명 태그 표가 가진 데이터에 대한 설명을 넣는다

외부 컨텐츠

iframe

현재 문서 안에 다른 HTML 페이지를 삽입할수 있는 태그

src 속성에 원하는 HTML 문서 또는 URL을 넣을수 있다
외부 페이지를 불러오기 때문에 해당 페이지에 보안이슈가 존재하다면 같이 보안이슈를 공유할수 있다

양식 태그

form

정보를 제출하기 위한 태그
정보를 입력할수있는 input, selectbox 등을 가질수있다
정보를 제출하기위한 button을 가질수있다
정보를 어떤타입으로 보낼지 속성을 통해 지정할수있다
- get 데이터를 url링크에 적어서 보내는방식 url에 데이터가 전부 보이기 때문에 보안이 필요한 데이터의 경우 post로 보내야된다
- post 데이터를 body에 넣어서 보내는 방식

input

checkbox : input을 체크박스로 만든다
radio : 라디오 버튼으로 만든다
file : 파일을 첨부할수 있게 만든다
button : value 속성에 입력된 값을 이름으로 갖는 버튼으로 만든다
hidden : input을 시각적으론 숨기지만 정보 제출시 value에 입력된 값이 전송된다

select

option 메뉴를 제공하는 태그
option 는 속성으로 value를 가질수 있으며 정보가 전달될때 선택된 option의 value의 값이 전달된다
option태그의 value 가 존재하지않는다면 본문에 적힌내용이 전달된다

textarea

여러줄을 입력할수있는 태그

#알아두면 좋은 속성

readonly : 수정 할 수 없는 읽기 전용으로 만든다

required : 필수 입력으로 만든다

placeholder : 값이 존재 하지 않을 경우 표시해줄 설명을 적을 수 있다

disabled : 해당 태그를 비활성화 시킨다

HTML 작성시 주의사항

대소문자 구분

태그는 대문자로 작성해도 동작은 되지만 가능하면 소문자로 작성해주기

닫는 태그 생략 되지 않게 주의

코드가 복잡해질 경우 오류가 발생 할 수 있습니다

id의 중복

사용은 가능하지만 웹 표준에서 어긋나게됩니다

계층 유지

같은 의미의 코드가 중첩되지 않게

a태그 안에 button을 넣을경우

b, strong같이 사용하는경우

안재영

이전 포스트

알고리즘과 문제 해결

다음 포스트