흰 스타렉스에서 내가 내리지

[HTML] HTML 기본 본문

HTML&CSS

[HTML] HTML 기본

주씨. 2022. 1. 13. 19:47
728x90

# <head></head>


헤드는 사용자에게 보여지는 ui적인 요소가 전혀 없고, 구글에서 검색할 때 나오는 타이틀이나 부가설명 그리고 북마크 추가할 때 나오는 제목이나 아이콘들을 정의한다. css, js파일 연결도 이 곳에서 한다.

 

# Box형 태그와 Item형 태그

Box형 태그 Item형 태그
header, footer, nav, asidde, main, section, article, div, span, form, ...  a, button, input, label, img, video, audio, map, canvas, table,...
  • article 은 반복되고 재사용이 가능한 것들을 묶는데 쓰인다.
  • div는 보통 묶어서 스타일링을 하고 싶을 때 쓰인다.

# Block과 Inline

Block Inline
한 줄에 오직 자신 하나
ex ) div		 공간이 허용하면 요소 바로 옆에 배치가 가능하다. 
ex ) span

 

# label과 input

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <label for="name">Name : </label>
    <input id="name" type="text">
  </body>
</html>

<label>의 "for" attribute와, <input>의 "id" attribute에 주목하자.

이 label은 id="name"의 input을 위한 것이라고 지정하는 역할을 한다.

 

# 알면 간편한 단축키

ol>li*3  +  tab

여기에서 탭을 누르면!

 

짠

 

div.container>div.item.item${$}*10  +  tab

여기서 탭을 누르면
짠

 

 

 

 

 

저작자표시

'HTML&CSS' 카테고리의 다른 글

[CSS] 기본 css 코드  (0) 2022.01.16
[HTML] Emmet 단축어  (0) 2022.01.14
[CSS] CSS의 flexbox  (0) 2022.01.14
[CSS] CSS 레이아웃 - block, inline, position 4종류  (0) 2022.01.14
[CSS] CSS 기본  (0) 2022.01.13
'HTML&CSS' Related Articles more