천재교육 풀스택 1기 Day2

#1교시

리스트 만들기

순서 있는 리스트 <ol>

순서 없는 리스트 <ul>

정의 리스트 <dl>

리스트 아이템 <li> (</li> 생략 가능하지만 보통은 써주는 걸 권장)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="i"> <!-- ol type="1|a|A|i|I" -->
	<li>물을 끓인다.</li>
	<li>라면과 스프를 넣는다.</li>
	<li>파를 썰어 넣는다.</li>
	<li>5분 후 먹는다.</li>	
</ol>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>내가 사는 이유</h3>
<hr>
<ul>
	<li>내가 좋아하는 음식 많아요</li>
		<ul>
			<li>감자탕</li>
			<li>스파게티</li>
			<li>올레국수</li>
		</ul>
	<li>라면 먹기 좋아해요</li>
	<ol type="1">
		<li>물을 끓인다.</li>
		<li>라면과 스프를 넣는다.</li>
		<li>파를 썰어 넣는다.</li>
		<li>5분 후 먹는다.</li>	
	</ol>
	<li>여름에는 바다로</li>	
	<li>겨울에는 산으로</li>	
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정의 리스트</title>
</head>
<body>
<h3>웹 브라우저 종류</h3>
<hr>
<dl>
	<dt><strong>Internet Explorer</strong></dt>
	<dd>마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용</dd>	
	<dt><strong>Firefox</strong></dt>
	<dd>Mozilla 재단에서 오픈 소스로 만든 것으로 W3C의 웹 표준을 선도</dd>
	<dt><strong>Chrome</strong></dt>
	<dd>구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용</dd>
</dl>
</body>
</html>

#2교시

표 만드는데 사용되는 태그들

<table> : 표 전체를 담는 컨테이너
<caption> : 표 제목
<thead> : 헤딩 셀 그룹
<tfoot> : 바닥 셀 그룹
<tbody> : 데이터 셀 그룹
<tr> : 행. 여러 <td>, <th> 포함
<th> : 열 제목(헤딩) 셀
<td> : 데이터 셀

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>행과 열 만들기</title>
</head>
<body>
<table border ="1">
	<thead>
		<tr align = "center">
			<th>이름</th><th>HTML</th><th>CSS</th>
		</tr>
	</thead>
	<tbody>
		<tr align = "center">
			<td>이기자</td><td>80</td><td>70</td>
		</tr>
	</tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>행과 열 만들기</title>
</head>
<body>
<table border ="1">
	<caption>1학기 성적</caption>
	<thead>
		<tr align = "center">
			<th>이름</th><th>HTML</th><th>CSS</th>
		</tr>
	</thead>
	<tfoot>
		<tr align = "center">
				<th>합</th><th>225</th><th>230</th>
			</tr>
	</tfoot>
	<tbody>
		<tr align = "center">
			<td>황기태</td><td>80</td><td>70</td>
		</tr>
		<tr align = "center">
			<td>이재문</td><td>95</td><td>99</td>
		</tr>
		<tr align = "center">
			<td>황기태</td><td>40</td><td>61</td>
		</tr>
	</tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그림 페이지 이동</title>
</head>
<body>
<!-- <a target="_blank|_self|_parent|_top|프레임 이름"> -->
<p align="center">
<a href="https://www.google.com" target = "_blank">click to go google.</a><br>
<a href="https://www.google.com" target = "_self"><img width=180 height=50 src="../images/google.png"></a><br><br>
<a href="https://www.naver.com" target = "_parent">click to go naver.</a><br>
<a href="https://www.naver.com" target = "_top"><img width=180 height=50 src="../images/naver.png"></a>
</body>
</html>

hyper link targer 속성 활용

target = "_blank" : 새 창에서 열기

target = "_self" : 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. (기본값으로 생략 가능)

target = "_parent" : 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함

target = "_top" : 링크된 문서를 현재 윈도우 전체에서 오픈함.

target = "프레임 이름" : 링크된 문서를 명시된 프레임에서 오픈함.

#3교시

a link, id

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김규민 홈페이지</title>
</head>
<style>
	ul li {
		list-style: none;
		float: left;
		margin-left: 30px;
	}
</style>
<body>
	<ul>
		<li><a href="sample3_ahref_business.html">기업 소개</a>
		<li><a href="#">사업 소개</a>
		<li><a href="#">제품 소개</a>
		<li><a href="#">인재 채용</a>
		<li><a href="#">고객 센터</a>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김규민 홈페이지</title>
</head>
<body>
	<ul>
		<li><a href="#ceo1">CEO 인사말</a>
		<li><a href="#ceo2">조직도</a>
		<li><a href="#ceo3">회사 연혁</a>
	</ul>
	
	<h3 id="ceo1">CEO 인사말</h3>
	<dl>
		<dt><mark>최고 경영자</mark></dt>
		<dd>이름: 홍길동 </dd>
		<dd>직위: 사장</dd>
		<dd>업무: 경영자</dd>
	</dl>
	<h3 id="ceo2">조직도</h3>
	<dl>
		<dt><mark>조직도</mark></dt>
		<dd>CEO</dd>
		<dd>CTO</dd>
		<dd>노비</dd>
	</dl>
	<h3 id="ceo3">회사 연혁</h3>
	<dl>
		<dt><mark>회사 연혁</mark></dt>
		<dd>19xx~2000: 농사</dd>
		<dd>2000~20xx: 4사산업</dd>
		<dd>2100~xxxx: ㅁㄹㅀ</dd>
	</dl>
</body>
</html>

audios / videos

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비디오 삽입</title>
</head>
<body>
<h3>비디오 삽입</h3>
<hr>
<video src="../videos/bear.mp4" width="320" height="240" controls autoplays>
 브라우저가 video 태크를 지원하지 않습니다.
 </video>
 <audio controls autoplay src="../audios/audio_test.mp3">controls autoplay loop</audio>
</body>
</html>

#4교시

<header>
페이지나 섹션의 머리말 표현
페이지 제목, 페이지를 소개하는 간단한 설명

<nav>
하이퍼링크들을 모아 놓은 특별한 섹션
페이지 내 목차를 만드는 용도

<section>
문서의 장(chapter, section) 혹은 절을 구성하는 역할
일반 문서에 여러 장이 있듯이 웹 페이지에 여러 <section>가능
헤딩 태그(<h1>~<h6>)를 사용하여 절 혹은 섹션의 주제 기입

<article>
본문과 연관 있지만, 독립적인 콘텐트를 담는 영역
혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용
<article>에 담는 내용이 많은 경우 여러 <section> 둘 수 있음

<aside>
본문에서 약간 벗어난 노트나 팁
신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등

페이지의 오른쪽이나 왼쪽에 주로 배치

<footer>
꼬리말 영역, 주로 저자나 저작권 정보

css

margin: 바깥쪽 여백

padding: 안쪽 엽개

width: 가로 너비

height: 세로 길이

background: 배경 색깔

color: 아이템 색깔

id를 사용하면 css에 아이디를 그냥 적으면 되지만

class를 사용 시 css에 .클래스명 와 같이 .을 붙여야한다.

시맨틱 태그들

<header>
페이지나 섹션의 머리말 표현
페이지 제목, 페이지를 소개하는 간단한 설명

<nav>
하이퍼링크들을 모아 놓은 특별한 섹션
페이지 내 목차를 만드는 용도

<aside>
본문에서 약간 벗어난 노트나 팁
신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등
페이지의 오른쪽이나 왼쪽에 주로 배치

<footer>
꼬리말 영역, 주로 저자나 저작권 정보

GET과 POST의 차이

간단히 데이터를주고받을 때

GET의 경우정보가 드러나고

POST의 경우는 그렇지 않다.

폼 요소의 종류

#5교시

텍스트입력

HTML에서의 색 표현 (rgb)

색 코드 - #rrggbb

r은 빨강 g는 초록 b는 파랑을 나타낸다.

ex) #A52A2A - brown

#00BFFF - deepskyblue

시간 정보 입력 폼 요소

month: 년/월

week: 년/몇 번째 주

date: 년/월/일

time: 시/분

datetime-local: 해당 나라의 시간, 년/월/일/오전,오후/시/분/초/100분의1초

#6~7교시

<form>: 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되는 태그

action="link": 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.

name="name": 폼을 식별하기 위한 이름을 지정합니다.

accept-charset="utf-8": 폼 전송에 사용할 문자 인코딩을 지정합니다.

target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

method: 폼을 서버에 전송할 http 메소드를 정합니다. (GET or POST)

<feildset>: <form> 요소에서 연관된 요소들의 하나의 그룹으로 묶을 때 사용

이 요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줍니다.

또한, <legend> 요소를 사용하면 <feildset> 요소의 캡션(caption)을 지정할 수 있습니다.

<label>: 사용자 인터페이스 항목의 설명을 나타냅니다.

이 요소를 쓰는 가장 큰 이유는 웹 접근성을 위함입니다.

1. 명시적 작성 방식은 label의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식입니다.

2. 암시적 작성 방식은 label 태그 안에 input 태그를 넣음으로써 for 속성을 명시하지 않더라고 암묵적으로 연결하는 방식입니다.

대부분은 명시적 방식을 선호합니다.

<datalist>: <input>요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용됩니다.

따라서 <input>요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트를 보여줌으로써 자동완성 기능을 제공합니다.

<select>: datalist와 같이 리스트에서 한가지를 선택하는 기능이지만 select는 리스트가 펼쳐져있다.

이 요소의 속성으로는 size로 리스트의 갯수를 지정할 수 있다.

<option>: <datalist>의 리스트 옵션중 하나를 정의할 수 있다.

<option value="0" label="투명"> 과 같이 option의 속성으로 value(보이는 값), label(기능 설명)을 사용하여 사용한다.

datalist에서는 값을 속성값으로 value를 나타내어 표시하지만

select에서는 <option>투명</option> 와 같이 나타낸다.

<details>: 펼쳐서 보거나, 숨길수있는 부가 기능을 제공한다.

<summary>: <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의할 때 사용합니다.

<p>: <p>만 사용하면 한 문단만큼 줄바꿈을 할 수 있지만 <p></p>로 감싸면 위아래로 한문단임을 표기할 수도 있다.

<table>: 표를 생성합니다.

<tr>: 표의 행을 추가합니다.

<th>: 표의 열(표의 데이터)를 추가합니다.

<caption>: 표의 제목을 나타냅니다.

깃허브

https://github.com/starMinK/cheonjae

GitHub - starMinK/cheonjae: 천재교육 풀스택과정 1기

천재교육 풀스택과정 1기. Contribute to starMinK/cheonjae development by creating an account on GitHub.

github.com

'🤓천재교육 풀스택 1기 노트' 카테고리의 다른 글

천재교육 풀스택 과정1기 Day6 (0)	2023.05.17
천재교육 풀스택 과정 1기 Day5 (0)	2023.05.16
천재교육 풀스택 과정 1기 Day4 (0)	2023.05.15
천재교육 풀스택 과정 1기 Day3 (0)	2023.05.12
천재교육 풀스택 1기 Day1 (1)	2023.05.10