TIL - 41

Block level vs Inline 차이

	블록요소	인라인요소
태그	div, h1, p	span,img
크기	지정 가능	지정 불가능
넓이 default값	width:100%	width:0
높이 default값	height:0	height:0
margin,padding	상,하,좌,우 사용가능	위,아래만 사용가능

Mark up (block )

Header

• 상단의 bar ex) 메뉴, 로그인, 로고, 검색바 , 회원가입
• header안에 header 넣을 수 없다.

nav

• 네비게이션의 약자
• 메뉴클릭시 그 정보가 화면에 나타나는 것 (home/about/contact)
  -다른 페이지 링크를 제공하는 영역을 설정.

main

• body태그 안에 가장 핵심 정보를 담는 태그
• 문서당 하나만

section (영역나눔, 제목 포함)

• 영역을 나누는데 쓰임
• 일반적으로 h1~h6를 포함하여 식별.
• article을 자식요소로 쓸 수 있음

div랑 section의 차이가 뭐냐?!
div는 의미없이 사용가능 <=> section은 h1(제목)을 포함한 의미가 내포되어 있음

h1 ~ h6

• 폰트 크기 h1 > h2 > h3 ... > h6
• 폰트 크기가 다르지만 css에서 폰트크기 지정해야함.
• h1을 선언하면, h2 순서대로 선언해야함

article (독립적 , 제목 포함)

• 자기자신을 자식요소로 쓸 수 있음.(재사용가능)
• 독립적으로 사용이 가능함
• 일반적으로 h1~h6를 포함하여 식별.
• section을 자식요소로 쓸 ㅜ수 있음

aside

-왼쪽에 광고나 배너를 주로 넣음

Footer

• 사이트 최하단에 제작자 정보(이메일 , 주소 ) 등등
• footer안에 footer 넣을 수 없다.

address

• 연락처(이메일,전화번호)1개이상.
• a태그와 같이 쓰임 (클릭시 이메일 보내기/ 전화걸기 링크 연결가능)

*영역을 표시하는 위와 같은 태그들은 block이다.
*a태그는 inline이다.

ol , ul > li 태그 (ul이 제일 많이 쓰임)

• ol : order list (순서가 중요한 태그)
  ol type: i,1(숫자),A(알파벳)으로 타입을 바꿔서 번호를 매길 수 있다.
• ul: unorder list (순서는 중요하지 않다)
  
• li는 ol과 ul의 자식 요소로 단독으로 쓰일 수 없다!
  li에 value = "2"(random 시작숫자) 를 넣으면 2부터 시작하게 된다.