※ HTML 코드는 크게 두 가지로 나눌 수 있다.
1) BOX : 아이템들을 잘 정리할 수 있도록 도와줌 (섹셔닝)
대표적인 종류)
header, nav, aside, main, footer, section, article (재사용이 되는 아이템을 그룹화), div (아무곳에서나 쓸 수 있음, 묶어서 스타일링이 가능하고 굉장히 많이 쓰임), span, form 등
2) ITEM : 사용자들이 볼 수 있는 아이템
a (링크를 걸 수 있는 태그), button, input, label, img, video, audio, map, canvas, table
==> ITEM도 두 가지로 나눌 수 있다.
1) Block : 한 줄에 하나 차지
2) Inline : 공간이 허용하면 배치가 가능
※ Attributes (속성)
<a href="https://google.com" target=_blank>click</a>href ~와 target~이 a태그의 속성이다.
<p class="editor-note">My cat is very grumpy</p>CSS애서는 HTML의 class를 통해 원하는 클래스들을 어떻게 꾸밀지 정하게 된다.
※ 사용자에게 보여지지 않는 BOX와 사용자에게 보여지는 ITEM 실습코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Box vs Item-->
<!-- BOX -->
<header></header>
<footer></footer>
<section></section>
<div></div>
<!-- ITEM-->
<h1>H1</h1>
<button>Click Me!</button>
</body>
</html>
※ 많이 쓰이는 주요 태그들
1) a 태그
<a href="https://google.com" target=_blank>click</a>href => 링크하고 싶은 주소를 적는 곳
target => 어느곳에다가 이 페이지를 열것인지 설정 (target 사용법을 잘 몰라도 mdn 사이트에 접속하면 target등 여러 태그들의 사용법(예제, 속성값)을 알 수 있다.)
2) 텍스트 관련 태그
<p>태그 : 문단을 정의할때 쓰는 태그
<b>태그 : 볼드체 사용, Inline 태그 (bold체가 다음 줄로 넘어가지 않으므로)
<span>태그 : 글자의 배경색 지정, Inline 태그 (배경색이 지정된다고 해서 그 문장이 다음 라인으로 넘어가지 않기 때문)
<div>태그 : BLOCK태그, <div>로 지정하면 해당 문장은 다음 줄로 넘어감
3) 리스트 관련 태그 (ol vs ul)
※ ol관련 꿀팁!
-> 리스트를 3개 만들고 싶은데 일일이 입력하면 번거로움 이때!
ol>li*3 + TAB 키누르면 (ul, li 다 포함)
<ol>
<li>apple</li>
<li>pineapple</li>
<li>tomato</li>
</ol>
이렇게 자동 완성이 됨!
<ol>태그에 대해 더욱 다양한 속성값을 보고 싶다면 mdn사이트에서 알아보자
※ 결과
<ol type="i">
<li>alpple</li>
<li>pineapple</li>
<li>tamoto</li>
</ol>
※ 결과
<ul>
<li>Hello</li>
<li>world</li>
<li>hehe</li>
</ul>
※ 결과
4) Input 태그
사용자에게 입력을 받는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Input-->
<label for="">Name:</label>
<input id="input_name" type="text">
</body>
</html>
※ 결과
Label 태그와 input태그는 모두 Inline태그이다.
Input태그는 한 페이지 내에서 굉장히 많이 사용되기 때문에 id를 이용해서 개인 식별자를 이용하는것이 좋다. 그리고 input태그에도 아주 다양한 속성들이 존재하니 mdn사이트에서 찾아보고 연습해보자!
'웹 개발 공부 : Front-end' 카테고리의 다른 글
| 프론트엔드 #6 CSS - 3 (0) | 2020.08.13 |
|---|---|
| 프론트엔드 #5 CSS - 2 (0) | 2020.08.04 |
| 프론트엔드 #4 CSS - 1 (0) | 2020.07.31 |
| 프론트엔드 #2 자주 사용하는 웹페이지 분석해보기 (0) | 2020.07.23 |
| 프론트엔드 #1 HTML에 대해서 (0) | 2020.07.22 |
