1. DIV, H1,P, TAG 2.사용가능한 최대 가로 넓이를 사용 3. width= 100% , height = 0; 값으로 출발하며, 요소구함, 설정하지 않고 auto로 시작하고 들어감 4. 수직 쌓임 5.위,아래로 쌓임 margin과 padding의 속성, 위,아래,좌우 사용이 가능함 6. 레이아웃을 위한 용도로 사용됨= div사용
1. span, img 2. 필요가능한 너비를 사용 (들어간 만큼의 글의 내용만큼의 가로 너비를 사용한다. 3. 크기 지정이 불가함 4.width =0; height =0;으로 시작한다. 5. 수평으로 쌓음 6.띄어쓰기가 가능함, margin(여백을지정,거리만듬)과 padding(안쪽여백)의 위아래 사용 불가, 7.text를 사용하기 위한 용도로 사용됨 = span
html에서 css를 불러와 꾸며줄 수 있다.
div와 span{}의 메서드를 이용하여 css 를 사용하며, link rel = "stylesheet" href = "./파일이름.css "으로 설정가능하다.
dispaly를 이용하여 값을 변경할 수 있다. inline 의 요소를 block으로 block요소를 inline으로 교체가 가능하다.기본속성을 변경하여 사용가능하다.
메타태그 mata tag(빈태그. 닫힘 존재가 없음) 제일 우선적으로 사용하는 테그, name ccontent charset으로 글자는UTF=8, EUC=KR로 사용할지 작성을 한다.
Charset: 문자 형식의 속성
Content: name 속성, http의 값을 명시할 때 사용한다. server.content.의 값과, 속성을 명시한다.
Name: auther=문서작성자. description=내용의 잛고 정확한 요약(문서레벨의 메타데이터를 작성한다.
rel =relationship : 관계성 , 연결된 리소스와 현재 문서와의 관계 " stylesheet"를 많이 사용함
href = 약어, 연결할 리소스 URL을 작성함
hreflag = 연결된 리소스의 언어, 순수히 조언 : 참고형(거의 생략)
styletag = type tag = 콘텐트의 타입을 정의 값은 text/html, text/css
MINE타입 : 스타일시트의 타입을 지정함. text/css가 흔함, 클라이언트의 전송 매커니즘=연결문서의 타입 종류, 서버, 클라이언트의 확인을 통하여 오류를 줄이는 방식
title = 모든곳에 사용가능한, 전역코드. 링크를 가져올때 사용하며, 명시하는 부분이 제일 중요하다.
Base = 문서에 포함된 모든 상대 URL 들의 기준 URL 를 나타내며, 한번 설정으로 모든 URL의 기준경로로 설정하기 때문에 1번만 작성하며 주의가 필요하다. clean코드의 작성이란 중복 코드를 적게 사용하는 것이 중요한데, 그때 사용하기에 적합한 코드로써 주소가 동일하며 지속적으로 가져와서 사용시 base 를 tag로 사용하는 것이 좋다.(일시적인 사용을 위하여 작성하면 수정, 혹은 코드를 삽입할 경우 문제가 발생할 가능성이 생기기때문에 주의하여 사용하여야한다)
body tag = html의 정보의 구조로 안의 내용을 작성하여야 하며, css표현전의 정의하는 부분이다.
Header = 상단부분의 바, 헤더를 만드는 부분에 사용한다 소개나 탐색을 돕는 그룹이다. (로고, 메뉴, 로그인버튼 회원가입 버튼, 컨텐트 : flow content 범주이며, 제약은 없으나 header, footer 부분은 후손이 될수 없다. 전역속성에 포함하며, 모든 테그에 사용이 가능하다. 호환성은 full support
"div class = Header"->header class = "header" -> header로 축약가능하다.
div = 별다른 의미없는 빈태그, 분할하여 코딩 할 때 사용한다.
footer tag =가장 가까운 구획화 콘텐트이다. 작성자의 구획, 저작권 데이터 , 링크의 정보든 header와 반대로 아래부분에 작성을 하며, 전역속성에 해당하며 flow content로 일반적인 콘텐트 가능하다.
header와 마찬가지로 div로 변경하여 사용할 수 있지만 html 5로 바뀌면서 지칭언어로 tag를 의미적으로 사용하는 경우가 많아졌다. 그렇기 때문에 태그의 의미가 있는 부분으로 작성하는 것이 좋다.
H1-H6 =html의 6단계의 문서제목을 구현하여 목차부분을 정의하는 태그이다. 대주제에서 소주제로 중요도가 떨어지는 경우로 1~6으로 작성되며, font의 크기가 줄어드는 것을 확인할 수 있지만, font의 크기를 정확하게 알 수없으며, 브라우저마다 다르기 때문에 초기화후 font의 크기를 작성할 수있다. 전역속성이며, 제목의 정보는 문서의 목차로 사용가능하다. css를 이용하여 font의 size를 정할 수 있다.
제목을 작성시에 띄어쓰기를 하는 것을 피하는 것이 좋다. 검색엔진등 순차적으로 제목을 찾는데, 중간에 빈 부분이 있을 경우 에러가 난다.
H1은 한페이지의 하나만 사용하여야한다. 같은 레벨의 제목을 인식하기 때문에 H2로 작성하는 것이 좋고, H1은 전체적으로 제목을 설정할 때 작성하는 것이 좋다. Header와 footer로 구획을 나눠 라벨의 키워드, 제목지정이 가능하며 H2를 이용하여 섹션을 나눌수 있다.
main=문서의 핵심주제를 작성한다. 직접적인 연관이 있는 content를 작성할때 사용하며, page의 핵심이 들어가있다. 고유하게 1개만 사용하고, internet explorer에서 사용불가하니, 주의하여 사용하여야한다.
Article= 독립적으로 구분하며, 재사용이 가능한 테그이다. block tag 이다. H1~ H6을 포함하여 식별하고, 작성일자(TIME)의 datetime속성으로 작성한다. article class =" " 으로 독립성을 유지하고, 클래스를 나가더라도 유지가 가능하다. 의미를 강조할 때 사용하며, 내부안에 article을 삽입할 수 있다.
세부적으로 작성이 가능하며, 특정한 의미를 가지는 독립적이며, 재사용이 가능하도록 작성할 수 있다.
section = 일반적인 영역, 다양하고, 일반적인 영역으로 나눌때 사용한다. block요소이며, article이 들어가서 사용할수 있다. 서로 안쪽에 들어가도 상관없음. 중간적인 의미를 가지기 때문에 h1를 제목의 의미로 넣을 수 있다.
article >section>div
aside = 별도의 콘텐츠를 설정할 때 사용한다. 배너광고, 기타링크 block요소를 가지고 있다.
nav= 메뉴를 포함한다. 다른 페이지링크를 제공하는 영역들을 설정한다. nevigation으로 메뉴, 연락정보, 목차, 색인들을 생성한다. a tag로 작성하며 링크를 그룹화 하면서 작성한다. block요소이며, menu를 묶는다. ol과 ul tag를 사용한다.
adress = 주소, 연락처, 전화번호, 이메일이 들어가며 block 요소이다. 1개이상의 연락처를 작성할 때 사용을 한다. a href="maito:이메일주소 " href= "tel:전화번호 "작성하여 연결 이메일 주소와 tel의 실제 전화가 가도록, 어플이 이용되도록 만들어준다.
a=외부 특정 상황 page로 지정해주는 앵커태그이며, inline태그이다.
div tag는 = division으로 아무것도 나타내지 않는 태그로서 긍정의 의미인 "막"사용가능한 태그이다. css와 js을 삽입할 때 사용이 가능한. 꾸미는 목적으로 사용하는 태그이다.
콘텐트 구분 : 띄어쓰기는 하위부분을 불러주는 기술이다.
ol , ul, li 은 항목으로 설정가능, ol+li ,ul+li으로 세트로 사용가능하다. block요소이다.
ol은 ordered list로써 순서를 토대로 중요도를 표시하기 위하여 사용 가능하다. li를 자식으로 사용가능하며, ol은 숫자료 표현된다. ol type= ""으로 어떤 값으로 작성할지 설정할 수 있으며 reversed =항목을 역순으로 작성 , start = 시작의 값은 몇으로 설정할지 결정, type은 번호의 유형(a, A,숫자,로마자, 큰로마자)로 설정가능하다.
ul 은 순서가 지정되지 않은 일반 항목을 작성가능하다. 순서가 정해져있지 않은 경우가 많아서 주로 사용된다.
li = list의 항목으로 항목을 설정하고, value= 항목의 순서를 설정한다.value 의 숫자로 시작된다. 수평을 맞춰주는 테그는 부모의 태그에서 display를 flex로 설정해준다.
di(전체 집합) , dt(용어를 작성), dd (용어의 정의 )
di (dt = dd ) : di안에는 dt와 dd만을 포함해야하며, dir처럼 다른 태그가 들어가게 되면 error가 발생된다.
<di><dt>milk</dt><dd>cow~~</dd></di>전체적인 bloc요소로 styling은 다른 태그로 교체하여 꾸며준다.ul과 li ol과 li로 교체하여 꾸며주는데<ul><li><dfn>milk</dfn><p>설명</p>dfn으로 정의를 하고 p부분으로 문맥을 작성한다.
p =하나의 문단을 설정하며, 문장을 사용한다. paragraph으로 block요소이다. 정보통신 보조기기의 다음문단으로 넘어가는 단축키를 제공한다.
<hr/>= 문단을 분리하기 위하여 사용한다. 빈태그이며, 주제를 입력시 시각적인 표현으로 분단을 나눠준다. css를 이용하여 사라지게 가능하며, 문단이 분리된다는 의미적인 관점으로 사용한다. css이용하여 hr{border= none; border-top :2px(두께) dashed (점선) red(색상)으로 표현이 가능하다. 모든 선은 사각형으로 위나 아래만을 입력할 수 있다.
<br/>= 줄바꿈태그이며, 빈태그이다. enter는 띄어쓰기로 인식이 된다.
pre = 서식이 미리 지정된 text , 텍스트의 공백, 줄바꿈을 유지하면서 표시를 한다. html의 줄바꿈과 공백이 표시하게 만들어주는 태그, 기본적으로 monospace글꼴 계열로 표시한다. 글자의 가로 넓이가 같다. 글자의 너비크기가 다르면 시각적인 판단이 어려워 가독성이 떨어지게 된다. text입력된 부분을 그대로 출력하기 위해서라면 div를 pre로 수정하여 원하는 양식을 입력한다. 단점 : 가독성을 위한 들여쓰기 부분이 전부 출력되기 때문에 pre은 시작은 글이 시작되는 부분의 바로 앞에 작성을 하고 끝나는 문장의 바로 뒷부분에 작성을 한다.
block guote = 특정한 책, 사이트를 인용했을 경우 일반적인 인용문을 입력할 때 사용하는 tag이다. 사이트를 이용했을때 정보의 url를 작성한다.
A = inline 로써 현재문서에서 외부문서의 링크를 걸때 내보낼때 사용딘다. 같은, 다른 페이지등 다른 url를 연결할때 사용하는 하이퍼링크이다. download (파일 다운로드를 명시) href 링크의 url 을 설정하고 생략도 가능하다. hreflang을 통하여 url의 언어를 설정하고 ko, en인지, target을 이용하여 링크 url의 위치를 지정한다. _self 창을 띄우다. _blank새로운탭을 이용하여 page를 어느 위치에 표시할 것 인지도 표현가능하다.
a type 해당링크 mine타입, 특정 버튼 형태로 사용되며 inline으로 가로세로값을 지정할 수 없어, 텍스트로 사용된다. display값을 변경하여 폰트를 변경할수 있다.
list-style = none; box-sizing =border box; (padding을 늘리면 크기가 커지는 부분을 방지한다)
오른쪽위로 올릴경우 하나의 main으로 잡기위하여 <div>사용한다. main으로 랩핑한다. ctrl+shift+p 으로 emmet wraping 작성 main으로 잡아준다. css에서 main을 입력후 꾸며준다
