8일. HTML(7) - 여러태그들, 선택자들(태그, 아이디, 클래스)

수업 일지/HTML, CSS, Flex, Grid

8일. HTML(7) - 여러태그들, 선택자들(태그, 아이디, 클래스)

NayC 2021. 3. 2. 14:18

728x90

// 지난 시간까지 구조만들기 끝 :)

- 블록 태그 : 구조 만들기에 사용

- 블록 內 인라인 태그 : 컨텐츠를 마크업하는 태그

developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Inline elements - HTML: HyperText Markup Language | MDN

HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. Inline elements are those

developer.mozilla.org

<b> : 볼드체 됨. 굳이 안 쓴다. 미래지향적이지 않다. 태그의 본질은 how(css 영역)가 아니라 what을 보이는 것 (애는 뭐다!)

- cf) <em>, <strong> 애네들도 굵게 해주는.

<br> : 내려쓰기 (break)
<button> :

- cf) <input>

- <input type="button" value="click"> : 모양이 정해져있음 (정형화된 모형이면 이거)

<button>Click</button> : 여기 안에는 이미지도 넣을 수 있고 꾸며줄 수 있음. (꾸미려면 이거)

<del> : 요긴하나 잘 안쓰임.

ㅡㅡㅡㅡㅡ 아래 것들은 태그라기보다는 api 격

<canvas> : ★ 캔버스를 그린...?
<audio> : 음악 포함 가능
<video> : 문서 내 비디오 포함 가능
<svg> :

<img> : 이미지 삽입

-img src="logo.png"

src (소스)

자원이 있으면 '경로'를 써줘야 한다. (무조건 상대경로)

../image/logo.png

- 컨텐츠 없애고 예쁘게 보이려고 넣은게 아님.

alt = 뉴렉처 온라인 이라고 원래 있었던 컨텐츠를 꼭! 넣어주어야 한다. (이미지가 로드 되지 않아도 컨텐츠는 보여주도록)

<input> : 폼태그 넣을 때 사용 (타이븐? - 체크박스, 라디오 등등)
<label> : 인풋 다룰 때 같이 배울 것
<script>
<select> : 홈태그 배울 때 배울 것
<abbr> : <abbr title="Casacading~">CSS</abbr> 마우스 커서 두면 줄임말 보이도록
<s> : css로도 하지만 html로도 많이 하는 (이거 더 보기)
<span> : 인라인 태그에서의 <div> 역할 (주구장창 쓸 태그)
-> 이만큼 css 주겠다~ 하는거
<sup> : 승수 표현 ex) x의 2승 -> x<sup>2</sup>
<sub> : 이건 아래로 표현하게끔 하는 승수 표현
<picture> : 반응형 때문에 등장한 거. 화면 사이즈에 따라 사이즈가 조절되는
- 기본 이미지는 뭘 쓰지만, 화면이 작아지면 이 사진으로 바꿔달라~

<noscript>, <object> : 쓰지 말아야(!) 할 것
<bdi>, <bdo> : 우리나라에는 없는. (문자를 어느쪽에 정렬할지에 대한?)
<big>, <small> : 이것도 css로
<output> : 별로 쓰지 않음
<template> : 별로 쓰지 않음
<acronym> : 별로 쓰지 않음
<var> : 많이 사용될지 모르겠으나... 변수를 변수라고 말해주는 것 (내용 강조)
ex) <var>x</var>
<kbd> : 문자를 키보드 버튼처럼 보여주는 것 (굳이... ㅎㅎㅎ)
파이어폭스에서 열면 정말 키보드처럼 보인다. (크롬에서는 잘 안 보임)
<code> : 이건 코드라고 알려주는
<pre> : 이거로 감싸주면 visual studio 속 '앞의' 여백도 그대로 유지되어 나옴