1일 1 커밋, 1 벨로그 규칙을 정하니까 나중에 글이 섞일 것 같아서
- 정규 수업날 배우고 찾아본 것은 #day-번호
- 주말에 따로 공부하고 정리한 것은 #day.5
로 정리하려고 한다.
0. Web 기본 지식
http://www.naver.com:80
Protocol : 네트워크 상에서 약속한 통신규약 (ex. HTTP, FTP, SMTP)
IP : 네트워크 상에서 컴퓨터를 식별할 수 있는 주소 (www.naver.com)
DNS : IP 주소를 맵핑한 문자열
Port : 포트 번호 (80)
1. HTML
1-1. HTML 기본 1
tag : 이름(ex. img), 속성(ex. src), 속성값(ex. "hi.png") 을 가짐.
head : 부가 정보
body : 화면에 나오는 content
br : 개행
h1 ~ h6 : heading
p : 본문
a : 다른 페이지로 링크 (href 속성에 링크값. target 속성에는 _blank:새 탭인지 _self: 기존 페이지에서 넘어가는지)
i, sup, ins, del : italic, 제곱, 밑줄, 가운데선
hr : 수평선 삽입
<br /> <!-- 한줄로 끝나는 태그들은 <br /> 처럼 끝나는 태그를 한번에 붙이기도 함. -->
<a href="http://velog.io">velog</a>1-2. HTML 기본 2
1. 리스트 (중요!)
기본적으로 수직 구조. CSS를 이용해서 수평 구조로 바꿀 수 있다.
ul : unordered list (순서 X)
ol : ordered list (순서 O)
li : ul, ol 안에 리스트 요소 하나마다 붙임.
dl : ul, ol 처럼 사용
dt : 상단 타이틀
dd : 리스트 요소
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>2. 표
전체적인 레이아웃을 만드는데 쓰였으나, 현재는 사용 빈도 하락
table (border 속성으로 테두리 줄 수 있음.)
tr : 하나의 행
td : 하나의 열 (rowspan, colspan 속성으로 몇 칸 사용할 지 지정 가능 -> 깨질 수 있어서 많이 안 씀.)
<table border="1">
<tr>
<td rowspan="4">중간고사 성적<td/>
</tr>
<tr>
<td>국어<td/>
<td>영어<td/>
<td>수학<td/>
</tr>
<tr>
<td>100<td/>
<td>90<td/>
<td>95<td/>
</tr>
<tr>
<td colspan="2">평균<td/>
<td>95<td/>
</tr>
</table>3. 이미지
내부 이미지, 외부 이미지 모두 이용 가능.
img (속성 src: 이미지 소스, alt : 이미지가 없을 때 나타나는 문구)
<img src="snsd.png" alt="SNSD"> <!-- 같은 경로 -->
<img src="SMENT/yoona.png" alt="YOONA"> <!-- 다른 경로 -->
<img src="http://taeyeon.smtown.com/purpose.png" alt="TAYEON purpose"> <!-- 원격 이미지 -->
<img src="SARAMENT/sooyoung.png" alt="SOOYOUNG" width="500"> <!-- 너비 주기 -->
4. 사운드
외부 플러그인 없이 출력 가능.
audio (controls : 컨트롤러를 넣을건지?, autoplay : 자동 재생, loop : 무한 반복)
<audio src="weekend.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>1-3. HTML 기본 3
1. video
video
<video source="MV.mp4" type="video/mp4" controls="controls>2. form (중요!!)
뭔가를 입력할 때 쓰는 태그
form action : submit 버튼을 눌렀을 때 정보들이 이동할 주소, method : post(default) get ...)
input (type : text, tel, password, file, radio, checkbox, submit / value: 값)
textarea : 긴 글 (rows, cols)
select: 누르면 펼쳐지는 선택창 (각 요소는 option 태그로 구분, mutiple 속성 : 여러개 선택)
input type="submit" 이 없으면 화면에 아무 것도 나오지 않는다!!!
<form action="주소" method="get">
이름: <input type="text" name="uname" /><br />
사진: <input type="file" name="upic /><br/>
성별: <input type="radio" name="gender" value="m">남,
<input type="radio" name="gender" value="w">여 <br />
언어: <input type="checkbox" name="lang" value="kor">한글,
<input type="checkbox" name="lang" value="eng">영어,
<input type="checkbox" name="lang" value="jap">일어 <br />
자기소개: <textarea rows="5" cols="20" name="uname">5자 이상 입력하세요.<textarea/><br />
국적: <select>
<option>한국</option>
<option>미국</option>
</select> <br />
좋아하는 음식: <select multiple="multiple">
<option>한식</option>
<option>중식</option>
<option>일식</option>
<option>양식</option>
</select> <br />
<input type="submit" />
</form>
3. layout (중요!!)
어떤 태그가 block, line 인지 구분을 하는 것이 중요!
div : 개행이 되는 block 형식 (li, p 역시 block 형식)
span : 개행 X line 형식
1-4. HTML 기본 4
1. div layout
묶고 싶은 블럭을 div로 묶는다.
2. sementic layout
작업 속도를 조금 더 높이기 위해서 div 보다 세분화 된 tag를 사용.
header, nav, section, footer, article ...
2. 마무리
아직 부족하지만, 다시 복습하면서 확인해보니 이 유명한 짤이 이해가 조금 되기 시작했다.
출처
