반응형

1 HTML이란?

  • Hyper Text Markup Language
  • 웹 페이지를 생성하기 위한 표준 마크업 언어
  • 웹 페이지의 구조 표현
  • element로 구성
  • element는 브라우저가 내용을 표현하는 방법에 대해 설명
  • 대소문자 구분 X (소문자 사용 권장 - XHTML)

2 기본 형태

<!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 문서임을 정의
  • <html>: HTML 페이지의 root element
  • <head>: HTML 페이지의 메타 정보
  • <title>: HTML 페이지의 제목 - 브라우저의 타이틀바 / 페이지탭에 표시
  • <body>: 보이는 모든 내용 포함
  • <h1>: 큰 제목
  • <p>: 단락

3 웹 브라우저 목적

HTML 문서를 읽고 표시

HTML 태그를 사용하여 표시하는 방법을 결정

4 HTML 페이지 구조

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

<body>에 있는 그림에서의 흰 부분만 브라우저에 표시

5 HTML element

시작 태그, 내용, 끝 태그로 정의

<tagname>내용</tagname>

중첩 가능

* empty element: 내용이 없는 태그 ex ) <br>

<!DOCTYPE>

문서 종류, 모든 HTML 문서의 시작, 반드시 한 번

<head>

메타데이터, 표시 X

문서 제목, 문자 집합, 스타일, 스크립트, 다른 메타 정보 정의

<title>

텍스트만 사용 가능

브라우저 툴바에 표시되는 제목 정의

즐겨찾기 추가 시 제목

* 검색엔진최적화(SEO)에 중요 - 검색 엔진 알고리즘에 사용

<style>

HTML 페이지의 스타일 정보 정의

<link>

현재 문서와 외부 자원 간 관계 정의

외부 스타일 시트 연결 시 자주 사용

<meta>

문자 집합, 페이지 설명, 키워드, 저자, 뷰포트 지정하는데 사용

페이지에 표시되지는 않지만 브라우저, 검색 엔진, 다른 웹 서비스에 사용

<meta charset="UTF-8">
<meta name="keyword" content="HTML, web">
<meta name="description" content="HTML">
<meta name="author" content="orubt">
<meta http-dquiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>

JavaScript를 정의할 때 사용

<base>

상대 URL의 타겟

반드시 href 속성 또는 target 속성

하나만 사용 가능( 2개 이상 사용 불가 )

<h1>-<h6>

제목

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

h1

h2

h3

h4

h5
h6

검색 엔진이 제목을 통해서 웹 페이지의 구조와 내용을 색인화

style 속성을 통해 크기 등 변경 가능하지만 권장 X

<p>

단락

<p>단락 내용</p>

단락 내용

항상 새로운 줄부터 시작

브라우저가 자동적으로 단락의 앞 뒤에 여백 추가

공백이나 줄바꿈 적용 X, 창 크기로 줄 수 결정

<hr>

구분선

<hr>

<br>

줄바꿈

<br>

<pre>

서식 지정 텍스트

단락 안에서의 줄바꿈, 공백 반영

<pre>
    1
  2
      3
        4
</pre>
    1
  2
      3
        4

<a>

링크

href 속성 사용

마우스를 링크 위로 옮기면 화살표가 손모양으로 바뀐다.

절대URL, 상대URL 모두 사용 가능

이미지 링크를 사용하는 경우 <a> element 내부에 <img> element 사용

<a href="https://orubt.tistory.com/">링크</a>

링크

색상

  • 방문 X: 파란색
  • 방문 O: 보라색
  • 활성화: 빨간색

target 속성

링크된 문서를 여는 곳 명시

  • _self: default, 같은 창 또는 탭에 문서 열기
  • _blank: 새 창 또는 탭에 문서 열기
  • _parent
  • _top

* self, parent, top를 구별하기 위해서는 frame 이라는 개념에 대한 이해가 필요해 보인다.

difference between _self, _top, and _parent in the anchor tag target attribute

종류

  • mailto: 메일 전송
    • cc: 참조 이메일 주소
    • bcc: 숨은 참조 이메일 주소
    • subject: 제목
    • body: 내용
<a href="mailto:someone1@example.com, someone2@example.com, someone3@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=subject&body=body" target="_top">내용</a>
  • button: JS 코드를 추가하여 구현
<button onclick="document.location='https://orubt.tistory.com/'" title="Home">버튼</button>

꾸미기

  • link: 방문하지 않은 링크
  • visited: 방문한 링크
  • hover: 마우스가 링크 위에 있을 때
  • active: 활성화
  • color: 색상
  • background-color: 배경색
  • text-decoration: 효과 ( 밑줄)

북마크

id 속성과 #을 이용하여 구현

<a href="#p_tmp" title="Home">북마크</a>

<p id="p_tmp">북마크 이동</p>

북마크 예시

북마크 이동

<img>

이미지

페이지에 삽입 X, 링크 O

empty element

움직이는 이미지 사용 가능

속성

  • src: 소스 파일 경로
  • alt: 대체 문구
  • width, height: 너비, 폭, pixel 단위
  • style
    • width, height: 너비, 폭
    • float: 정렬

* style 속성을 이용하는 것을 권장 - head 섹션의 style 오버라이드로 인한 크기 변경 방지

<img src="" alt="" width="128" height="128">

<img src="" alt="" style="width:128px;height:128px;">

map

이미지에 클릭할 수 있는 영역 선택

다수 지정 가능

자바스크립트 함수 트리거 가능

usemap 속성

<img> element에 추가

usemap의 값은 #으로 시작하여 이미지와 이미지맵 연결

area element

클릭할 수 있는 영역 지정

  • shape
    • rect: 직사각형
    • circle: 원
    • poly: 다각형
    • default: 전체
  • cord
    • rect: 대각선 두 점의 x, y 좌표를 순서대로
    • circle: 원의 중심 x, y 좌표와 반지름
    • poly: 모든 점의 x, y좌표를 순서대로 (꼬임 없이)

배경 이미지

style 속성과 CSS의 background-image 속성 사용

<div style="background-image:url('')"></div>

head 섹션 안 style element에 추가 가능

<style>
div {
  background-image: url('');
}
</style>

<!-- 전체 페이지에 넣고 싶을 때
<style>
body {
  background-image: url('');
}
</style>
-->
  • background-repeat: 반복 여부
    • no-repeat: 반복 X
  • background-size: 배경 크기
    • cover: 전체
    • 70% 80%: 가로 70% 세로 80%
  • background-attachment: 스크롤에 따른 배경 이동
    • fixed: 고정

picture element

브라우저가 가장 적합한 이미지 선택

1개 이상의 source element로 구성, 각 source element는 다른 media 속성과 srcset 속성

  • media: 가장 적합한 크기
  • srcset: 이미지

* 항상 picture element의 마지막에 img element를 추가

속성 값을 만족하는 첫 번째 source element 사용, 나머지 무시

<iframe>

웹 페이지 안에 웹 페이지를 띄울 때 사용

링크의 target frame으로 사용 가능

<iframe src="https://www.tistory.com/" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://orubt.tistory.com/" target="iframe_a">블로그</a></p>

블로그

속성

  • src: url
  • width, height: 너비, 폭
  • style: 속성

<code>

코드

공백과 줄바꿈을 적용시키기 위해 <pre> element 내부에 작성

<var>

변수나 수식 정의 시 사용

이태릭체 적용

<kbd>

키보드 입력을 정의할 때 사용

브라우저의 기본 monospace 폰트 적용

<samp>

컴퓨터 프로그램의 출력 샘플 정의

브라우저의 기본 monospace 폰트 적용

Block-Level & Inline

HTML element 기본 표시 값

Block-Level

새로운 줄에 full width 차지

종류

  • address / article / aside
  • blockquote
  • canvas
  • dd / div / dl / dt
  • fieldset / figcaption / figure / footer / form
  • h1-h6 / header / hr
  • li
  • main
  • nav / noscript
  • ol
  • p / pre
  • section
  • table / tfoot
  • ul
  • video

div

블록을 스타일할 때 사용

style, class, id

Inline

같은 줄에 필요한 너비만 차지

종류

  • a / abbr / acronym
  • b / bdo / big / br / button
  • cite / code
  • dfn
  • em
  • i / img / input
  • kbd
  • label
  • map
  • object / output
  • q
  • samp / script / select / small / span / strong / sub / sup
  • textarea / time / tt
  • var

span

텍스트의 일부를 스타일할 때 사용

style, class, id

html 태그 reference

html 태그 빈도

6 HTML 속성(Attribute)

HTML element에 대한 추가적인 정보 제공

시작 태그에 명세

이름과 값이 짝을 이루는 형태: <태그명 속성명="값">

값에 따옴표 권장 - XHTML, 공백 포함 시 필수

홀따옴표, 쌍따옴표 모두 사용 가능

lang

html 태그에 사용하여 웹 페이지 언어와 국가 설정

title

속성에 대한 추가정보, 툴팁

* cf ) title element

style

element에 스타일을 추가할 때 사용 (색, 폰트, 크기)

<태그명 style="속성:값;"    <!-- 속성, 값은 CSS 속성과 값 -->
<p style="background-color:powderblue;">배경색</p>
<p style="color:blue;">글자색</p>
<p style="font-family:verdana;">폰트</p>
<p style="font-size:300%;">크기</p>
<p style="text-align:center;">정렬</p>

배경색

글자색

폰트

크기

정렬

class

HTML element에 대한 클래스를 지정하는데 사용

동일 클래스 공유 가능

head 섹션의 .(class_name)의 정의에 따라 적용

공백으로 구분하여 한 element에 여러 클래스 적용 가능

서로 다른 element가 같은 클래스 적용 가능

자바스크립트에서 특정 클래스 이름으로 element에 접근하거나 조작하기 위해 사용 가능

id

HTML element에 대해 유일한 id 지정 -> 동일 id 지정 불가

head 섹션에 #(id)의 정의에 따라 적용

자바스크립트에서 특정 id로 element에 접근하거나 조작하기 위해 사용 가능

북마크에 사용 북마크 설명

html 속성 reference

7 텍스트 형식

글꼴

<b>굵은 글자</b>
<strong>강조</strong>
<i>이태릭체</i>
<em>강조</em>

굵은 글자
강조
이태릭체
강조

What's the difference between <b> and <strong>, <i> and <em>?

효과

<small>작은 글자</small>
<mark>표시</mark>
<del>취소선</del>
<ins>삽입</ins>
<sup>위첨자</sup>
<sub>아래첨자</sub>

작은 글자
표시
취소선
삽입
위첨자
아래첨자

인용

  • blockquote: 다른 소스에서 인용된 섹션 정의, 들여 쓰기 처리
  • q: 짧은 인용, 브라우저가 쌍따옴표 삽입
  • cite: 작품명, 이태릭체 처리
  • abbr: 약어
  • address: 연락처, 이태릭체, 앞 뒤에 줄바꿈
  • bdo: 텍스트 방향 재정의
    • dir

주석

<!-- 내용 -->

표

<table>

id를 지정하고 head 섹션의 style에서 #id를 통해 설정 가능

tr:nth-child(even) 또는 tr:nth-child(odd)를 통해 홀, 짝수 행 적용 가능

  • <tr>: 줄
  • <th>: 헤더, 굵은 글씨, 가운데 정렬
  • <td>: 칸, 왼쪽 정렬
  • <caption>: 캡션, 반드시 <table> 태그 바로 뒤

설정

  • border: 경계선
    • 선 두께
    • 선 모양
    • 선 색
  • border-collapse: 표의 테두리와 셀의 테두리 간 간격
  • border-spacing: 칸 경계
  • padding: 셀 내용과 칸 경계
  • text-align: 정렬
  • colspan="": 열 병합
  • rowspan="": 행 병합

리스트

중첩 사용 가능

순서 없는 리스트

<ul> 태그로 시작 - unordered list

각 아이템은 <li> 태그로 시작

CSS 속성

  • list-style-type: 아이템 마커 설정
    • disc: 점(기본)
    • circle: 원
    • square: 정사각형
    • none: 無

CSS를 사용한 수평 리스트

float CSS 속성 값을 left로 설정

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

순서 있는 리스트

<ol> 태그로 시작 - ordered list

각 아이템은 <li> 태그로 시작

CSS 속성

  • type: 아이템 마커 설정
    • 1: 숫자
    • A: 대문자 알파벳
    • a: 소문자 알파벳
    • I: 대문자 로마 숫자
    • i: 소문자 로마 숫자
  • start: 시작 숫자

Description list

<dl> 태그로 시작 - description list

용어를 정의하는 <dt> 태그와 각 용어에 ㅐ한 설명에 해당하는 <dd> 태그가 짝을 이룬다.

8 CSS

Cascading Style Sheets - Cascading이라는 뜻 처럼 부모 요소에 적용된 스타일이 자식 요소에도 적용

웹 페이지의 레이아웃 형식을 지정하는 데 사용 (색상, 폰트, 크기, 간격, 배경 등)

여러 웹 페이지의 레이아웃을 동시에 제어 가능

Inline

한 HTML element에 스타일 적용 시 사용

HTML element의 style 속성 사용

<h1 style="color:blue;">파란 제목</h1>

파란 제목

Internal

한 HTML 페이지에 스타일 적용 시 사용

<head> 섹션의 <style> element에 정의

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


body 태그 내 모든 배경색은 powderblue, h1 태그는 파란색 글자, p 태그는 빨간색 글자 적용

External

여러 HTML 페이지에 스타일 적용 시 사용

외부 스타일 시트를 사용하여 <head> 섹션에 링크 추가

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

외부 style sheet은 HTML 코드를 포함하지 않고 .css 확장자로 저장

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

링크

rel

현재 문서와 외부 리소스 사이의 연관 관계

  • alternate
  • author: 해당 문서의 저자에 대한 링크
  • dns-prefetch
  • help: 도움말 문서에 대한 링크
  • icon: 사용자 인터페이스에서 해당 문서를 나타낼 리소스
  • license: 해당 문서의 저작권 정보에 대한 링크
  • next: 연관된 문서들의 모음 중 다음 문서에 대한 링크
  • pingback
  • preconnect: 해당 리소스의 원본에 미리 연결
  • prefetch: 해당 리소스를 미리 가져와 캐시
  • preload
  • prev: 연관된 문서들의 모음 중 이전 문서에 대한 링크
  • search: 해당 문서 및 관련 페이지를 검색하는데 사용할 수 있는 리소스에 대한 링크
  • stylesheet: stylesheet로 사용할 외부 리소스

href

절대 URL 또는 상대 URL

속성(Property)

  • color: 글자색
  • font-family: 글자체
  • font-size: 글자 크기
<p style="color:red; font-family:courier; font-size:160%;">폰트</p>

<!--
<head>
<style>
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
-->

폰트

  • border: 주변 경계
  • padding: 글자와 경계선 사이의 간격
  • margin: 경계선 외부 공간
<p style="border:2px solid powderblue; padding:30px; margin:50px;">경계1</p>
<p style="border:2px solid powderblue; padding:30px; margin:50px;">경계2</p>

<!--
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
  margin: 50px;
}
</style>
</head>
-->

경계1

경계2

9 JavaScript

<script>

javascript와 같은 클라이언트 서버 스크립트를 정의할 때 사용

스크립트 선언문을 포함하거나 src 속성을 통해 외부 스크립트 파일 참조

이미지 조작, 양식 유효성 검사, 콘텐츠 동적 변경에 사용

HTML element를 선택하기 위해 가장 많이 사용하는 메서드 - document.getElementById( )

속성 수정 가능

  • innerHTML: 내용 변화
  • style
    • fontSize: 글크기
    • color: 글자색
    • backgroundColor: 배경색

<noscript>

브라우저가 스크립트를 사용할 수 없거나 지원하지 않을 때 사용자에게 보여지는 대체 콘텐츠

반응형
저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바