html 학습 일지 - 1일차

국비교육 1일차 학습 내용 정리

교재 : Do it html5+CSS3 웹 표준의 정석

---

[chapter 01]

1. 웹 표준, 크로스브라우징, 웹 접근성

- 웹 표준

: 웹에서 사용되는 표준 기술이나 규칙을 의미

- 크로스브라우징

: 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작)을 줄 수 있도록 제작하는 기술 방법

- 웹 접근성

: 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함한, 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법

 

2. 웹에 사용되는 이미지

- Raster(.jpeg , .gif, .png)

: 픽셀들이 모여 만들어진 정보의 집합, 레스터 이미지라고도 부름

: 비트맵 방식으로 정교하고 다양한 색상의 자연스러운 표현

: 확대/ 축소 시 계단 현상, 품질 저하

 

- Vector (.svg)

: 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지

: 확대/축소에서 자유로움, 용량 변화가 없음

: 정교한 이미지를 표현하기가 어려움

 

3. 상대경로와 절대경로

---

[chapter 02. HTML 기본 다지기]

1) HTML5 기본 구조

 

- <!DOCTYPE>

: 문서의 유형을 지정하는 선언문

: 만약 웹 문서에 선언하지 않으면 브라우저 별로 알아서 해석하게 됨

 

- <meta>

: 웹 페이지 정보 태그

: 웹 페이지에 관한 정보를 제공하는 태그로 웹 페이지 표현에는 영향을 미치지 않음

: 검색 키워드, 문자셋, 페이지 자동 이동 등의 기능을 하는 태그

: <meta charset = "UTF-8">을 해여 웹 페이지가 한글로 보여짐

 

* 태그 입력 방법

1. 태그(요소)는 쌍을 이뤄서 종료해야 한다.

2. 시작 태그와 종료 태그로 구성된 태그도 있고 단독 태그도 있다.

3.태그와 속성은 소문자로 입력한다

4. 속성 값에는 큰 따옴표를 붙여야 하고, 속성과 속성 값을 같이 사용해야 한다.(생략 불가능)

 

- 단독 태그 (빈요소)

<br> <hr> <img> <input> <area> <meta> <link>

- 주석

<!-- 주석 -->

 

2) vs code 태그 입력 방법

1. 단어를 입력하고 tap 누른다

2. 복잡한 구조를 입력할 때는 부모 요소 먼저 쓰고 ">" 자식 요소 구조로 순서대로 입력

3. 동일한 구조를 여러개 입력할 때는 *을 사용

예) ul>li*4 는 list가 4개가 생성됨

예) ul>li*4>a

 

3) link 태그로 css 외부 문서 연결

html에서 head에서 title 아래 link 태그를 걸어서 css와 연결

 

4) 시멘틱 태그로 구조

-<header>

: 웹사이트의 로고와 메뉴가 들어가는 영역

-<nav>

: 메뉴

-<section> 

: 비중이 높은 본문

-<article>

: 비중이 낮은 본문

 

- <footer>

:웹 사이트의 하단 정보(주소, 연락처, 약관, 패밀리사이트 등)

 

5) 블록 요소와 인라인 요소

- 블록 요소 (태그)

: 구조를 담당하는 태그

: 블록 요소는 줄 바꿈이 일어난다.

: 여러개를 나란히 사용할 경우 세로 정렬의 형태로 보인다.

: 공간에 대한 속성 값을 처리할 수 있다. 예) width, height

: 블록 요소 안에 블록 요소와 인라인 요소를 포함 할 수 있다.

<div> <p> <ul> <li> <table> <header> <footer> <section> 
<article> <aside> <hn> <form> <nav> 등등...

 

- 인라인 요소(태그)

: 내용을 담당하는 태그

: 인라인 요소는 줄 바꿈이 일어나지 않는다.

: 여러개를 나란히 사용할 경우 가로 정렬의 형태로 보인다.

: 공간 값에 대한 속성 값을 처리할 수 없다. 예) width, height

: 인라인 요소 내에 블록 요소를 포함 할 수 없다.

<span> <a> <img> <address> <input> 등등...

 

[chapter 03. 텍스트 관련 태그들]

 

1) hn 태그

: h1~h6(h1이 가장 큰 제목, h6 제일 작은 제목)

 

2) p 태그

: 웹 사이트의 구조를 담당하는 태그

: 글, 이미지, 링크 등 인라인 구조를 넣어서 만들 수 있음.

: 구조인데 다른 구조 태그 보다는 규모가 작은 구조로 주로 사용이 된다.

: 문단을 위 아래를 분리하여 block 형식으로 공간을 분할

 

3)br 태그

: 닫는 태그가 없는 단독 태그

: 줄 바꿀 위치에 사용하면 줄 바꿈이 일어난다

 

4)hr태그

: 수평 줄을 삽입할 때 사용

: css를 이용하여 선의 길이 색상, 두께를 수정할 수 있다.

 

5) blockquote 태그

: 블로그나 사이트의 글을 인용하여 사용할 경우

: 반드시 블록 요소만 정의할 때 사용

 

6) strong 태그

: 내용 강조하여 표시하고자 할 때 사용

<b>

<i> : 비스듬히

<u> 

<em> : 비스듬히

 

7) span 태그

: 문단을 줄 바꿈 없이 인라인 형식으로 공간을 분할

 

*<div> 태그와 비교

-div태그는 한 페이지 내에서 공간을 분할

- div태그는 페이지 공간을 분리해주는 태그이기 때문에 문단을 분리해주는 p태그와 span태그 보다는 커다란 태그

(div태그 안에 p태그 삽입은 가능하지만 그 반대는 불가하다)

 

* 예를 들어 같은 문장3개를 각각의 태그로 사용해보면,

div를 사용하면 딱딱 이어서 문장이 생성(한줄씩)

p태그는 위아래 공간이 생김(문장마다 서로 공간이 생김)

span태그는 문장 단위가 아닌 단어 단위로 공간이 분할 되어 생성(3문장이 이어져서 나옴)

 

8) 목록 태그

: ul태그는 순서가 없는 목록

: ol태그는 순서가 있는 목록

: 실제 리스트 내용 입력 시에는 <li>태그</li> 사용

: 왼쪽 들여쓰기 기능으로 보인다.

: 웹 사이트에서 메뉴 만들 때 사용 함

: 목록 안에 목록을 2 중으로 만드는 것도 가능