728x90
728x90
기존에 자바를 공부할 때, 이클립스로 수업하던 것과는 다르게,
수업시간에 Visual Studio Code를 사용하기 시작했다.
내일 수업을 위해서 HTML의 완전 기초부터 정리해보자~
수업은, https://www.w3schools.com/
에서 진행중에 있다. (교재받으러 학원가야되는데 너무 싫다~)
< 01html >
1. HTML은 Hyper Text Markup Language의 약자다.
2. HTML은 웹 페이지를 만드는 표준 마크업 언어다.
3. HTML은 웹 페이지의 구조를 명시한다.
4. HTML은 element(요소)들로 이루어져 있다.
5. HTML element는 컨텐트를 어떻게 표시해야 하는 지
브라우저에게 알려준다.
6. HTML element는 컨텐트를 '이 것은 제목이다.',
'이 것은 문단이다.', '이 것은 링크다.'라고 표시한다.
< 02element >
#요소
1. element(요소)는 시작태그, 컨텐트, 종료태그로 이루어져 있다.
2. element(요소)는 브라우저에게 컨텐트가 어떻게 출력되어야 하는 지 알려준다.
#태그
1. 삼각괄호 안에 태그명 작성 : <태그명>
2. 삼각괄호 안에 태그명이 /로 시작하면 종료태그, 그렇지 않으면 시작태그
3. 태그는 항상 시작태그와 종료태그가 같은 이름으로 쌍이 맞아야 함.
#빈 요소(empty element)
1. 시작태그만으로 요소완성
2. 빈요소는 /가 시작 태그 끝에 작성되는 경우도 있음.
#주의할 내용
1. 요소(element)를 태그(tag)로 지칭하는 경우가 많음.
2. 빈 요소가 아닐 경우 종료태그 생략 하지 않기
3. 각 요소가 섞이면 안됨
ex) <h1>제목 제목 제목<p> 제목</h1> 문단 문단 문단 </p>
4. 태그명은 대소문자 구분이 없음.
ex) <H1>제목 제목</H1> <P>문단 문단</P>
< 03heading >
<!DOCTYPE html>
<html>
<head>
<title>제목 연습</title>
</head>
<h1>first heading</h1>
<h2>second heading</h2>
<h3>third heading</h3>
<h4>fourth heading</h4>
<h5>fifth heading</h5>
<h6>sixth heading</h6>
<p>paragraph!!!!</p>
</html>
< 04paragragh >
<!DOCTYPE html>
<html>
<head>
<title>문단 연습</title>
</head>
<body>
<h1>
문단 연습 파일
</h1>
<p>가나다라 마바사 ~~!~!~!</p>
<p>새로운 문단 가나다라 마바사</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum possimus beatae rerum dolor,
minus repellendus et minima perferendis nam necessitatibus
saepe nesciunt quisquam! Nesciunt saepe placeat quidem, esse dolorem autem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem.</p>
</body>
</html>
< 05hr >
<!DOCTYPE html>
<html>
<head>
<title>수평자 연습</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nemo facere et. Quae deserunt, culpa minima non accusamus debitis eius quos, suscipit pariatur adipisci neque, doloribus aperiam quis inventore quidem.</p>
<hr>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia, nostrum nam odio numquam accusantium, cumque rerum atque at laudantium itaque repudiandae et soluta tenetur eaque maiores beatae harum, dolore incidunt?</p>
</body>
</html>
< 06text >
<!DOCTYPE html>
<html>
<head>
<title>
텍스트 연습
</title>
</head>
<body>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, dolorem. Incidunt quis exercitationem, autem nesciunt similique eos explicabo officiis hic beatae maiores aperiam voluptates commodi sed recusandae? Id, corrupti natus.
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore ea expedita deserunt in ad. Incidunt excepturi veniam dolore quibusdam itaque, ullam tempora eum explicabo libero ipsa odit, odio officia ad!
<p>
브라우저는 텍스트의 엔터 무시
여러 스페이스는 하나의 스페이스로 만듬
</p>
<h1>
새로운 줄을 표현하는 요소 br
</h1>
<p>
브라우저는 텍스트의 엔터 무시<br>
여러 스페이스는 하나로
</p>
<p>
여러 스페이스는 로 작성
</p>
</body>
</html>
< 07pre >
<!DOCTYPE html>
<html>
<head>
<title>
pre 태그 연습
</title>
</head>
<body>
<h1>preformatted 태그</h1>
<p>
Lorem ipsum dolor sit amet.
Eos esse dolore est corrupti.
Incidunt consequatur ullam dolor repudiandae.
</p>
<pre>
Lorem ipsum dolor sit amet.
Ducimus iste cum aspernatur porro?
Eligendi vitae aliquam repudiandae magni?
</pre>
</body>
</html>
< 08emmet1 >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>emmet 연습1</title>
</head>
<body>
<h3>여러 요소 : *n </h3>
<!-- p*3 -->
<p>hello</p>
<p>world</p>
<p>html</p>
<h3>요소안의 요소 : 태그명>태그명</h3>
<!-- p>span -->
<p><span></span></p>
<h3>주석은 ctrl + /</h3>
<hr>
<h3>lorem을 갖는 3개의 p 요소를 만들기</h3>
<!-- p*3>lorem -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolores minima perferendis error, beatae vitae quibusdam numquam nihil natus fuga tenetur dolorum corrupti doloremque nam temporibus, quaerat sapiente nobis cupiditate.</p>
<p>Perspiciatis, sed. Nisi quod aliquid laborum! Sit, atque quae nam iure ducimus minus nostrum totam est excepturi reprehenderit vero voluptatem maiores similique cupiditate a doloribus libero repudiandae aliquid! Nisi, saepe?</p>
<p>Blanditiis repudiandae dolorum consequuntur quidem, excepturi amet illum iusto, minus ad beatae molestiae laborum molestias cum. Maiores, magni ab praesentium, nobis facilis earum repellendus consectetur reiciendis a esse asperiores nihil!</p>
</body>
</html>
< 09comment >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>주석 연습</title>
</head>
<body>
<!-- h1>lorem3 -->
<h1>Lorem, ipsum dolor.</h1>
<p>주석은 <!-- -->에 작성</p>
<p>단축키는 ctrl + / </p>
<p>코드보기하면 보이므로 중요한 내용을 작성하지 말 것</p>
<!-- 우리집 비밀번호 9999 -->
</body>
</html>
< 10body >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>
body 요소
</title>
<p>문단이 여기 있으면 안됨</p>
</head>
<p>Lorem, ipsum dolor.</p>
<body>
<h1>body 요소</h1>
<p>브라우저에 표시되는 내용 제목(h1~h6), 문단(p), 표(table) 등을 작성하는 요소</p>
<p>하나만 있으면 됨</p>
<p>만약에 생략하면 자동으로 하나 생김
</body>
</html>
<p>Lorem ipsum dolor sit amet.</p>
728x90
'수업 복습하기 > HTML + CSS' 카테고리의 다른 글
| CSS [기초] - day02(오후) (0) | 2021.10.07 |
|---|---|
| CSS [기초] - day02(오전) (0) | 2021.10.07 |
| CSS [기초] - day01 (0) | 2021.10.06 |
| HTML [기본] - day02(마무리) (3) | 2021.10.06 |
| HTML [기초] - day01(오후) (0) | 2021.10.05 |
