Written by
on 

Html

#HTML

##html 기본 ####1. HTML은? 마크업 언어, “하이퍼 텍스트” ####2. 웹 표준 W3C, 웹표준 ####3. 웹 접근성 WCAG 웹 콘텐츠를 더 접근성 있게 만드는 권고안의 넓은 범위 ####4. HTML의 기본구조

<!DOCTYPE html>

-> doctype은 문서 유형을 지정

<head>
		<title>Document</title>
</head>

-> html문서에 관한 기본 정보를 포함

<body>
</body>
</html>

-> <와 >로 이루어진 요소를 ‘테그’라 부릅니다. ####5. 주석 주석은 자주 습관적으로 사용하는 것이 좋습니다. ####6.태그의 요소와 속성

<요소 속성="값>

-> 스스로 닫는 태그 (담을 내용이 없음)

<요소 속성="값">내용</요소>

-> 열리는 태그와 닫히는 태그로 이루어진 태그

####7. 절대경로와 상대경로

절대경로 - http or https로 시작하는 전체주소 - 그 위치 , 주소의 개념 상대경로 - 해당 HTML파일을 기준으로 한 경로/ 생략가능 - ‘현재 위치한 곳을 기준’으로 해서 ‘그곳의 위치’

####8. head태그

문서 메타데이터의 집합으로 인코딩 방식이나 IE 에서의 렌더링 방식을 연결하거나, css파일 JavaScript파일을 연결하는 코드를 작성합니다. ####9. body 태그

브라우저에 표시될 내용 ** ##개발자도구 ####1. 요소 브라우저에서 사용할 수 있는 디버깅 도구로서, 실시간으로 html, css속성을 추가/변경/삭제하며 실시간으로 결과를 확인할 수 있다. ####2. 콘솔 실시간으로 내부의 자바스크립트를 테스트하거나, 로그를 출력해줍니다. 링크로 불러오는 파일이 없는경우나 이미지 파일이 출력되지 않을 경우 이곳에 에러메시지가 표시된다. **

블록과 인라인

####1. 블록요소 ex)

<h1></h1>
<p></p>
<div></div>

블록요소는 줄 바꿈이 일어나는 형태이며, 기본적으로 width가 전체 너비의 값을 가집니다. ####2. 인라인요소 ex)

<strong></strong>
<a href=""></a>
<span></span>

인라인 요소는 줄바꿈 없이, 기본적으로는 자신의 내용만큼의 가로너비를 가집니다. 블록요소는 인라인 요소를 포함할 수 있지만 인라인 요소는 블록요소를 포함할 수 없습니다. ####3. 레이아웃 요소

ex)

<div></div>
<span></span>

div와 span은 오직 블록과 인라인 방식의 레이아웃을 구현하는데에 사용합니다. *** ##HTML 태그

####1. 헤딩(주제, 제목)

ex)

<h1>HTML</h1>
<h2>역사</h2>
<h3>개발</h3>
<h3>최초규격</h3>

-웹 페이지의 개요를 나타냄 -중요도 순으로 개요를 나타낼 때 사용합니다. ####2. 줄 바꾸기 ex)

<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Repudiandae sequi ratione
tenetur reiciendis cum in totam atque ipsum
similique quae.</p>
<p>Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur, ab.<br>

-p 태그는 태그를 기준으로 문단 나눔 -br 태그는 해당 태그를 기준으로 줄 바꿈 ####3. 그 외 -hr태그: 수평선 -blockquote태그: 인용문 -pre태그: 이미 형식화된 텍스트

4. 줄바꿈 없는 텍스트 태그

ex)

<strong>강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

<em>강조할 텍스트</em>
<i>기울여 표시할 텍스트</i>

<mark>형광펜으로 그은 효과의 텍스트</mark>

-strong, b태그 : 강조 굵게 표시 -em, i태그: 문맥상 특정부분 강조, 이탤릭 표시) -mark태그: 형관펜 효과 ####5. 링크 ex)

<a href="http://www.naver.com" target="_blank" title=“네이버 열기”>sdf</a>

href: 이동할 페이지 주소 target: 링크 걸린 페이지를 여는 방법(self는 현재창에서 주소바꾸기/ blank는 새창에서 링크 열기) ####6. 이미지

<img src=“이미지 경로" width="100" height=“200" alt=“이미지 설명">

####7. 목록 Ordered List

<ol>
<li>항목</li>
<li>항목</li>
<li>항목</li>
<li>항목</li>
<li>항목</li>
</ol>

Unordered List

<ul>
<li>항목</li>
<li>항목</li>
<li>항목</li>
<li>항목</li>
<li>항목</li>
</ul>

####8. 목록 속성 -type

값 설명
1 숫자(기본값)
a 영문 소문자
A 영문 대문자
i 로마숫자 소문자
I 로마숫자 대문자

-start 시작할 숫자 지정

-reversed 역순으로 표시 ex)

<ol type="A" start="3" reversed>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

####9.테이블의 기본 구조

<table>
<caption>두 학생의 성적 비교</caption>
<tr>
th는 테이블의 헤더 셀
<th>이름</th>
<th>나이</th>
<th>점수</th>
</tr>
<tr>
<td>철수</td>
<td>23세</td>
<td>70점</td>
</tr>
<tr>
<td>영희</td>
<td>21세</td>
<td>89점</td>
</tr>
td는 일반 셀
</table>

위의 결과

이름 나이 점수
철수 23세 70점
영희 21세 98점

####10. 셀 병합 ex)

<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
병합된 셀 수 만큼 행(tr)안에 셀을 덜 적어 줌
</table>

colspan은 가로로 셀을 합칩니다.

<table>
병합된 셀 수 만큼 다음 행(tr)의 셀(td)개수가 줄어듬
<tr>
<td rowspan="3">a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>d</td>
</tr>
</table>

rowspan은 세로로 셀을 합칩니다. ####11. 행의 구조화 -thead, tbody, tfoot 태그를 통해 행을 구조화 시킬 수 있습니다. -thead와 tfoot은 table에서 한 번만 선언될 수 있으나. tbody는 여러번 선언되어 행을 그룹화 할 수 있습니다.

####12. form 요소란 무없인가 ex)

<form action="" method="get">
<label for="username">ID</label>
<input type="text" id="username">
</form>

-form은 브라우저(클라이언트)에서 서버로 데이터를 전송하기 위해 사용하는 태그입니다. ####13. form의 method 속성 -method란? : 폼에서 서버로 데이터를 전송하는 방식을 결정 -get: URL에 데이터를 담아 전달 -post: URL과는 별도로 데이터를 전달. -아이디/패스워드와 같은 중요한 정보는 get방식으로 전달하지 않습니다. -action : form에서 데이터를 전송할 URL ####14. input태그

input태그의 주요 속성들

<input type="text" id="username">
<input type="password" id="password">
<input type="radio" id="radio">
<input type="checkbox" id="checkbox">
<input type="button">
<input type="file" id="file">
<input type="submit">
<input type="reset">
<input type="hidden" id="hidden" value="hiddenValue">

<input type="text" value="disabled" disabled>
<input type="text" value="readonly" readonly>
<input type="text" required>
<input type=“text" placeholder=“공백은 안됩니다">
<input type="text" size="3">
<input type="text" maxlength="10">
<input type="checkbox" checked="checked">
<input id="radio1" type="radio" name="agree" checked="checked">
<input id="radio2" type="radio" name="agree">

####15. textarea태그 ex)

<textarea name=“content" cols=“30" rows=“10"></textarea>

input요소는 한 줄의 텍스트만 입력가능 합니다. 여러줄의 텍스트를 입력받으려면 textarea를 사용합니다. ####16. labe태그

label내부에 표현

<label>ID <input type="text"></label>

label과 별도로 표현

<label for="username">Username</label>
<input type="text" id="username">

for 속성과 form요소의 id를 연결시키면 label이 정확히 해당 form요소를 가리키게 됩니다. ####17. select태그 ex)

<select name="number" id="select-id">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>

-select태그는 여러개의주어진 값 중 일부를 선택하는 역할을 합니다. -multiple 속성을 가질경우 shift키를 이용해 여러개의 값을 선택할 수 있습니다. -size 속성을 가질경우 한번에 option을 몇 개 보여줄지 정합니다. ####18.optgroup 태그

<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</optgroup>
</select>

option을 그룹화하여 보여줍니다. ####19. button태그 ex) 버튼의 요소별 예시

<button type="submit">submit type button</button>
<button type="reset">reset type button</button>
<button type="button">button type button</button>

button 요소는 input요소의 간은 type을 대체할 수 있습니다. ####20. fieldset, legend태그 ed)

<fieldset>
<legend>Login</legend>
<label>username : <input type="text"></label>
<label>password : <input type="password"></label>
</fieldset>

HTML

HTML강의를 시작해봅시다

CSS

Chapter2는 CSS입니다!

Python

HTML이 끝나면 Python을 배우죠

```