HTML 구조와 환경설정, 태그모음

Markup Language/HTML, CSS 2019. 6. 2. 17:01

728x90

<!DOCTYPE html>- HTML5 문서를 선언, HTML5로 작성됨을 알림

<HTML>...</HTML>- HTML 문서의 시작과 끝

<HEAD>...</HEAD>- 문서의 상단 제목을 표시하는 <TITLE>, 문서정보를 설정하는 <meta>, <link>태그 등 화면에 출력되지 않는 설정

<BODY>...</BODY>- 실제 화면에 나오는 콘텐츠 작성

<html lang="en"> => <html lang="ko"> : 언어설정

HTML 편집기 Visual Studio Code

장점은 속도, 심플함, 다양한 OS 지원( 리눅스, 윈도우 , IOS), 강력한 IntelliSense 지원, 디버깅 및 확장 능력이 있다.

Visual Studio Code – 코드 편집기 | Microsoft Azure

거의 모든 언어로 작동되고 모든 OS에서 실행되는 강력한 코드 편집기인 Visual Studio Code를 사용하여 Azure에서 편집하고 디버그하고 배포하세요.

azure.microsoft.com

프로그램 설치 후 프로그램 내 마켓플레이스에서 live server을 검색해서 설치해주면 내가 만든 것을 바로바로 작업 중간마다 볼 수 있다.

사용은 코드파일 우클릭> open with live Server 클릭하거나 Alt+L, Alt+O를 눌러준다.

HTML Tag 형식

HTML 태그는 태그 이름을 꺾쇠 괄호 < > 로 감싸서 표현한다. 태그는 대소문자를 구별하지는 않지만 소문자로 사용.

<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 한다.

<태그이름> // 시작 태그 (start tag, opening tag)

</태그이름> // 종료 태그 (end tag, closing tag)

HTML 요소(Element)

요소는 시작태그와 종료태그 그리고 가운데 위치한 콘텐트(Content)로 구성된다. html 요소를 도식화 하면 html 요소는 head와 body 요소를 포함하고 head와 body는 title 과 p 요소를 포함하는데 이를 부모와 자식 관계라 한다. 코드 작성 시 이런 중첩관계를 알기 쉽게 indent(들여쓰기)하여 가독성을 높여주자.

속성 (Attribute)

속성은 태그의 기본 기능을 수정하거나 특정한 기능을 부여할 수 있다.

시작태그에 ( 속성 = 속성값 )으로 나타낸다.

HTML Tag 의 종류

제목 태그 (Heading)

글의 제목을 나타낼때 쓰는 태그. <H1>~<H6>까지 있으며 1이 가장 큰 크기이다. 사실 제목을 쓰지 않고 그냥 <p>(단락)라든지 글의 크기만 키우면 제목처럼 쓸수 있겠지만 여러 검색엔진들은 h태그를 이용해 키워드를 찾기 때문에 정보와 검색에서 매우 중요한 태그.

단락 태그 (Paragraph)

텍스트를 표시할때 앞뒤에 줄바뀜이 있는 '단락'을 만든다. 문단 구분 시 <p>태그를, 줄 바꿈시 <br>태그를 이용.

HTML에서 텍스트 사이 스페이스로 간격을 많이 뛰워도 한칸으로 인식하고 줄바꿈은 무시된다.

<div> 태그

<div>태그 : 콘텐츠의 영역이나 그룹화를 할 때 사용. 스타일등의 속성을 추가해서 원하는 문단이나 구역만큼 속성을 수정.

<span> 태그 : 다른 텍스트와 구별하기 위해 속성으로 스타일을 사용. 배경색은 글자가 있는 곳만 적용

주석 : 으로 표시한다. 각 코드 부분의 기능을 설명할 때 등등 쓴다.

<pre> 태그 : 특수한 문자나 코드 같은 경우를 그대로 나타낼때

<hr> 태그 : 수평줄 넣기 , 주제 바뀜을 나타냄

<blockquote> 태그 : 인용문

<q> 태그 : 한줄 인용

<strong> , <b> 태그 : 텍스트를 굵게 표시. 외관은 같지만 중요한 의미를 넣을때는 <strong> 태그를 사용

<em>, <i> 태그 : 텍스트를 강조하여 이탤릭체로 표현. 중요성이 있을때 <em> 태그, 단순히 이탤릭체로 쓸때는 <i> 태그를 사용

<mark> 태그 : 형광펜 효과

<ruby> 태그 : 동아시아 글자 표기

<del> 태그 : 글자 중간에 선긋기

<ins> 태그 : 글자아래 밑줄

<sub> 태그 : 수학공식 글자 아래에 작은 글자

<sup> 태그 : 수학공식 글자 위의 작은 글자

블록요소 (Block)

블록태그 : 텍스트를 블록으로 묶어 전체를 차지하는 태그

모든 인라인 요소를 포함할 수 있고 다른 블록요소도 포함 가능. width, height, margin, padding 등을 사용해서 레이아웃을 수정할 수 있고, 블록요소 다음에 줄바꿈이 일어난다. 이 자체로 한 줄을 차지함. 블록 요소는 vertical-align, text-align 이 적용되지 않는다.

{display:inline} css로 인라인요소의 속성을 가진 블록요소를 만들 수 있다.

//블록태그 모음
address, article, aside, audio, 
blockquote, canvas, dd, div, dl, 
fieldset, figcaption, figure, footer, form, 
h1, h2, h3, h4, h5, h6, 
header, hgroup, hr, noscript, ol, output, 
p, pre, section, table, ul, video

인라인 요소 (Inline)

인라인태그 : 줄바꿈 없이 문장 안에서 특정 부분 텍스트를 표시하는데 사용.

항상 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있다. 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 되어 임의로 width, height로 변형을 줄 수가 없다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트 정렬을 할 수 있다. 그리고 인라인 요소 다음에는 줄바꿈이 없다. 인라인 요소는 height, width가 적용되지 않는다.

{display:block} CSS로인라인 요소를 블록 요소의 속성으로 변경 할 수 있다.

{display:inline-block} : 인라인요소와 블록요소의 속성을 모두 갖기

//인라인태그모음
a, abbr, acronym, 
b, bdo, big, br, button, 
cite, code, dfn, em, 
i, img, input, kbd, 
label, map, object, q, 
samp, small, script, select, span, strong, sub, sup, 
textarea, tt, var

목록 태그 ul, ol, li

큰 카테고리 : ul (순서없음. Unordered List), ol (순서있음)

* 중첩 리스트(Nested List) : 리스트 안에 리스트가 들어가기도 한다.

속성값	모양	속성값	설명
disc	● (default)	1	숫자 (default)
circle	○	A	영문 대문자
square	■	a	영문 소문자
none	없음	I	로마 대문자
		i	로마 소문자

목록 아이템 : <li></li>

// 속성 style="list-style-type:속성값"
<ul style="list-style-type:circle;">

리스트 시작번호 지정 : 예를 따르면 넘버가 50부터 매겨진다.

<ol start="50">
<li>맵고</li>
<li>달고</li>
<li>짜다</li>
</ol>

설명 목록 <dl> , < dt> , <dd>

<dl> 설명 목록 태그

<dt> 제목 태그

<dd> 설명 태그

표 (Table 테이블) 태그

<table> 표 만들기 태그 , <tr> : row 행 , <td> : column 열 , <caption> 표 제목, <th> : 제목셀

<table border="1"> 테이블 테두리선 크기

<col> : 닫는 태그 없는 단독태그. span 속성으로 여러열 선택해서 style 적용 가능하다.

<colgroup> : 열을 묶어서 스타일 지정. caption 태그 뒤 tr, td 태그 앞에 위치한다.

<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:blue">

<colspan> : 열병합. 즉 가로셀들을 병합.

<rowspan> : 행병합. 즉 세로셀들을 병합.

<th colspan="2">연락처</th>

table tag도 태그 안에 테이플 태그 (표 안에 표)가 들어갈 수 있다.

<thead>, <tbody>, <tfoot> : 표 구조 그룹 태그로 그룹화하여 스타일 디자인 할 수 있는 장점이 있다. 순서 상관없이 입력 가능

HTML 특수문자 입력하기

표현문자	문자표현	문자 설명
스페이스(space)		공란(스페이스)
&	&	엠퍼샌드 (and)
<	<	보다 작은
=	-	등호
>	>	보다 큰
©	©	저작권 표시 (Copyright)

HTML 이미지 태그

<img src="이미지경로" alt="이미지가 없을시 대체텍스트" width="" height="">

종료 태그가 없는 단독 태그로 경로의 경우 저장된 사진 이외에 웹이미지주소도 가능하다. 가로 세로는 픽셀, %도 가능하다.

경로의 경우 html파일의 위치를 기준으로 경로를 정한다.

벡터 : 점과 점 사이의 곡선으로 이미지를 구성하는 것. 함수와 비슷

레스터 : 작은 점 픽셀이 모여서 그림을 완성.

jpg : 압축을 통해 용량을 줄인 이미지 형식으로 변환 시 손실 발생

gif : 무손실이지만 256색상만 표현 가능. 움짤

png : 무손실로 투명도를 지원. 로고, 아이콘 등에 많이 씀. png-24, png-8.

svg : 벡터이미지를 이용해서 크기를 변화해도 이미지가 손상되지 않으나 아직은 웹에서 봐본적 없음.

<figure><figcaption> : 이미지설명 tag. 웹문서의 멀티미디어 파일(오디오, 비디오)과 사진, 표, 소스코드 등을 한 그룹으로 묶을 때 사용.

<figure><figcaption>이미지설명글</figcaption><img src=""></figure>

하이퍼링크 a 태그

타 사이트나 문서로 연결하는 링크를 만드는 것. 페이지 내에서도 특정 id를 갖는 요소에 링크할 수 있다.

<a href="링크주소"><img src="이미지주소"></a>

<h2 id="top>무한의탑</h2>
<a href="#top">top</a>

target="_blank" : 새창에서 링크 열기

target="_self" : 기본값

link : 미방문 상태,

visited : 방문한 상태,

hover : 링크 위에 마우스를 올린 상태,

active : 누르고 있는 상태.

* a: link {color: red; } 처럼 각 상태로 나뉘어서 단어들로 스타일 적용이 가능하다.

<map> <area> 태그

이미지 안의 일정 영역에 링크를 걸어 동작하기. usemap 과 map 태그의 맵이름은 같아야한다.

area shape에서 rect 나 circle 중에 선택한다. 사각형은 (x1,y1,x2,y2) 두 점의 좌표를, 원은 (x,y,r) 좌표 즉 중심점과 반지름 길이를 넣는다.

<img usemap="#mapname" src="img address">
<map name="mapname">
<area shape="원이나 네모 중 하나" coords="좌표" href="주소">
</map>

HTML 멀티미디어 오디오, 비디오 태그

멀티미디어 포맷 : .swf, wav, mp3, mp4, mpg, wmv, avi....

멀티미디어 : 컴퓨터를 매개로 하여 영상,음성,문자 등과 같은 다양한 정보 매체를 복합시킨 장치 또는 그러한 시스템. 다중매체나 복합매체.

HTML5는 미디어를 별도 플러그인 설치 없이도 재생이 가능하다. 각 브라우저별 지원하는 형식을 확인하고 개발하면 좋을 것이다.

iframe 태그

<iframe src="URL"></iframe>

문서 내에서 다른 문서나 홈페이지 주소 등 URL을 불러오는 것. 웹크롤링 시 쓴다.

* 속성

SRC: 프레임 안에 불러올 문서의 경로를 설정
ALIGN : 정렬 방식.(top, right. left 등)
HEIGHT, WIDTH : 프레임의 높이, 넓이
HSPACE, VSPACE : 각각 가로,세로 여백
MARGINHEIGHT, MARGINWIDTH : 프레임 내의 문서와 프레임 테두리와의 여유공간(높이,넓이)
SCROLLING : 스크롤 바를 나타내거나 보이지 않게 한다.(auto, yes,no로 값을 주면 됩니다)
BODER, BORDERCOLOR : IFRAME의 두께나 테두리 칼라

<form> 폼태그

사용자 input을 받기 위한 태그들. 사용자가 웹사이트로 정보를 보낼 수 있는 요소는 모두 폼이다. (로그인 등) form은 사용자가 웹브라우저에 입력한 정보를 서버로 넘겨주는 역할을 하며 서버에서는 입력된 정보를 DB에 저장하거나 저장된 회원정보등을 검색, 수정하여 결과를 브라우저로 다시 보낸다. 폼의 모양을 만드는 것은 html , 폼에 입력한 정보를 처리하는 것은 ASP, JSP, PHP 와 같은 서버프로그램밍 언어다.

<form action="/actipn_page.php" method="get">
	First name : <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

<form 속성 속성값> </form>

<label for="id이름">label</label> : 제목붙이기

<fieldset></fieldset> : 폼요소 그룹묶기

<html>
<body>
<form>
	<fieldset>
    <label>제목붙이기<input type="text"></label>
	<legend>개인정보:</legend>
	Name: <input type="text">
	</fieldset>
</from>
</body>
</html>

INPUT 태그

*텍스트와 패스워드 필드의 공통속성

name(구별할 수 있는 이름), size(텍프트필드의 길이), value(텍스트필드에 입력 전 처음 보이는 내용),

maxlength(입.....

Value	Description
hidden	사용자에게 보이지 않지만 폼 입력값에 추가되어 서버로 전달
text	텍스트 상자
search	검색 상자
tel	전화번호 입력 필드
url	url 주소 필드
email	메일주소 입력필드
password	비밀번호 입력필드. *로 표시
datetime	국제표준시(UTC) 날짜와 시간 입력
datetime-local	사용자 지역을 기준으로 날짜와 시간 입력
date	사용자 지역을 기준으로 날짜(년, 월, 일) 입력
month	사용자 지역을 기준으로 날짜(년, 월) 입력
week	사용자 지역을 기준으로 날짜(년, 주) 입력
time	사용자 지역을 기준으로 시간 입력
number	숫자 조절할 수 있는 화살표 입력
range	숫자 조절할 수 있는 슬라이드 막대 입력
color	색상표 입력
checkbox	여러개 선택할 수 있는 체크박스
radio	여러 항목중 1개만 선택가능한 라디오 버튼
file	파일을 첨부할 수 있는 버튼
submit	서버로 전송 버튼
image	submit 버튼 대신 사용할 이미지
reset	리셋 버튼
button	버튼 입력

태그 연습 사이트

https://www.w3schools.com/html/default.asp

HTML 연습 사이트

https://codepen.io/

많이쓰는 태그모음

https://www.advancedwebranking.com/html/

자동으로 표를 만들어주는 사이트

https://www.tablesgenerator.com/html_tables

무료사진 다운로드 사이트

https://unsplash.com/

html 파일이 문법에 맞는지 확인하기

https://validator.w3.org/#validate_by_upload+with_options

* 수업 때 소개받은 도움이 될 만한 유용한 사이트들을 정리해보았습니다.

728x90

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

'Markup Language > HTML, CSS' 카테고리의 다른 글

html 공백 offset을 확인해봅시다 (익스플로러에서 보이지 않는 div) (2)	2019.12.16
css combinator : 인접형제 선택자, 일반형제 선택자, 자식 선택자, 후손선택자 등 (4)	2019.12.06
a:hover와 같은 가상클래스 (pseudo-class) 문법 (2)	2019.12.06
html 태그 id와 class 차이와 적용 우선순위, 중복가능여부 (0)	2019.10.22
HTML 학습 전 필요한 사전 지식 (0)	2019.06.02

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.