Home HTML_basic grammar
Post
Cancel

HTML_basic grammar

HTML 파일 둘러보기

태그란

  • 태그 : 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게 분류한 규칙
    • <여는태그>와 </닫는태그>로 구성
1
<tag>내용</tag>

부모 태그와 자식 태그

  • 태그는 들여쓰기를 이용하여 중첩 관계로 만들 수 있음
  • 부모태그 안에 들여쓰기를 한 뒤 여러 개의 자식 태그를 묶어서 표현 : Tab을 사용하여 들여쓰기함
1
2
3
4
5
6
7
<html> <!--부모 태그-->
	<head> <!--자식 태그-->
	</head> <!--자식 태그-->

	<body> <!--자식 태그-->
	</body> <!--자식 태그-->
</html> <!--부모 태그-->

HTML의 기본 구조

  • HTML 파일
    • 문서 타입을 지정해 주는 <!DOCTYPE>
    • html 태그
      • <head> 태그 : <head>, </head> 태그 사이에는 웹 브라우저에 보이지 않는 문서 설정이나 CSS, 자바스크립트 같은 외부 파일 연결
      • <body> 태그 : <body>, </body> 태그 사이에는 다양한 HTML 태그를 이용하여 웹 브라우저에 출력할 콘텐츠 입력

2-html

  • <meta charset="UTF-8"> : 웹 문서의 인코딩 방식
    • UTF-8 : 세계 표준 인코딩 방식
  • <meata http-equiv="X-UA-Compatible" content="IE=edge" : 사용자가 익스플로러를 이용한다면 최신 버전인 엣지로 화면을 보여 주는 기능(이 코드를 <head>영역에 입력하면 항상 최신 버전의 브라우저 화면 출력 가능)
    • 구버전 브라우저가 실행될 경우 정상적이지 않은 화면이 표시될 수 있음
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 디바이스 종류별로 화면에 출력할 방식 지정
    • viewport가 있어야 반응형 웹 페이지 제작 시 모바일 화면에 결과물 출력 가능
  • <title>문서제목</title> :문서 제목 작성
    • 웹 브라우저의 상단 탭에 표시

시맨틱 태그 - 웹 페이지 구조 나누기

  • 시맨틱 태그 : 웹 페이지 제작 시 영역을 나눠 기본 구조 설정
    • 웹 문서의 머리말과 본문인 콘텐츠, 꼬리말의 영역이 구분되어 웹 브라우저가 웹 문서를 효율적으로 읽을 수 있음
종류 설명
header 웹 문서의 머리말 영역
nav 웹 문서에서 링크 등의 메뉴 영역
figure 웹 문서에서 동영상, 사진 등 다양한 멀티미디어를 담는 영역
main 웹 문서의 본문으로 콘텐츠를 담는 영역
aside 웹 문서의 본문과 연관성이 적은 외부 영역
section 웹 문서의 특정 영역을 그룹화
article 웹 문서에서 기사나 개별 콘텐츠를 담는 영역
footer 웹 문서의 꼬리말 영역

2

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
	<header>
		<nav></nav>
	</header>
	<figure></figure>
	<section>
		<article></article>
		<article></article>
		<article></article>
		<article></article>
	</section>
	<footer></footer>
</body>
  • <head> 태그 : 상단 콘텐츠를 나타냄
    • 웹 문서의 머리말
    • 웹 페이지 상단에 보여줄 로고, 메뉴 등 포함
  • <nav> 태그 : 메뉴를 그룹화
    • 링크를 포함한 메뉴를 그룹화할 때 사용
    • 모든 링크과 메뉴를 태그 지정해 줄 필요는 없음
  • <figure> 태그 : 멀티미디어 콘텐츠 그룹화
    • 동영상이나 음악 같은 멀티미디어 콘텐츠를 그룹화할 떄 사용
    • 주로 메인 페이지의 이미지 슬라이더나 인터랙티브한 콘텐츠 영역 지정
  • <main> 태그 : 중요한 영역 지정
    • 중요한 컨텐츠나 영역 지정 시 사용
  • <aside> 태그 : 부가 콘텐츠 영역 지정
    • <main> 태그와 반대
    • 웹 사이트와 연관성 적은 부가 콘텐츠를 그룹화할 때 사용
    • 광고의 팝업 창, 바로 가기 지정 등
  • <section> 태그 : 콘텐츠 여러 개 그룹화
    • 연관성 있는 콘텐츠 여러 개를 그룹화할 때 사용
  • <article> 태그 : 개별 콘텐츠 지정
    • 개별 기사 지정 시 사용
    • 특정 기사의 미리보기, 섬네일, 제목, 본문 지정 등
  • <footer> 태그 : 하단 콘텐츠
    • 웹 페이지의 하단 콘텐츠를 묶어 줄 때 사용

서식 태그 - 텍스트를 넣어 웹 페이지 채우기

종류 구분 설명
h1~h6 block 제목 태그 숫자가 커질수록 제목의 중요도가 떨어짐
p block 문단 태그 글을 묶어서 나타냄
div block 그룹 지정 태그 콘텐츠 그룹화
strong, em inline 강조 태그 특정 문장이나 단어 강조
a inline 링크 태그 페이지 이동 링크 설정
span inline 그룹화 태그 인라인 요소 그룹화
img inline 이미지 태그 이미지 삽입
br inline 줄 바꿈 태그 강제 줄 바꿈

block 요소와 inline 요소
block 요소 : 특정 영역을 구분 지을 때 사용, 주로 레이아웃 제작과 관련
inline 요소 : 특정 구문을 부분적으로 선택하여 링크 설정이나 글자 강조 같은 서식을 꾸미거나 기능을 부여하는 속성 태그

<h1>~<h6> - 문서의 제목 지정하기

  • 문서 제목을 중요도에 따라 분류
  • 숫자가 커질수록 중요도는 낮아짐
1
2
3
4
5
6
<body>
	<h1>제목</h1>
	<h2>제목</h2>
	<h3>제목</h3>
	<h4>제목</h4>
</body>

제목

제목

제목

제목

<p> - 문단 지정하기

1
2
3
4
5
6
7
<body>
	<p>관광객처럼 우리 주변에서 흔히 볼 수 있는 것을 대상으로 고르면 현실성이 높다고 하고, 그 대상을 시각적 재현에 기대어 실재와 똑같이 표현하면 사실성이 높다고 한다.</p>

	<p>자본주의 일상을 사실적으로 표현한 하이퍼리얼리즘의 대표적인 작가에는 핸슨이 있다. 그의 작품 '쇼핑 카트를 밀고 가는 여자'는 물질적 풍요한 속에 매몰되어 살아가는 당시 현대인을 비판적 시각에서 표현한 작품으로 해석할 수 있다.</p>

	<p>이 작품의 기법을 보면, 생활 공간에 전시해도 자연스럽도록 작품을 전시 받침대 없이 제작하였다. 사람을 보고 찰흙으로 형태를 만드는 방법 대신 사람에게 직접 석고를 덧발라 형태를 뜨는 실물 주형 기법을 사용하여 사람의 형태와 크기를 똑같이 재현하였다.</p>
</body>

관광객처럼 우리 주변에서 흔히 볼 수 있는 것을 대상으로 고르면 현실성이 높다고 하고, 그 대상을 시각적 재현에 기대어 실재와 똑같이 표현하면 사실성이 높다고 한다.

자본주의 일상을 사실적으로 표현한 하이퍼리얼리즘의 대표적인 작가에는 핸슨이 있다. 그의 작품 '쇼핑 카트를 밀고 가는 여자'는 물질적 풍요한 속에 매몰되어 살아가는 당시 현대인을 비판적 시각에서 표현한 작품으로 해석할 수 있다.

이 작품의 기법을 보면, 생활 공간에 전시해도 자연스럽도록 작품을 전시 받침대 없이 제작하였다. 사람을 보고 찰흙으로 형태를 만드는 방법 대신 사람에게 직접 석고를 덧발라 형태를 뜨는 실물 주형 기법을 사용하여 사람의 형태와 크기를 똑같이 재현하였다.

<div> - 콘텐츠 그룹화하기

  • 특정 주제의 제목과 문단 여러 개를 그룹으로 만들 때 사용
  • 시맨틱 태그인 <section>, <article> 태그와 기능 비슷
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
	<div>
		<h1>예시 문단1</h1>
		<p>관광객처럼 우리 주변에서 흔히 볼 수 있는 것을 대상으로 고르면 현실성이 높다고 하고, 그 대상을 시각적 재현에 기대어 실재와 똑같이 표현하면 사실성이 높다고 한다.</p>

		<p>자본주의 일상을 사실적으로 표현한 하이퍼리얼리즘의 대표적인 작가에는 핸슨이 있다. 그의 작품 '쇼핑 카트를 밀고 가는 여자'는 물질적 풍요한 속에 매몰되어 살아가는 당시 현대인을 비판적 시각에서 표현한 작품으로 해석할 수 있다.</p>

		<p>이 작품의 기법을 보면, 생활 공간에 전시해도 자연스럽도록 작품을 전시 받침대 없이 제작하였다. 사람을 보고 찰흙으로 형태를 만드는 방법 대신 사람에게 직접 석고를 덧발라 형태를 뜨는 실물 주형 기법을 사용하여 사람의 형태와 크기를 똑같이 재현하였다.</p>
	</div>
	<div>
		<p>쿠넬리스는 주변에서 흔히 볼 수 있는 살아 있는 말 12마리를 화랑 벽에 매어 놓고, 감상자가 화랑이라는 환경 안에 놓인 실제 말들의 존재와 말들의 온기와 냄새, 그리고 소리를 체험해서 다양하게 작품의 의미를 만들도록 하였다.</p>

		<p>코수스는 '의자의 사진', '실제 의자', '의자의 언어적인 개념' 세 가지 모두를 한 공간에 배치하여, 대상을 나타내는 여러가지 방식이 존재할 수 있음을 보여 주었다.</p>
	</div>
</body>

<strong>, <em> - 특정 단어 강조하기

  • <strong> : 굵게
  • <em> : 기울게
1
2
<strong>굵게</strong>
<em>기울게</em>

<a> - 웹 페이지에 링크 연결하기

  • 현재 열린 웹 브라우저 탭이 네이버 웹 페이지로 바뀌며 이동
1
2
3
<body>
	<a href="http://naver.com">네이버</a>
</body>
네이버
  • 새로운 탭을 열어 링크 이동 : target 속성 추가 입력
1
2
3
<body>
	<a href="http://naver.com" target="blank">네이버</a>
</body>
네이버

<span> - 인라인 요소 태그 그룹화하기

  • <div> 태그는 모든 요소를 그룹화
  • <span> 태그는 인라인 요소만 그룹화 가능
    • 인라인 요소 : <strong>, <em>, <a>, <span>, <img>, <br>

<img> - 문서에 이미지 삽입하기

  • <img src="이미지 경로" alt="이미지 설명"/>
  • 닫는 태그가 없는 빈요소 태그

<br> - 강제 줄 바꿈 구현하기

  • 빈 요소 태그
1
2
3
<body>
	가나다라<br>마바사아
</body>
가나다라
마바사아

목록 태그 - 메뉴를 깔끔하게 정리하기

<ul> - 순서가 없는 목록 만들기

  • 순서가 바뀌어도 상관없는 목록에 모두 적용 가능
1
2
3
4
5
<ul>
	<li>고구마</li>
	<li>감자</li>
	<li>옥수수</li>
</ul>
  • 고구마
  • 감자
  • 옥수수

<ol> - 순서가 있는 목록 만들기

  • 순서가 중요한 목록 생성
  • 태그 목록 앞에 숫자 표시
1
2
3
4
5
<ol>
	<li>1등</li>
	<li>2등</li>
	<li>3등</li>
</ol>
  1. 1등
  2. 2등
  3. 3등

<dl>, <dt>, <dd> - 정의형 목록 만들기

  • <dl> : 부모 태그
  • <dt> : 정의할 제목(자식태그)
  • <dd> : 정의할 내용(자식태그)
    • 정의한 내용은 자동으로 들여쓰기됨
1
2
3
4
5
6
7
<dl>
	<dt>고구마</dt>
	<dd>보라색의 구황작물</dd>

	<dt>옥수수</dt>
	<dd>노란색의 구황작물</dd>
</dl>
고구마
보라색의 구황작물
옥수수
노란색의 구황작물

중첩된 목록 작성하기

  • 상위 목록 작성 후 상위 목록에서 작성한 <li> 태그 안에 <ul>태그를 넣으면 중첩된 목록(하위목록) 작성 가능
1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<ul>
		<li>
		지역
		<ul>
			<li>서울</li>
			<li>대구</li>
			<li>대전</li>
		</ul>
		</li>
	</ul>
</body>
  • 지역
    • 서울
    • 대구
    • 대전

폼 태그 - 사용자 정보 입력받기

  • 폼 태그 : 웹 브라우저에서 데이터를 입력받아 서버로 전송
    • 폼에서 입력한 데이터는 서버 개발자가 웹 서버와 데이터베이스를 활용해 가공할 수 있음

<input> - 다양한 정보 입력받기

  • type 속성을 다르게 지정하여 다양한 입력 형태로 만들 수 있음
1
2
3
4
<strong>type="text" - 텍스트 입력받기</strong><br>

<label>이름</label>
<input type="text">

type=”text” - 텍스트 입력받기

1
2
3
4
5
6
<strong>type="password" - 비밀번호 입력받기</strong><br>

<!-- 비밀번호 입력시 보안을 위해 점 기호로 표시됨 -->

<label>비밀번호</label>
<input type="password">

type=”password” - 비밀번호 입력받기

1
2
3
4
5
6
7
8
9
10
<strong>type="checkbox" - 체크박스 선택하기</strong><br>

<!-- 사용자에게 데이터를 여러개 선택해서 입력받을 때 사용 -->
<!-- 태그에 value속성 추가 시 선택한 체크 박스의 value값을 서버로 전송할 수 있음 -->

<h4>취미</h4>
<label>게임</label>
<input type="checkbox" value="game">
<label>요리</label>
<input type="checkbox" value="cook">

type=”checkbox” - 체크박스 선택하기

취미

1
2
3
4
5
6
7
8
9
10
<strong>type="radio" - 라디오박스 선택하기</strong><br>

<!-- 여러 데이터 중 하나 선택 -->
<!-- 각 태그 속성에 name 값을 똑같이 입력하면 값을 하나만 선택할 수 있음 -->

<h4>성별</h4>
<label>여성</label>
<input type="radio" name="sex" value="female">
<label>남성</label>
<input type="radio" name="sex" value="male">

type=”radio” - 라디오박스 선택하기

성별

1
2
3
4
5
6
<strong>type="file" - 파일 선택하기</strong><br>

<!-- 사용자 컴퓨터에서 특정 파일을 첨부 할 수 있음 -->

<label>첨부파일</label>
<input type="file">

type=”file” - 파일 선택하기

1
2
3
4
<strong>type="color" - 색상값 선택하기</strong><br>

<label>색상 선택</label>
<input type="color">

type=”color” - 색상값 선택하기

1
2
3
4
<strong>type="date" - 날짜 선택하기</strong><br>

<label>날짜 선택</label>
<input type="date">

type=”date” - 날짜 선택하기

1
2
3
4
5
6
7
8
9
10
11
<strong>type="submit", type="reset" - 전송 버튼과 초기화 버튼</strong><br>

<!-- type="submit" 속성 : 사용자가 폼에 입력한 모든 데이터를 서버에 제출하는 전송 버튼 -->
<!-- type="reset" 속성 : 기존에 입력한 모든 값을 비우는 초기화 버튼 -->
<!-- 버튼 이름을 다르게 지정하고 싶다면 value="텍스트" 속성 추가 -->

<label>전송 취소</label>
<input type="reset" value="그만">

<label>전송</label>
<input type="submit" value="보내">

type=”submit”, type=”reset” - 전송 버튼과 초기화 버튼

<select> - 드롭다운 메뉴로 항목 선택하기

1
2
3
4
5
6
7
<body>
	<select>
		<option>출근하기</option>
		<option>퇴근하기</option>
		<option>퇴사하기</option>
	</select>
</body>

<textarea> - 텍스트를 여러 줄 입력받기

  • <input type="text"> 태그 : 간단한 텍스트 입력받기
  • <textarea> 태그 : 긴 문자의 텍스트 입력받기
    • 입력란 생성
1
2
3
<body>
	<textarea></textarea>
</body>

<form> - 여러 입력 양식을 그룹화하고 전송하기

  • 여러 가지 폼 요소를 그룹으로 만들어 백엔드 영역의 위치로 한번에 전송
    • 프런트엔드 영역 : <form>을 만들고 사용자 화면 구성
    • 백엔드 영역 : <form>을 통해 전달 받은 데이터를 가공하는 일

image

  • <form> 태그는 속성 2개를 반드시 지정해야 함
    • action 속성 : 특정 주솟값이나 파일 위치 지정
    • method 속성 : 입력값의 전송 방식 지정

      action속성, method 속성 : 속성값 2개는 백엔드 개발 영역

1
2
3
<form action="전송 위치" method="전송 방법">
<input> <!-- 사용자에게 입력받은 값 모아 action 속성 지정 위치로 전송 -->
</form>

form 태그에 있는 모든 데이터를 입력한 뒤 전송 버튼을 클릭 > 입력된 값은 action 속성에 지정한 위치로 전달 > method 속성에 지정한 전송 방식으로 전달

비디오, 오디오 태그 - 멀티미디어 콘텐츠 삽입하기

<audio> - 오디오 파일 재생하기

  • <audio src = "파일 위치" controls autoplay loop preload></audio>

  • <audio> 태그 속성

    종류 설명
    controls 오디오 파일을 재생하는 컨트롤 패널 생성
    autoplay 웹 페이지를 열면 오디오 파일을 자동으로 재생
    loop 오디오 파일을 무한 반복 재생
    preload 오디오 파일을 재생하기 전에 파일을 미리 불러옴
1
2
3
<body>
	<audio src="" controls></audio>
</body>

<video> - 동영상 파일 재생하기

  • <video src="파일위치" controls autoplay loop preload></video>
  • <video> 태그 속성

    종류 설명
    controls 동영상 파일을 재생하는 컨트롤 패널 생성
    autoplay 웹 페이지를 열면 동영상 파일을 자동으로 재생
    loop 동영상 파일을 무한 반복 재생
    muted 동영상 파일 소리 무음처리
    preload 동영상 파일을 재생하기 전에 파일을 미리 불러옴
    poster 동영상 플레이어 초기 화면에 보여 줄 이미지 지정(썸네일)
1
2
3
<body>
	<video src="" controls></video>
</body>
This post is licensed under CC BY 4.0 by the author.