[HTML] 기초 다지기 1

깨미·2022년 2월 6일
html
0

Web

목록 보기
1/3

웹을 처음 접한 건 22살 휴학을 하고 생활코딩에서였다.
그리고 3년이 지나 웹 개발을 하고 있지만, 개발을 하면 할수록 미로에 빠지는 기분이 든다. 뭔가를 알아가고 뭔가를 개발하고 있지만 진짜로 뭔가를 배웠다는 생각이 들지 않는다.
무얼 해야 하나 고민하던 찰나 다시 기초 부터 훑어보자는 생각으로 HTML 기초를 보게 됐다. 작심삼일로 포기만 하는 내가 이 글의 마침표를 찍을 수 있길 바란다.
http://www.tcpschool.com/html/intro

HTML 시작

HTML 기초

HTML 이란?

HyperText Markup Language의 약자.

HTML 태그

태크 이름을 꺾쇠 괄호로 감싸서 표현.
보통 start tag, end tag의 한 쌍으로 구성 종료 태그는 태그 이름 앞에 슬래시 존재.

empty tag

<img><br><hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태크 라고 함.

HTML 버전

HTML 기본 구조

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시.
<html> : HTML 문서의 루트 요소를 정의
<head> : HTML 문서의 metadata 정의

  • metadata : HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보 의미.
  • <title>, <style>, <meta>, <link>, <script>, <base> 태그 등을 이용하여 표현.

<title> : HTML 문서의 제목을 정의

  • toolbar에 표시
  • 웹 브라우저의 favorites에 추가할 때 제목으로 사용
  • 검색 엔진 결과 페이지에 제목으로 표시.
    <body> : 웹 브라우저를 통해 보이는 content

HTML 요소(element) 구조

element는 여러 attribute을 가질 수 있으며, 이러한 attribute는 해당 요소에 대한 추가적인 정보 제공.

<태그이름 속성이름="속성값">

  • 속성 이름은 언제나 소문자로
  • 속성값은 언제나 따옴표로

제목(Heading)

HTML은 제목을 표현할 수 있는 다양한 크기의 <h>태그를 제공.

검색엔진은 각 웹 사이트의 내용을 <h>태그를 이용하여 키워드를 수집하고, 그 내용을 파악합니다. 따라서 HTML 문서에 포함되는 제목은 <h>태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있음.

  • HTML 문서의 제목에 해당하는 부분에 <big> 태그나 <bold> 태그를 사용하지 않기.

단락(Paragraph)

<p> 태그 이용하기.

  • <p> 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현.
  • <br> : 새로운 단락을 만들지 않고도 줄 나눌 수 있음.

<pre> : HTML 코드에서 작성한 텍스트 서식을 그대로 표현.
<hr> : 수평 가로 구분선.

Quotation

1. 짧은 인용구

<q> 태그를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙는다.

2. 블록 인용구

<blockquote> 를 사용하여 표현. 인용 부분을 별도의 단락으로 구분하여 나타냄.

3. 축약형 표현

용어의 축약형을 표현하기 위해 <abbr>태그 사용. <abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타남.

4. 주소 표현

<address>태그는 HTML에서 주소를 표현.

Comment

<!-- 주석내용 -->

Entity

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

대소문자를 구분

대표 엔티티

diacritical marks

Symbol 특수 문자

Character Set

HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>

HTML4에서 UTF-8의 경우 : <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5에서 UTF-8의 경우 : <meta charset="UTF-8">

문자셋의 종류

  • ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있음.
  • ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원.
  • ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋.
  • UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋

<a> 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시
<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있음.

target 속성

링크의 상태

페이지 책갈피

<a> 태그의 name 속성을 이용하면 간단한 책갈피를 만들 수 있음.

<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>

...

<h2><a name="bookmark"></a>제목 3</h2>

image

이미지 맵

<map> 태그를 이용하여 이미지 맵 제작.
이미지의 일부를 클릭할 수 있도록 만들어서 버튼 처럼 사용하는 기능을 의미.
<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정됩니다.

<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할

<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" style="width:320px; height:240px" />

<map name="vending">

    <area shape="rect" coords="90,60,180,130" alt="거짓"

        href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">

    <area shape="rect" coords="210,200,70,130" alt="진실"

        href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">

</map>

블록과 인라인

대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됨.

1. 블록

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

<p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소

<div> 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록 요소

2. 인라인

새로운 라인에서 시작하지 않음.
요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용 만큼만 차지.

<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소

<span> 요소는 텍스트의 특정 부분을 묶는 데 자주 사용되는 인라인 요소.

ifram

inline frame의 약자
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입.
iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정됩니다

iframe 요소의 페이지 변경하기

<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있음.

<a>태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe 요소의 페이지를 변경할 수 있게 됨.

<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe>

<p>

    <a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a>

</p>

frameset

프레임셋(frameset)을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있습니다.
이러한 프레임셋은 iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있습니다.
또한, noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절할 수 있습니다.

프레임셋에서 각각의 페이지는 frame 요소로 표현됩니다.
frame 요소는 iframe 요소와는 달리 종료 태그를 가지지 않습니다.

noframes 요소는 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장합니다.

frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원하지 않습니다.
따라서 하나의 브라우저 창에 여러 페이지를 표현하고 싶을 때는 iframe 요소를 사용하거나 CSS를 이용하여 표현해야 합니다.

수직 프레임셋

<frameset cols="25%,*,25%">

<frame name="left" src="/html/intro"/>

<frame name="center" src="/css/intro"/>

<frame name="right" src="/php/intro"/>

<noframes>

    <body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>

</noframes>

</frameset>

수평 프레임셋

<frameset rows="20%,60%,20%">

<frame name="top" src="/html/intro" noresize="noresize" />

<frame name="center" src="/css/intro" noresize="noresize" />

<frame name="bottom" src="/php/intro" noresize="noresize" />
<noframes>
    <body>
        이 브라우저는 frame태그를 지원하지 않습니다!
    </body>
</noframes>
</frameset>

레이아웃

div 요소를 이용한 레이아웃

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

<head>
	<meta charset="UTF-8">
	<title>HTML Layouts</title>
	<style>
		#header {
			background-color:lightgrey;
			height:100px;
		}
		#nav {
			background-color:#339999;
			color:white;
			width:200px;
			height:300px;
			float:left;
		}
		#section {
			width:200px;
			text-align:left;
			float:left;
			padding:10px;
		}
		#footer {
			background-color:#FFCC00;
			height:100px;
			clear:both;
		}
		#header, #nav, #section, #footer { text-align:center; }
		#header, #footer { line-height:100px; }
		#nav, #section { line-height:240px; }
	</style>
</head>

<body>

	<h1>div 요소를 이용한 레이아웃</h1>
	<div id="header">
		<h2>HEADER 영역</h2>
	</div>
	<div id="nav">
		<h2>NAV 영역</h2>
	</div>
	<div id="section">
		<p>SECTION 영역</p>
	</div>
	<div id="footer">
		<h2>FOOTER 영역</h2>
	</div>

</body>

</html>

HTML5 레이아웃

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

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

<head>
	<meta charset="UTF-8">
	<title>HTML Layouts</title>
	<style>
		header {
			background-color:lightgrey;
			height:100px;
		}
		nav {
			background-color:#339999;
			color:white;
			width:200px;
			height:300px;
			float:left;
		}
		section {
			width:200px;
			text-align:left;
			float:left;
			padding:10px;
		}
		footer {
			background-color:#FFCC00;
			height:100px;
			clear:both;
		}
		header, nav, section, footer { text-align:center; }
		header, footer { line-height:100px; }
		nav, section { line-height:240px; }
	</style>
</head>

<body>

	<h1>HTML5 레이아웃</h1>
	<header>
		<h2>HEADER 영역</h2>
	</header>
	<nav>
		<h2>NAV 영역</h2>
	</nav>
	<section>
		<p>SECTION 영역</p>
	</section>
	<footer>
		<h2>FOOTER 영역</h2>
	</footer>

</body>

</html>

table 요소를 이용한 레이아웃

설계된 요소가 아니므로, 테이블로 작성된 레이아웃은 수정이 매우 힘듦

HTML과 CSS

CSS

CSS란 Cascading Style Sheets의 약자
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어

CSS 적용 방법

1. 인라인 스타일

HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법

<p style="color:green; text-decoration:underline">

인라인 스타일을 이용하여 스타일을 적용하였습니다.

</p>

2. 내부 스타일 시트

HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정

<style>

    body { background-color: lightyellow; }

    p { color: red; text-decoration: underline; }

</style>

3. 외부 스타일 시트

웹 사이트 전체의 스타일을 하나의 파일에서 변경
모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함

<link rel="stylesheet" href="/examples/media/expand_style.css">

스타일 적용의 우선순위

  1. 인라인 스타일
  2. 내부 / 외부 스타일 시트
  3. 웹 브라우저 기본 스타일

CSS 선택자

  • HTML 요소 선택자

  • 아이디(id) 선택자

  • 클래스(class) 선택자

profile
깨미
vis ta vie
다음 포스트

[HTML] 기초 다지기 2

0개의 댓글