오늘 알아볼 것은
- 웹
- 서버/클라이언트
- HTML기본구조
- 제목/본문태그이다.
오늘은 HTML의 기본구조를 알아볼 것이다.
1. 웹 사이트
정적 : 정보 제공 web(알바몬-> 알바정보), 기업홍보 web -> HTML+CSS
동적 : 쇼핑몰, 티켓구매 -> HTML+CSS+JS
웹사이트에는 정적 사이트와 동적 사이트가 있다.
정적은 주로 정보 제공에 쓰이며, HTML과 CSS로 만들어지고, 예로는 알바정보를 알아보는 알바몬 등이 있다. 동적은 그와 반대로 구매등 행동이 이루어지는 사이트에 쓰이며, HTML+CSS+JS로 만들어지고(어려움), 예시로는 옷을 구매하는 쇼핑몰 사이트가 있다.
2. 서버, 클라이언트
서버 : 인터넷에 연결된 computer
클라이언트 : 사용자가 사용하는 PC, 스마트폰 등
태그 사용법
< > - 여는 태그 : < >
- 닫는 태그 : </ >
※열었으면 꼭 닫아줘야 함.※
태그란 <> 이런 꺾쇠로 이루어져 있고 보통 여는 태그야 닫는 태그 두쌍으로 이루어져 있으며, 태그를 열었다면 꼭 닫아줘야 한다. 하지만 닫는 태그가 존재하지 않는 <br>태그등이 존재하므로 모든 태그에 닫는 태그가 존재하는 것은 아니다.
3.HTML 기본구조
<DOCTYPE>
→ 컴퓨터 상에 HTML 문서임을 알리는 태그
<html>
→code작성 시작 알리는 태그
<head>
→웹사이트를 해석하기 위한 정보를 담는 태그이다. ※ 웹상에는 출력되지 않는다.
<title>
→tap부분 출력 문구이다.
ex) 아래의 Google 처럼 탭부분에 출력될 문구를 말함.
<body>
→여기부터는 전부 웹상에 출력되는 것들을 담는 태그이다.
<h1>
→제목태그이다. 아래에서 자세히 다룰예정이다.
<p>
→ 문장(단락)태그이다. 아래에서 자세히 다룰예정이다.
위에 보이는 사진은 보통 html을 시작할때 쓰이는 태그들이다.
하지만 !와 tab을 누르면 자동완성된다.
4.태그
시맨틱 태그
⊙ 정의) 이름만 봐도 의미를 알수 있는 태그.
<예시>
<P> </P> : paragraph(단락)
<a> : anchor(닻) -> 하이퍼링크
<header> </header> ----> 제목
<footer> </footerr> --------> 웹 가장 하단 관련 정보
<main> </main> ----------> 중요정보를 묶는것
<section> </section> -----> main 정보 설명 하는 것, 본문 내용중에서 구분
제목 태그
→ 본문 글씨보다 크고, 강조.↑ 글자두께 ↑
<h1>제목</h1> 크고
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6> 작음
실행화면
본문 태그
→ web 상에서 글을 작성할 때 기본적으로 사용하는 tag
<p> </p> : 문장의 단락(문장을 입력할때 사용) -> enter 키 사용X
실행화면
enter 키처럼 사용하는 방법
<br> : Enter 키 -> 여는 태그만 있어도 다른 문장 또는 tag에 영향을 주지않기 때문에 닫는 태그가 없이 사용된다.
'프로그래밍 수업 정리 HTML' 카테고리의 다른 글
| HTML 프로그래밍 3/30 여섯번째(text/textarea태그,select, datalist, button태그) (0) | 2021.04.05 |
|---|---|
| HTML 프로그래밍 3/23 다섯번째(submit/reset과 button 차이) (0) | 2021.03.25 |
| HTML 프로그래밍 3/17 네번째(폼,인풋,체크박스) (0) | 2021.03.22 |
| HTML 프로그래밍 3/16 세번째(표, 행/열합침, 하이퍼링크) (0) | 2021.03.19 |
| HTML 프로그래밍 3/4 두번째(글씨관련태그, 목록) (2) | 2021.03.18 |
