1.웹을 구성하는 요소
(1) 프로그래밍이란?
- 컴퓨터와 소통하는 방법을 의미
- 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정가능
- 웹 개발을 하기 위한 언어로 브라우저와 소통
(2) 웹 사이트 제작 시 고려해야 할 사항
1. 웹 표준 : 웹사이트를 작성할때 따라야하는 공식 표준이나 기술 규격
2. 웹 접근성 : 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게하는 방식
3. 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 자공하도록 하는 기법
2. HTML 기본 태그
(1) HTML이란 ? : 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할때 사용되는 언어
(2) HTML 태그 구성요소
ex) <열린 태그 속성="속성값">컨텐츠 </닫힌태그>
-
태그명
HTML이 갖고 있는고유의 기능 => <열린 태그></닫힌 태그> -
컨텐츠
열린 태그와 닫힌 태그 사이에 있는 내용물 -
속성
HTML 태그가 갖고 있는 추가 정보 -
속성값
어떤 역할을 수행할지 구체적인 명령를 진행하는것
(3) HTML의 문서 기본 구조
<!DOCTYPE html>: HTML5라는 신조어로 문서를 선언하는 태그
<html>...</html>:HTML 문서의 시작과 끝을 의미하며 모든 HTML 태그들은 <html>태그 안쪽으로 입력
<head>...</head>: 웹사이트의 간단한 요약정보를 담는 영역이고 웹사이트에서 노출되지 않는 정보
<body></body>: 웹사이트에서 눈에 보이는 정보를 담는 영역으로, 이미지나 텍스트 처럼 출력되는 정보
<meta charset="UTF-8>: character setting의 약자를 나타내는 문자코드로, 모든 문자를 웹 브라우저에서 깨짐없이 표시하겠다는 의미
<tittle>...</tittle>: 웹사이트 탭에 나타나는 제목을 적는 태그
(4) 태그의 종류
< img태그>
ex) <img src="logo.png" alt="회사 로고">
- <img태그> : 정보성을 갖고 있는 이미지 를 삽입, 닫힌 태그 없음.
- src 속성 : 삽입할 이미지 파일 경로
- alt 속성 : 웹사이트가 이미지르 출력 못했을 경우, 텍스트 정보로 대체
<h 태그>
ex) <h1>Hello world</h1> <h2>Hello world</h2> <h3>Hello world</h3>
=>heading의 약자로 제목이나 부제목을 표현
=>숫자값이 클수록 폰트 사이즈가 작음. 즉 숫자는 정보의 중요도를 나타냄
=><h1 태그>는 가장 중요한 정보를 담으므로 하난의 html 문서에서 한번만 사용됨
< p 태그>
ex) <p> Nice to meet you </p>
=>paragraph의 약자로 본문 내용을 표현
=>웹사이트의 중요 정보를 담는 태그
=>나타내고자 하는 내용을 열린 태그와 다힌 태그 사이에 입력
<ul태그>
ex) <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul>
실행 결과
- 메뉴1
- 메뉴2
- 메뉴3
=> Unordered list의 약자로, 순서가없는 리스트 생성되고 메뉴 버튼을 만들 때 사용되는 태그이다.
3. 구조를 잡을 때 사용하는 태그
(1)HTML 태그 구성요소 : 크게 목차, 본문 부록이 있다.
(2) 목차
<header,nav 태그>
ex) <header> <nav> ... </<nav> </header>
- header 태그 : 웹사이트의 머리글을 담당하는 태그
- nav 태그 : 메뉴버튼을 담는 공간(navigation) < ul >,< li >,< a >와 함께 사용
(3) < main > 태그
ex) <main role="main"> <article> ... <article> </main>
=>문서의 주요내용을 담는 태그
=>IE(Internet Explorer)는 지원하지 않으므로 role="main"속성 필수 입력!!
(4)< article > 태그
ex) <main role="main"> <aricle> <h#>...</h> ... </article> </main>
=>문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그
=>태그 내에 구역을 태표하는 <h#>태그가 존재해야함.
(5) < footer > 태그
ex) <footer> <div> <p>주소:~</p> <p>이메일:~</p> <p>전화번호:~</p> </div> <div> <p>사업자등록번호</p> </div> </footer>
=>가장 하단에 들어가는 정보를 표기할때 사용
- < div > : 임의의 공간을 만들때 사용
4. HTML 태그의 두가지 성격
(1) Block 요소
ex) <p> Hello elice </p> => Hello elice <p> Hello elice </p> => Hello elice <p> Hello elice </p> => Hello elice
=> y축 정렬 형태로 출력(줄바꿈 현상이 나타남) 공간을 만들수 있고, 상하배치 작업이 가능하다.
---
(2) Inline 요소
```
ex) <a> Bye Elice</a> =>Bye Elice Bye Elice Bye Elice
<a> Bye Elice</a>
<a> Bye Elice</a>=>x축 정렬 형태로 출력(한줄에 출력) 공간을 만들수 없고, 상하 배치 작업 불가능.
