2021.06.28 기초 HTML

웹페이지를 구성하는 필수 요건
5가지

<내가 실수한 부분>

이런 식으로 해서 페이지 상단 부분의 제목이 변경되지 않았는데
어느 부분이 잘못된건지 강의영상이랑 비교하면서 하다가
잘 안보여 잠깐 멈추고 찾아야겠다 해서 찾아봤다
직접 만든 페이지에 마우스 우측버튼을 눌러 검사를 해서 태그를 읽어 보니 body 태그안에 설정되어있어 제목이 변경되지 않고 홈페이지에 그대로 시각화 되어 있었고, 그래서 head 태그안에

이렇게 입력하여 다시 오류를 잡을 수 있었다!

웹사이트에서 보여지는것들은=시각화 정보들은 body 태그안에 넣고
출력해보면 기본값으로 출력이 되는데 여기서 조금 더 보기 좋게 꾸미고 하려면 css를 이용해서 다듬어 간다고 하였다.

target - >새탭으로할지 그냥 현재탭으로 할지정하는 코드
_blank - >현재텝에서 열리는게 아니라
새로운 텝이 열리면서 열어주는 효과
self ---->현재텝에서 열리게 해주는 태그

제일 기초적인 부분을 실수해서 떨리는 마음으로 계속 진행하였고,

하나씩 차근차근 따라해보니 실습화면이 잘 출력되어 나오는것을 볼수 있었다.

#사과이미지 넣는 코드#

이때,url 주소는 내가 하고싶은 이미지 주소

img 태그를 사용할때는 art 속성값이 무조건 들어가 있어야한다
art 값은
1. 시각장애인 분들이 웹사이트 이용시 스크린리더 프로그램을 이용하는데 텍스트만 인식하기 때문에 art속성을 이용해서 텍스트를 입력해줘야 한다

2. 이미지가 들어갈 자리에 엑스박스가 뜰경우 이자리에 어떤 정보가 있었는지 알려주기 위해 있어야함

img 태그에서 width height를 가지고 이미지크기를 변동했을때이용했을때 비율은 달라지지만 이미지는 깨지지 않는다

웹표준
<제목>임시제목</제목>
-> 브라우저에게 이게 메인이야 라고 알려줄수 있고
검색엔진에 걸릴 확률이 높아짐

실제는 <본문>임세제목2</본문>
내가 입력하는 성격에 맞는 적절한 태그를 사용해야
검색엔진에 걸릴수 있다.!!

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

-> headline 같은 것
h1 ~ h6 까지 표현 하는데 h1이 가장 중요한 정보를 담고 있어야 한다(글자크기가 제일 크게 표현되기 때문)
h 테그 사용시 주의 할 점
사이트를 이용할때 웹사이트의 로고(서비스의 이름) 가 가장중요한 정보가 될수가 있다!
웹사이트의 로고와 동급인 존재는 존재할수 없기 때문에

하나의 페이지에 각 세션별로 섹션을 대표하는 타이틀 정보가 들어가야한다.

**공백은 한칸만 인식한다

동해물과 백두산이 마르고 닳도록

문장안에서 특정 단어에 디자인을 적용하는것

사과는 사과나무에서 나는 열매이다.

문장안에서 특정 단어를 강조 하는디자인을 적용하는것
mark 테그를 이용할때 배경색이나 다 바꾸고 싶다 하면 css로 바꾸기
OL -> 순서가 있는 list의 정보들을 표시할때 사용

LI -> 실제 정보 입력란
UL - > 순서가 없는 list의 정보들을 표시할때 사용

OL과 UL 테그 사용할때 안에 들어가는 테그는 **무조건 LI 테그만 해야한다

닫기

데이터 통신과는 상관없이 온전히 팝업을 닫는 다 던가 그런 역할을 수행

확인

submit은 입력한 정보를 백엔드 개발자 즉 서버에게 전달할때 사용되는것

<select, option 실무에서 자주사용>
**select에서는 option값만 들어갈 수 있다

![](https://media.vlpt.us/images/yoowhae/post/76288152-069b-47ec-b69d-0f6175ea532d/10.PNG)

직업을 선택해 주세요. -> selected disabled 를 넣어 줌으로써 미리보기 형식처럼 학생,회사원,기타만 선택할수 있다->직업을 선택해 주세요는 선택안됌 학생 회사원 기타

도표만들기

caption 은 table에 대한 제목을 나타냄 이 도표가 어떤 용도로 만들어 졌는지 알려주는 역할 ->테이블의 머리 하나의 라인

th로 각 항목의 제목을 넣어줌

->th와 쌍을 맞춰줘야함 즉 항목이 3개면 각각의 정보들도 3개씩 입력 td colspan=> 열병합코드

상품 정보

상품	색상	가격
맥북 프로 16인치	그레이	3,000원
아이패드 프로 12인치	아이패드 프로 12인치	레드	1,000원
아이패드 프로 12인치	블루	1,000원
총가격	5,000

<공간을 만들때 사용하는 태그>
<가장 먼저 눈에띄는 상단 태그>

<header>

	<h1>
		<a href="#">
			<img>
		</a>

	</h1>

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

<본문을 만들때 사용되는 태그
하나의 문서안에서 한번만 사용된다!>

<main role="main">

	<rold 을 넣는 이유 : 태그의 역할이 main 이다 라고 익스플로러한테 알려주기때문>
	

	<section>

		<section 태그는 주로 각각의 영역들을 꾸며줌 섹션을 대표하는 타이틀정보가 있어야함 
main 안쪽이든 밖이든 상관X >

	<h2>Service</h2>
</section>

<section>
	<h2>portfolio</h2>
</section>

<article>
	<공간을 대표하는 타이틀 정보 필요>

	<h2>Articl title</h2>

	<p>Nice to meet you</p>
	</article>

	<본문내용 p로 넣어주기>

	<aside></aside>
		<본문내용과 관계성이 조금 떨어지는 영역을 aside로 넣어줌>

	<footer></footer>

	<가장 하단에 들어가는 내용물을 footer에 입력>

	<임의 공간(큰 구역 안에 작은 구역)을 만들때 div태그사용>

	<div></div>

	<form></form>
	<사용자에게 정보를 입력받는 공간으로 
	<label></label>
	<input type="" name=""> 와 함께 쓰여야함>

</main>

hearder, nav, main,section,article,aside,footer 은 HTML5에서 새롭게 등장해서 그 이하 버전에서는 사용못함