티스토리 뷰
웹 web
사용자에게 보여지는 페이지(프론트)
웹브라우저에 명령을 내리는 html
웹 개발할 때 필요한 건?
- html - 구조
- css - 디자인(보기 좋게)
- javascript - 동적인 이벤트/기능 추가
웹페이지 만드는 도구
- html 언어는 text 기반이기 때문에 text 쓸 수 있으면 뭐든지 가능. (메모장, 이클립스 등)
HTML
- Hyper Text Markup Language : Hyper Text(연결 기능 있는 문서)를 만들어주는 언어
- 웹 페이지 구조를 설명, 태그로 구성 - 태그는 브라우저에 컨텐츠 표시하는 방법을 알려줌
- 구조상 상대적으로 바깥에 있는 걸 상위(부모)구조라 함. <-> ~하위(자식)구조
<tag> 명령
필수 명령 (시작과 종료의 한 쌍으로 이루어짐)
<html> 웹페이지 만들자~ 선언, 모든 명령이 이 안에 들어가야 함. 대장이다~
<head> 웹페이지는 head, body 두 가지로 나뉨, 머리말 부분 - 사용자에게 보이지 않는 부분
<title> </title>
</head>
<body> 본문 - 사용자에게 보이는 부분
</body>
</html>
<!DOCTYPE html> <!--버전 알려주는 부분으로 필수요소는 아님 / 현재는 html5 버전.
원칙은 상관없지만 대부분 소문자, 여기서만 주로 대문자로 쓰임-->
<html>
<head>
<title> html 수업 첫 날 </title>
</head>
<body>
<h1>html 수업 첫 날</h1><!--제목 글자 태그
br없음, 위아래 한 줄 공백 생김, 사이즈 크고 볼드체-->
<hr>
<h2>html 기본 설명</h2>
<p>html은 웹페이지를 만들어주는 프로그램 언어.<br>
웹페이지의 구조를 담당.<br>
명령(tag)으로 구성.<br>
tag는 일반적으로 각괄호 안에 위치, 시작tag와 종료tag 한 쌍으로 이루어짐.<br>
원칙상 대소문자 구별은 없으나 소문자로 작성.<br>
저장 시 확장자는 *.htm, *html로 가능.
<!--문단 한 덩어리로 구성, 위 아래로 비어짐-->
</p>
<hr>
<h2>html을 구성하는 필수 태그들</h2>
<pre>
html ----- 웹페이지의 시작
head ----- 웹페이지의 머리말 시작
title ... /title ----- 웹페이지의 대표제목
/head ----- 웹페이지의 머리말 끝
body ----- 웹페이지의 본문 시작
/body ----- 웹페이지의 본문 끝
/html ----- 웹페이지의 끝
</pre>
<hr>
<h2>본문(body) 내에 들어가는 태그들</h2>
<p>
줄을 바꾸는 br<br>
문단을 구성하는 p<br>
제목 글자를 나타내는 hn(1~?)<br>
수평선을 나타내는 hr<br>
공백을 소스 그대로 나타내는 pre (고정폭글꼴)<br>
</p>
<hr>
<h3>제목 글자를 나타내는 hn(1~6)</h3>
<h1>제목 글자 h1태그 입니다.</h1>
<h2>제목 글자 h2태그 입니다.</h2>
<h3>제목 글자 h3태그 입니다.</h3>
<h4>제목 글자 h4태그 입니다.</h4>
<h5>제목 글자 h5태그 입니다.</h5>
<h6>제목 글자 h6태그 입니다.</h6>
<h7>제목 글자 h7태그 입니다?</h7>
<h8>제목 글자 h8태그 입니다?</h8>
<hr>
<h4>풀꽃</h4>
<pre> 나태주</pre>
<p>
자세히 보아야 예쁘다<br>
오래 보아야 사랑스럽다<br>
너도 그렇다<br>
</p>
<hr>
</body>
</html><html>
<head>
<title>html 글자 관련 태그들</title>
</head>
<body>
<hr>
<h1>html 글자 관련 태그들</h1>
<p>
<b>볼드</b>체 - b <b>bold</b> <br>
<i>이탤릭</i>체 - i <i>italic</i> <br>
<strong>중요하다는 뜻에서 볼드</strong>체 - strong <strong>strong</strong> <br>
<em>강조한다는 뜻에서 이탤릭</em>체 - em <em>em</em> <br>
<small>글자 크기를</small> 작게 - small <small>small</small> <br>
<sup>윗</sup>첨자 - sup <sup>sup</sup> <br>
(ex) 10cm<sup>3</sup> , 300km<sup>2</sup> <br>
<sub>아랫</sub>첨자 - sub <sub>sub</sub> <br>
(ex) H<sub>2</sub>O, CO<sub>2</sub>, O<sub>2</sub> <br>
<mark>형광펜</mark>효과 - mark <mark>mark</mark> <br>
</p>
<p>
<!--감싸는 형태에서 차이-->
1. <mark><b>mark bold</b></mark> (O) <br>
2. <b><mark>mark bold</b></mark> (X) <br>
3. <b><mark>mark bold</mark></b> (O) <br>
4. <mark><b>mark bold</mark></b> (X)
</p>
</body>
</html>
'배운 것 기록 > web' 카테고리의 다른 글
| [html] 특수 문자 태그, 목록 (0) | 2022.05.02 |
|---|---|
| [js] 내장객체 window, location, history (0) | 2022.05.02 |
| [js] 자바스크립트 코드 넣는 방법 (0) | 2022.05.01 |
| [js] 변수, 함수 (0) | 2022.04.29 |
| jsp (0) | 2022.04.27 |
댓글