HTML 정리 2

html - 구조만 따지고, 디자인은 css로!

빈 태그들은 속성이 필요함

<link rel="stylesheet" href="./main.css">

글자 입력

<input type ="text"/>

인라인 요소

• 글자를 만들기 위한 요소

span - 아무의미 없고 구분을 위한 요소, 수평으로 나열

• 글자요소는 가로, 세로 사이즈를 지정할 수 없음
• 여백에서 margin, padding으로 위, 아래는 지정할 수 없음
• 인라인안에 블록을 사용할 수 없음

블록 요소

• 레이아웃을 만들기 위한 요소

div - 아무의미 없고 구분을 위한 요소, 가로너비는 최대한 늘어나려 함

• 글자요소, 여백 제어 전부 지정 가능
• 블록안에 인라인 사용가능

주요 태그 종류

h1~6 - 제목 숫자가 작을수록 더 중요한 제목, 블록
p - 문장, 블록
img - 필수 속성 src alt, 인라인
ul - 순서가 필요없는 목록, item인 li를 가짐, 블록

a - 링크를 연결할 때 사용, 인라인

• tartget="_blank"로 새탭표시

span - 아무의미 없고 구분을 위한 요소, 수평으로 나열, 인라인

br - 줄바꿈 요소, 인라인

input - type 데이터 입력, 인라인이면서 블록

• value는 값을 미리 입력함
• placeholder는 힌트 명시
• disabled는 회색처리되며 비활성화

label

• inputType이 checkbox일때 라벨링으로, 이름 지정
• checked는 미리 체크된상태로 함
• inputType이 radio일때 하나만 선택가능, name으로 그룹지정

table - 표, 테이블요소

• tr(table row)로 행 먼저 지정
• td(table data)로 열 지정

전역 속성

title - 제목이아니라, 설명을 명시
style - 직접적으로 css 지정
class - 중복 요소를 지정

<span class = "red">

id - class와 다르게 중복 안되는 요소 지정
data - 요소에 데이터를 지정

<div> data-fruit-name="apple">사과</div>