3주: html, css 언어 : 이론, block, inline, 목록태그, 링크태그, 이미지

< !DOCTYPE html > : 해당 문서를 웹 표준(html5)로 작성하겠다는 선언문. 파일에게 어떤 언어를 사용할 것인지 알려주는 역할. DOCTYPE은 반드시 맨 첫줄에 쓰여야 한다. 보통 브라우저는 html페이지를 보여줄 때 맨 위쪽 태그부터 시작하여 소스 코드를 읽어 내려간다. 이때 을 통해 어떤 유형을 사용하고 있으니 그 버전에 맞게 해석할 수 있도록 도와준다.

> 속성과 속성값을 사용하는 문법
태그는 각 태그마다 쓸 수 있는 속성이 정해져 있다. 이때 속성을 나타낼 때에는 태그이름 다음에 한 칸 공백으로 구분하여 속성과 속성 값을 표기한다.

<태그명 속성명 = "값">

< head >
html문서의 두뇌역할. 사람의 생각도 눈에 보이지 않듯이, head안에 쓰여진 정보들은 브라우저에 보이지 않는다. 이 부분은 브라우저가 화면을 보여줄때 어떻게 보여줄지 해석(생각)하는 부분이다. head안에는 css파일이나 javascript파일, 파비콘 이미지 등 외부파일을 연결하는 곳.

< title >
브라우저의 탭 이름. 사이트의 이름을 적는 부분이다.

< body >
브라우저에서 실제 표현되는 공간. 여기에 글자나 이미지 등 컨텐츠를 작성한다.

> 웹 표준
모든 사용자가 모든 브라우저에서 어떠한 환경에서든 동일한 웹 서비스를 이용할 수 있게 표준안에 따라 웹 문서를 작성하는 것.

> 웹 접근성
브라우저, 디바이스, 장애환경에 관계없이 웹 서비스를 편리하게 이용하도록 만드는 것. 즉, 웹에 어떻게 더 쉽게 접근할 수 있느냐를 뜻한다.

> 웹 문서를 만드는 규칙(파일 명명 규칙)

1. 하나의 프로젝트는 하나의 폴더(최상위 폴더)를 만들어 html, css, javascript파일들을 분리하여 저장한다. 최상위 폴더의 이름도 반드시 영문+숫자 조합이어야 한다.
   ex) portfolio폴더 -> html폴더 / css폴더 / 이미지폴더...
2. 웹 파일을 생성할때에는 영문 소문자를 사용하여 이름을 짓는다. 한글이름은 지을 수 없다.
   ex) about.html
3. 웹 파일 이름에 숫자가 들어갈 경우 영문 소문자 다음에 쓴다.
   ex) about01.html (O)
   01about.html (X)
4. 웹 파일 이름에 공백이 필요한 경우 공백 대신 -(하이픈), _(언더바)를 이용한다.
   ex) about_01.html (O)
   about-01.html (O)
   about 01.html (X)
5. 웹 파일 이름에 .은 확장자 앞에만 쓸 수 있다.
   ex) about-01_sub.html(O)
   about.01_sub.html(X)
   

> 텍스트를 block으로 나타내는 태그

block속성을 가지고 있는 태그들은 상자의 성격을 갖는다. block속성 태그는 넓이 높이를 가질 수 있고, 따로 넓이나 높이를 설정해주지 않으면 브라우저의 넓이 전체를 차지한다. 여러 개를 출력할 경우 세로로 출력된다는 특징이 있다.

< h1 >~< h6 > : 제목태그
목태그는 제목을 나타내고 구분지을때 사용한다. 제목의 우선순위(중요도)에 따라 태그를 구분하여 사용한다. h1태그가 가장 크고 숫자가 높아질수록 글자가 점점 작아진다. 보통은 h1~h4까지 가장 많이 사용되고 h5,h6의 경우 글자가 작고 우선순위가 낮아 잘 사용되지 않는다. 여기서 h1은 웹사이트에서 각 페이지 header안에 제목을 나타내는 용도로 사용되고 html문서 1개당 1번씩만 사용할 수 있다.

< p >< /p > : 본문태그(단락태그)
본문을 나타내기 위해 단락으로 구분하는 태그로 < p >태그와 < /p >태그 사이에 내용을 넣을 수 있다. 보통 한 줄 이상의 긴 글을 표현할때 사용한다.

< br /> : 줄바꿈 태그
문장안에서 줄바꿈이 필요할 경우 사용한다. br태그에는 넓이와 높이를 줄 수 없지만 다음 줄로 문자를 내려주는 역할을 하여 block속성에 속한다.

> inline속성을 가진 태그
inline속성을 가진 태그들은 태그를 여러 개 출력하면 브라우저에 가로로 나타난다. line 즉, 줄의 성격을 가지고 있기 때문에 넓이 높이를 적용할 수 없다, 태그를 여러 개 출력 시 태그 사이에 공백 1칸을 포함한다는 특징이 있다.

< b >, < strong > : 글자의 모양을 굵게
글자의 모양을 굵게 표시할때 사용하는 태그로 텍스트를 강조하고 싶은 경우 사용한다.
b태그 : 글자를 단순하게 꾸미는 용도
strong태그 : 시각장애인에게 화면 낭독기를 통해 중요한 내용을 전달하는 태그

< i >,< em > : 글자를 이탤릭체로 기울임
em태그는 주위 텍스트에 비해 강조된 부부이나, 저자의 생각 등을 강조할때 사용하고 i태그는 기술용어, 외국어, 등장인물의 생각 등 주위와 구분해야하는 내용을 강조할 경우 사용한다. 크게 용도별로 구분하여 사용하지 않는다.

★< span > : 줄바꿈 없이 글자영역을 묶을 때 사용
pan태그를 이용해 글자를 묶으면 css속성을 적용하기 이전에는 디자인적으로 본문 글자와 전혀 다른 모습은 볼 수 없으나 span으로 묶인 부분을 css를 처리하면 글자를 다양하게 꾸밀 수 있고 햄버거 버튼 등 클릭하면 모양이 바뀌는 아이콘 처리를 할 수도 있고, 작은 배경요소를 코드로 처리할때도 많이 사용된다.

< dl >,< dt >,< dd > : 정의 목록 태그
정의 목록(=설명 목록)이란 이름과 값으로 구성된 목록을 말한다. 마치 사전에서 단어명과 설명이 있듯 이런 정의를 내리는 태그. 보통 정의 목록태그는 웹사이트에서 지점과 지점에 대한 설명을 나타낼때 많이 사용된다. 특히 dd태그는 여러 개를 출력하여 설명을 나열할 수 있지만 dt와 dl은 한 번씩만 쓰인다.

> 목록을 만드는 태그

순서가 있는 목록태그
순서가 있는 목록태그는 1,2,3...a,b,c처럼 순서를 나타내는 용도로 사용한다. 보통 목차에 따라 순서대로 내용을 정리할 때 사용한다. 메뉴를 나타내는 용도로 사용하지 않는다.

< ol >
< li>목록1< /li >
< li>목록2< /li >
< li>목록3< /li >
< /ol >

type의 종류
1. type="1" : 1,2,3과 같은 십진수기본값.
2. type="a" : a,b,c와 같은 영문 소문자
3. type="A" : A,B,C와 같은 영문 대문자
4. type="i" : 로마숫자 소문자
5. type="I" : 로마숫자 대문자

★순서가 없는 목록태그
웹 사이트에서 메뉴를 만드는 태그로, 순서가 없는 목록을 지정할 때 사용한다. 순서가 없는 목록을 지정할 때에는 < ul >태그를 사용하고, 출력하면 '●'이런 기호로 목록이 표시된다. 이러한 기호를 '불릿'이라고 표현한다. 만약 불릿 모양을 바꾸고 싶다면 type속성을 이용한다.

< ul >
< li >메뉴1< /li >
< li >메뉴2< /li >
< li >메뉴3< /li >
< /ul >

type의 종류
1. type="disk" : 기본값으로 '●'기호로 목록을 표현한다.
2. type="circle" : '○'기호로 목록을 표현한다.
3. type="square" : '■'기호로 목록을 표현한다.

링크를 연결하는 태그

a태그는 inlin속성을 갖는다.

< a href="링크 경로" target="페이지 연결 방식" title="링크 설명"> 글자나 이미지 < /a >

속성
1. target : 페이지가 열리는 방식을 지정하는 속성.
target="_self" : 현재 탭에서 페이지를 연결
target="_blank" : 새 탭 열기
target="_parent" : 프레임으로 나누어진 페이지 전체를 부모 프레임으로 이동

2. title = "링크 표시내용" : target="_blank"로 지정했을 경우 title속성도 함께 넣어준다. title은 링크위에 마우스를 올렸을때 뜨는 말풍선으로 링크에 대한 설명을 넣을 때 사용한다.

3. href : 링크연결 주소. url을 넣거나 html페이지끼리 연결하는 역할을 한다.

> 이미지의 설명글을 표시하는 태그
웹 표준 이전에는 이미지에 설명을 나타내기 위해 p태그를 사용했으나 html5 웹표준에서는 이미지 설명을 나타낼때 < figure >,< figcaption > 태그를 사용한다.

< figure >이미지 설명< /figure >
< img src="경로" alt="설명" />

< figure >
< img src="경로" alt="설명" />
< figcaption >이미지 설명</ figcaption >
< /figure>

> 퍼블리싱에서 이미지를 사용하는 방법
보통 이미지는 프로젝트 폴더 안에 'img' 또는 'image'라는 이름의 폴더를 만들어 모든 이미지(동영상)들을 보관하여 관리한다. 또한 이미지의 이름은 html파일 명명 규칙과 동일하게 영문 소문자로 시작하고, 간결하고 직관적인 이름으로 짓는다.

이미지 파일 저장규칙
1. 이미지를 저장할 때 반드시 웹 문서 저장법과 동일하게 소문자로 저장하고 공백이나 한글을 파일명으로 짓지 않는다.
2. 이미지 폴더는 반드시 프로젝트 폴더(=최상위 폴더)안에 있어야 한다.
3. 이미지는 용량이 크지 않은 파일을 사용한다. 해상도는 72px이며 스마트폰에서 바로 저장된 이미지는 사용하지 않는다.

< img src='이미지 경로 또는 url' alt='이미지 설명' />

절대경로
최상위 폴더 : /(=root)
폴더이름 / : ~폴더 안에
예시)
< img src='/img/이미지이름.jpg' alt='이미지 설명' />

상대경로
/ : 최상위 폴더(=root)
./ : 현재 작성하고 있는 파일의 폴더.
../ : 한 폴더 위로