#TIL (April 25th, 열한번째 이야기) #TIR Today I reviewed 가 더 맞을것같기도?)

Jung Hyun Kim·2020년 4월 25일

HTML 재정리

웹페이지의 레이아웃 형태

Static(fixed layout) : 정적형, 다른 레아이웃에서 변하지 않음
Liquid(fluid layout) : 동적형, 다른 레이아웃에서 줄어들거나 늘어난 형태
Adaptive: 적응형, 레이아웃 형태도 바뀌며 웹/모바일 형태로 나눔, 뚝뚝 끊기면서 적용 됨
Responsive: 반응형, 상대값 적용하며(px이 아닌% 단위를 사용함) 레이아웃 형태에 맞추어 변함. 요새 제일 많이 쓰는 형태
참고 URL(http://blog.teamtreehouse.com/which-page-layout)

HTML의 기본구조

HTML 구조는 문서에 대한 내용을 간략하게 기입하는 head와 문서 정보를 담는 body로 구성 됨.

<!DOCTYPE HTML>
	<html>
	<head> 
	<!--목차가 들어가는 부분, 문서에 대한 정보 입력 -->
    <meta charset="htf-8"> <!--캐릭터 셋팅의 약자, 한글 인식 역할을 담당-->
    <meta name ="description" content="HTML CSS Tutorial">
	<meta name = "keywords" content="HTML, CSS, Tutorial">
	<meta name="author" content="Junghyun Kim">
	<!--태그기능, 검색엔진에 노출이 되게 하는 효과-->
    
    <title>jojo loves coding</title> 	<!--웹브라우저 탭 이름 -->
      
	</head>	
	<body>
      	<!--문서 보이는 정보가 담기는 곳 -->
	</body>
	</html>

HTML Tag 종류와 사용법

Anchor tag

<a>

앵커태그, 닻을 내린다는 의미 처럼 anchor tag 이후에 내용을 보여주고 싶을때 사용

  <a href="http://www.naver.com">네이버</a>
  <a href="http://www.naver.com" target="_blank">네이버</a>
 <!--target 의 blank는 링크를 새탭에서 열고싶을때 사용 -->

Image tag

<img>

이미지 태그, 정보성의 이미지를 넣을때 사용

  <img src="jojo.jpg" alt="jojo image"> <!--alt는 사진이 안뜰때, 시각장애인을 위해 해당 이미지가 어떤 이미지인지 설명해주는 역할을 함  -->
  <img src="jojo.jpg" alt="jojo image" width="100px">
 <!--width를 조정하면, 비율에 맞춰서 이미지가 줄어듬, height까지 변화주면 맞추어 변함. but proportionally 변하지 않을 수 있음 vice versa -->

h tag

<h1> to <h6>

headline의 약자, 제목을 작성할때 사용됨
hierarchy에 맞춰서 h1 to h6사용을 권장
한 html문서에는 하나의 h1사용을 권장

		<h1>Title</h1>
		<h2>Title</h2>
		<h3>Title</h3>
		<h4>Title</h4>
		<h5>Title</h5>
		<h6>Title</h6>


		<h1>
			<img src="4.jpg" width="100px" alt="bridge-img">
		</h1>

<!-- <h1> 안에 태그가 들어갈수도 있음. 즉 컨텐츠가 태그가 될수도 있음!-->

p tag

<p>

본문 정보 및 문장/문단이 들어갈때 사용
p tag 사이에는 공백이 들어감

<p>Hi people</p>
<p>Can you hear me?</p>

span,mark tag

<span>,<mark>

span tag :
태그 사이에 있는 문자에 효과를 줄때 사용, span이 최우선으로 효과가 적용이 되며, 단일사용으로는 티가나지 않지만 나중에 css로 효과를 준다는 약속 같은 것
mark tag : 문장안에서 특정 단어 강조할때(yellow hightlight)효과를 주며, css를 통해서 효과를 바꿀수 있음.(문장안에서 특정단어 강조,인용문구,사전 이런거 입력할때도 같이 사용

<p>내가 너무너무 <span>배가고파서</span></p>
<p>저녁에 <mark>닭발</mark>을 먹고 잤어</p>

ul,ol tag

<ul><ol>

메뉴 버튼 만들때 이용 가능
ul과 ol사이에는 무조건 li 태그가 있어야함

<ul>
	<li><a href="#">메뉴 1 </li>
	<li><a href="#">메뉴 2</li>
</ul>

홈페이지 구조를 설계하는데 사용하는 tag

구조화 작업에 필요한 html 정리

header - nav- main- footer 순서


<header> <!-- 브랜드 로고나 메뉴 삽입-->
  <h1>
    <img src="">
  </h1>
  
  <nav> <!-- 홈페이지 메뉴만들때 사용-->
    <ul>
      <li><a href="#">메뉴</a></li> <!--상단메뉴바-->
    </ul>
  </nav>    
</header>   
    
<main role ="main">
  <section> <!-- 웹사이트 영역 지정-->
  <h2>
    </h2>
    <article> <!-- 웹사이트 실제 내용-->
      <h3>
      </h3>
      <p></p>
     </article>
  </section>
    
    </main>
<footer></footer> <!-- 회사소개 및 저작권-->

Inline과 Block요소 구분(중요중요중요)

block요소
- tag들은 y축으로 정렬
- block요소는 width, height, margin, padding, 줄바꿈 사용 가능
- block 요소를 가지고 있더라도(ex.list tag) CSS display:inline; 적용을 통해 inline요소로 변경가능
- div, header, article, section 다 block 요소를 가지고 있음
Inline요소
- tag들은 x축으로 정렬
- Inline요소는 width, height, margin, padding 사용불가, 줄바꿈 불가
- so, 레이아웃 작업이 불가 (ex. anchor tag)
- however, Inline요소dls a tag안에 h1 block 요소를 넣으면 block 요소로서 활용 가능