오후 수업시간에 배운 내용들도 정리하기, 내일은 오늘 html의 기초가 끝났으니,
기본적인 내용을 진행한다고 강사님이 말씀하셨다~
순전히 내가 공부한 것을 정리하기 위한 용도!
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
수업할 때, 앞으로 코딩 수업 할 때 참고로 하면 좋을 것 같다고 하신 페이지
< 11head >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>head 요소</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>head 요소는 브라우저에게 전달하는 부가 정보를 작성함.</h1>
<p>보통 하나만 작성</p>
<p>생략해도 하나 만들어지지만 생략하지 않기</p>
</body>
</html>
< 12html >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>html 요소</title>
</head>
<body>
<h1>html요소</h1>
<p>head, body요소를 감싸는 root 요소</p>
<p>하나만 있으면 됨</p>
<p>생략해도 만들어지지만 생략하지 않기</p>
</body>
</html>
< 13doctype >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>doctype</title>
</head>
<body>
<h1>doctype</h1>
<p>doctype은 브라우저에게 문서에서 사용한 태그, 속성의 버전을 표시</p>
</body>
</html>
< 14attribute >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>attribute 연습</title>
</head>
<body>
<h1>attribute</h1>
<!-- ul>li*5 -->
<ul>
<li>속성(attribute)는 element의 부가정보이다.</li>
<li>시작 태그에 작성</li>
<li>하나의 요소에 여러개 작성될 수 있음</li>
<li>이름/값 쌍으로 작성 : name="value"</li>
<li>값은 따옴표(작은/큰)로 표시</li>
<li>값은 생략 가능</li>
</ul>
<hr>
<h1>작성시 주의할 점</h1>
<!-- ul>li -->
<ul>
<li>값은 큰/작은 따옴표로 표시할 수 있는 데, 만약 값에 작은 따옴표를 쓸 땐 큰 따옴표로 묶어야함.
또는 값에 큰 따옴표가 있다면 작음 따옴표로 묶어야 함.
</li>
<li>attribute명은 대소문자 구분없이 작성 가능. 보통 소문자로 작성됨.</li>
</ul>
</body>
</html>
< 15Satribute >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>
attribute 연습
</title>
</head>
<body>
<h1>attribute</h1>
<img src="game.jfif" alt="오징어게임">
<hr>
<img src="gaem.jfif" alt="오징어게임">
<hr>
<img src="game.jfif" width="100">
<hr>
<img src="game.jfif" width="100" height="300">
<hr>
<img src="game.jfif" alt="오징어게임" title="오징어게임 포스터">
<hr>
<a href="https://www.daum.net">다음</a>
<hr>
<a href="https://www.google.com" title="구글로 이동">구글</a>
<hr>
<!-- a>img -->
<a href="https://www.netflix.com/kr/"><img src="game.jfif"></a>
<hr>
<!-- 값에 따옴표가 있을 경우 -->
<img src="game.jfif" title="it's poster">
<hr>
<img src="game.jfif" title='my number is "456"'>
</body>
</html>
< 16entity >
<!DOCTYPE html>
<!-- html>head>title^body -->
<html>
<head>
<title>html entity</title>
</head>
<body>
<h1>entity</h1>
<h2>공백</h2>
<p>Lorem ipsum dolor sit amet.</p>
<h2>angle bracket</h2>
<p><br>은 새로운 줄이다.</p>
<p><br>은 새로운 줄이다.</p>
<hr>
<h2>연습</h2>
<p>¼ 4분의 1기호</p>
<p>&lt;</p>
<p><br></p>
<p><h1></p>
<p><hr></p>
</body>
</html>
+) 모르는 기호들은, 인터넷에 html로 찾고싶은 것들 검색해서 찾으면 된다~
< 17vscode-snippet >
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://git.io/JVYYN">코드 스니펫 코드</a>
</body>
</html>
위에 링크를 눌러서, 나오는 부분은 file - preferences - user snippert에 등록했더니,
{ // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "my snippet": { "prefix": "aa", "body": [ "<!DOCTYPE html>", "<html>", "<head>", "\t<title>$1</title>", "</head>", "<body>", "$0", "</body>", "</html>" ] } }
aa를 입력하면, 기본적으로 사용하는 문구들을 자동으로 등록하게 되었다. 정말 재밌고 신기해~
'수업 복습하기 > 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 |
