unit3 [html기초]

html기초

html: 프로그래밍 언어 X , 웹 페이지의 뼈대를 구성하는 마크업 언어 

         트리구조

 

자주 사용하는 html 요소

div 태그는 한줄 차지

span 컨텐츠 크기만큼 차지 

img 이미지 삽입 닫는 테그 없음

a :링크 삽입

ul,li :리스트 

input ,textarea : 다양한 폼

input type에서

radio 다수개중 하나 -> <input type="radio" name="op">A 

                                     <input type="radio" name="op">B

  A

B

 

checkbox는 여러개 선택

textarea :줄바꿈이되는 입력폼

 

<button> 로그인 <button/>

시맨틱 요소란?

의미를 가진 요소를 사용하는 방식

<div> , <span> 의미적 가치 X

<h1> 의미적 가치O

 

1. 검색 엔지이 시맨틱 요소를 중요한 키워드로 고려

2. 여러개발자가 의미있는 코드 찾는게 더 유용

 

시맨틱 종류

<article> : 독립적인 콘텐츠

<aside> : 중요하지 않은 부분 설명

<footer> : 아랫부분 위치 :주소 , 연락처 등

<header> : 윗부분 위치 사이트의 제목,상단바,검색창 등

<nav> : 사이트를 안내하는 요소, ul사용

<main> : 문서의 주된 콘텐츠

 

html 심화

와이어프레임 : 레이아웃의 형태를 잡는 단계

 

웹페이지 구조 잡기

div 사용 가능하지만 

의미 있게

section 태그

form태그 사용가능 -> 사용자가 입력한 값을 다른 페이지로 전송하는 역할

input,button 요소등의 자식요소를 감싼다.

화면을 전환해버리는 action이 있으므로 이해 필요

 

id 및 class 목적에 맞게 사용하기

id : 고유한 이름 (읽기 영역 자체 고유)

class :반복되는 영역을 유형별로 분류

<div id = "select1"> div#select1

<li class="comment"> li.comment

 

class = "para"

class -> name

para -> value