1. 웹을 구성하는 요소
1. HTML
Hyper Text Markup Language. hyper text는 텍스트를 뛰어넘는다는 뜻인데 문서간 이동을 뜻한다. Markup language는 열고 닫는 태그로 이루어진 언어를 뜻한다. 웹 브라우저에게 내 컨텐츠 표현을 명령하는 정보 또는 설계도라고 할 수 있다.
2. CSS
디자인 또는 스타일링을 나타낸다. HTML, XHTML, XML같은 문서를 꾸민다.
3. Javascript
웹에서 기능과 효과를 넣어 생동감을 준다.
2. HTML 기본 태그
1.HTML 태그의 구성 요소
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>태그 명
HTML이 가지고 있는 고유의 기능
컨텐츠
열린 태그와 닫힌 태그 사이에 있는 내용
속성
HTML 태그가 갖고 있는 추가 정보
속성값
어떤 역할을 수행할지 구체적인 명령을 진행
2. HTML의 기본 구조
<!DOCTYPE html> <!--HTML5 문서를 선언하는 태그-->
<html> <!--HTML문서의 시작과 끝. 모든 HTML태그는 이 안쪽에 입력-->
<head> <!--웹사이트의 요약 정보를 담는 영역으로 사이트에 노출 안됨-->
<meta charset="UTF-8"><!--문자코드. 모든 문자를 깨짐 없이 표시-->
<title>title</title> <!--웹사이트 탭에 나타나는 이름을 적는 태그-->
</head>
<body> <!--웹사이트에서 눈에 보이는 정보를 담는 영역. 이미지나 텍스트-->
</body>
</html>html의 기본적인 구조이다. 이 구조에 살을 덧붙여 웹사이트를 만들게 된다.
3. 대표적인 태그
a
💻코드
<a href = "https://www.naver.com" target = "_blank"> 네이버 </a>🎁결과
href 속성을 통해 링크를 지정하고
target의 속성값을 지정해 어떤 방식으로 페이지로 이동할지 결정할 수 있다.
target의 default값은 _self로 링크가 위치한 창에서 그대로 링크페이지를 오픈한다.
img
💻코드
<img src="logo.png" alt="로고" width="100px" height="30px">🎁결과
이미지를 삽입하며 닫힌 태그가 없다. src에 이미지 파일의 경로를 지정한다. alt는 웹 표준에 맞추기 위해 반드시 있어야한다. 이미지가 로드되지 않았을 시에 위치를 표기, 시각장애인용 프로그램에 사용된다. width, height로 크기 조절 가능
h
💻코드
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>🎁결과
Hello World
Hello World
Hello World
제목, 부제목을 표현한다. 숫자가 클수록 사이즈가 작다. h1태그는 가장 중요한 정보를 담기 때문에 하나의 html 문서에서 한 번만 사용된다.
p
💻코드
<p>Glad to meet you!</p>🎁결과
Glad to meet you!
Paragraph의 약자로 본문 내용을 표현한다. 웹사이트의 중요 정보를 담는 태그
ol, ul, li
💻코드
<ol>
<li>펩시</li>
<li>파인애플피자</li>
<li>지코</li>
</ol>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">도서</a></li>
<li><a href="#">마이페이지</a></li>
</ul>🎁결과
- 펩시
- 파인애플피자
- 지코
ol은 Ordered list의 약자로 순서가 있는 리스트를 생성한다. ul은 순서가 없는 리스트를 생성한다. <li>태그를 통해 항목을 나열할 수 있다.
3. 구조를 잡을 때 사용하는 태그
1. HTML 태그 구성 요소
header
<header> <!-- 상단 영역 -->
<img src="logo.png" alt="로고">
<nav> <!-- 메뉴 버튼 영역 -->
<ul>
<li>홈</li>
<li>도서</li>
<li>식품</li>
<li>마이페이지</li>
</ul>
</nav>
</header><header>는 웹 사이트의 머리글을 담는 공간이다. 주로 nav에 ul,ol등의 태그로 메뉴를 나열하는데 사용한다.
main
<main role=“main"> <!-- 본문 영역 -->
<article> <!-- 정보 영역 -->
...
</article>
</main><main>은 문서의 주요 내용이 담기며 IE에선 지원하지 않기 때문에 role="main"속성을 반드시 입력해야 한다.
footer
<footer>
<div>
<h3>Creators</h3>
<a target="_blank" href="">크리에이터</a>
</div>
<div>
<h3>네이버 정책 및 약관</h3>
<ul>
<li><a target="_blank" href="">회사소개</a></li>
<li><a target="_blank" href="">인재채용</a></li>
</ul>
</div>
</footer><footer>는 웹 페이지의 가장 하단에 보통 회사의 정보가 들어간다.
4. HTML 태그의 두 가지 성격
block
항상 새 줄에서 시작
브라우저가 자동으로 margin을 더함
width를 지정하지 않으면 최대로 사용함
대표적으로<p>,<div>가 있음
inline
새로운 줄에서 시작하지 않음
가로폭을 필요한 만큼만 차지함
대표적으로<span>,<a>가 있음
