21년 6월 28일 웹 프로그래밍 개발일지

김태훈·2021년 6월 28일
0

대구AI스쿨

목록 보기
1/49
  1. html 기본 틀
<!DOCTYPE html>
<html><head></head>
	<body></body>
</html>

head의 내용은 페이지에 표시되지 않는 대신 metadata를 포함하는 역할을 한다.
body는 브라우저에 실질적으로 표시되는 내용.

  1. head
<meta charset="utf-8">
<meta name="description" content="Web Tutorial">
<meta name="keywords" content="html, css, tutorial, web">
<meta name="author"content="Taehun Kim">
<title>HTML, CSS Tutorial</title>

<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">

위는 head 사이에 들어갈 내용.
charset에서 문자 인코딩을 선언하고,
name은 일반 주석과 같이 직접 드러나지 않는 서명(이라고 이해).
title로 탭의 이름을 정하고
link 에서는 다음과 같이 (크롬 기준)탭에서 표시되는 아이콘의 속성과 명칭, 사용되는 이미지를 지정한다.

  1. 본문(Body)
<a href="https://www.naver.com/":target="_blank">네이버</a>
<img src="" alt="사과 이미지">
<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지" width="100px" height="80px">

위는 body 사이에 들어갈 내용.
href 에 절대주소를 입력, 뒤의 문자(네이버)로 링크가 생성된다.
img src 에 그림 링크를 입력, alt에는 그림 링크가 잘못되거나 서버 문제로 나타낼수 없는 대체 텍스트.
가로 세로 크기를 조정할 수 있으며 실행 결과는 아래와 같다.

<h1>
	<a href="https://dhlottery.co.kr/common.do?method=main">
	<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지">
	</a>
</h1>

a href 와 /a 사이에 이미지를 넣어서 그림에 링크를 넣을수도 있다.

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

h1~h6 로 글자 크기를 설정할 수 있으며 h1이 가장 크다.
되도록 본문이나 부제목은 제목보다 작은 크기로 설정할 것.

Title

Title

Title

Title

Title
Title
<p>
	<span style="background-color:red">동해물</span>과 백두산이 마르고 닳도록
</p>
<p>Nice to      meet you</p>
<p>Nice to  &nbsp;   meet you</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다</p>
<p><mark style="background-color:gray">사과</mark>는 사과 나무에서 나는 열매이다</p>

p ~ /p 는 문단태그로, 다른 문단과는 자동적으로 다른 줄에 쓰여진다.
사이의 공백(space)는 여러 개라도 하나로 인식되며, 2칸 이상의 공백은 &nbsp;로 적용가능하다.
span 은 텍스트 묶기로, 폰트 크기나 색을 바꿀 때 해당 영역만 바꿀 수 있다.
mark 는 텍스트의 배경을 노란색으로 강조하지만, 색을 바꿀수도 있다.

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

Nice to meet you

Nice to   meet you

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

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

	<ol>
		<li>메뉴1</li>
		<li>메뉴2</li>
		<li>메뉴3</li>
	</ol>
	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
		<li>메뉴3</li>		
	</ul>
	<ul>
		<li><a href="#">영화</a></li>
		<li><a href="#">부동산</a></li>
		<li><a href="#">음악</a></li>
	</ul>

ol ~/ol 안에서 리스트(li)를 작성하면 내림차순으로 번호가 붙고,
ul ~/ul 안에서 리스트를 작성하면 번호가 붙지 않는다.

  1. 메뉴1
  2. 메뉴2
  3. 메뉴3
  • 메뉴1
  • 메뉴2
  • 메뉴3
<button type="button">닫기</button>
<button type="submit">확인</button> 
<video src="sample.mp4" controls
						autoplay muted
						loop
						width="300px"
						height="300px"></video> 
<iframe width="500px" 
		height="300px" 
		src="https://www.youtube.com/embed/ghpn99s8I-U" 
		title="YouTube video player" 
		frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
		allowfullscreen></iframe> 
<audio src="example_audio.mp3" controls 
		muted
		loop></audio>

상호작용으로 많이 보이는 버튼.
타입이 버튼이면 아무 기능이 없다..는 듯?
닫기
확인
요즘 자주듣는 스텔라장의 빌런을 소스로 동영상을 넣은것.
폭과 높이를 설정 가능하며, allow 에서 자동재생(크롬에선 적용안됨), 중력센서 적용, 가속 버튼 등의 기능을 추가로 넣을 수 있다.(다만 소스가 유튜브라서 자동으로 유튜브 기능이 적용되는듯 하다.

audio 의 경우엔 영상에 비해 조절 가능한 옵션이 적다.
폭과 높이는 조절 불가능.

<form>
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요." required
			minlength="2" maxlength="8">
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자 입력" id="pw" required minlength="10" maxlength="15">
<label for="num">숫자</label>
<input type="number" placeholder="숫자만 입력" id="num" min="10" max="40" step="5">
<label for="upload">파일 업로드</label>
<input type="file" id="upload" accept="image/png, image/jpg, image/gif">
<button type="submit">제출</button>
</form>

로그인/설문 등에서 문자를 써넣는 라벨 태그.
placeholder 에서 기본 으로 표시되는 문구,
minlength, maxlength로 최소 글자와 최대 글자를 정할수 있다.
id가 pw일 경우 비공개 입력이 되며,
num일 경우 옆의 화살표가 활성화 되며 클릭으로 수를 늘리고 줄일수 있다(라고 이해함).
input 태그로 로컬 파일을 업로드 할수 있으며 accept로 파일 형식을 제한 할 수 있다.

이름

이메일

비밀번호

숫자

파일 업로드

제출

<form>
<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">
</form>
<form>
<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">
</form>

checkbox는 다중 체크를 할수 있는 태그.
radio는 여러 선택지중 하나만 선택 가능하다.

한국 일본 중국 한국 일본 중국 
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>

textarea는 각종 조사에서 쓰이는 태그로 텍스트를 직접 입력해 넣을 수 있다.
문의내용

<select>
	<option selected disabled>직업을 선택해 주세요.</option>
	<option value="학생">학생</option>
	<option value="회사원">회사원</option>
	<option value="기타">기타</option>
</select>

select ~ /select 사이에 option 태그를 넣으면 한 옵션을 고르는 선택 상자가 된다.
이 때, option 태그에 select를 넣으면 기본으로 선택된 항목,
disabled를 넣으면 직접 선택할 수 없는 항목이 된다.

직업을 선택해 주세요. 학생 회사원 기타 
<style>
	tr, td, th {
		border: solid 1px #000000;
	}
</style>

th 는 표의 제목, tr 은 표의 가로줄, td 는 표의 셀을 만드는 양식이다.

<table>
	<caption>상품 정보</caption>
	<thead>
		<tr>
			<th>상품</th>
			<th>색상</th>
			<th>가격</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>맥북 프로 16인치</th>
			<th>그레이</th>
			<th>3,000원</th>
		</tr>
		<tr>
			<th rowspan="2">아이패드 프로 12인치</th>
			<th>레드</th>
			<th rowspan="2">1,000원</th>
		</tr>
		<tr>
			<th>블루</th>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="2">총 가격</td>
			<td>5,000원</td>
		</tr>
	</tfoot>
</table>

table은 표를 만드는 태그로, 이 사이에 th, tr, td 태그를 이용해 각 셀의 내용과 크기 등을 지정할 수 있다.
thead 로 헤더 콘텐츠를 지정 할 수 있고,
tbody 에 본문을,
tfoot 에 총 결산 등 마지막 줄을 지정가능하다.
위에선 th를 표의 제목이라 했지만, 셀에서는 가운데 정렬인 듯 하다.
td는 좌측 정렬.
th나 td로 열린 셀 옵션에서 rowspan으로 세로 셀을 병합 할 수 있고,
colspan으로 가로 셀을 병합 할 수 있다.(단어 의미상으로는 셀을 그만큼 늘리는 듯 하다.)

상품 정보
상품 색상 가격
맥북 프로 16인치 그레이 3,000원
아이패드 프로 12인치 레드 1,000원
블루
총 가격 5,000원 
<header>
	<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">
	<section>
		<h2>Service</h2>
	</section>
	<section>
		<h2>Portfolio</h2>
	</section>
	<article>
		<h2>Article title</h2>
		<p>Nice to meet you</p>
	</article>
</main>

위키 백과와 같은 사이트에 종종 보이는 하이퍼링크가 있는 목차.

글을 쓸 때 보통 쓰이는 형식의 태그...라고 생각되는데
아직은 잘 모르겠고 좀 더 배워야 할 듯.

Service

Portfolio

Article title

Nice to meet you

<!--본문과 관련이 적은 내용-->
<aside></aside>
<!--가장 말단의 내용-->
<footer></footer>
<!--유연한 레이아웃 태그-->
<div></div>
<!--input 태그를 넣는 태그-->
<form></form>
<!--독립적인 섹션-->
<section></section>

이 부분은 아직 실습해보지 않은 부분.
얼핏 이해한 개념으로 주석을 넣어 보았다.

html 코드는 처음 접해보는 코드라 생소했지만
100개 이상의 태그를 다 쓰지는 않는다 하니
각 사이트들에 많이 쓰이는 태그를 중심으로 공부하는 방법이 좋을 듯 하다.

profile
김태훈
태훈입니다.
다음 포스트

21년 6월 29일 웹 프로그래밍 개발일지

0개의 댓글