HTML(Hyper Text Markup Language)
HTML 편집기 - Codepen
HTML 편집기 - VS code
확장옵션
- Auto Rename Tag
- Bracket Pair Colorizser
- JavaScript (ES6) code snippets
- Korean Language Pack
- Live Server
- 설정
Format On Save : 설정시 파일저장과 동시에 자동 정렬
단축키
- Ctrl + Enter : 문장의 끝이 아니더라도 한줄 뛰움(라인 브레이크)
- Shift + Alt + 아래화살표 : 행 복사
- Ctrl + 좌/우 화살표 : 해당 문장에서 단어 사이 움직임
- Alt 키를 누른채 커서 이동 : 멀티 커서 선택
- Alt 키를 누른채 커서 위/아래 : 행 줄바꿈
- Ctrl + A => 전체 선택 , Ctrl + K + F => 선택된 코드들을 자동정렬
- ! + Enter : html 기본 형식 출력
중첩 태그
<body>
<!-- 바디 안에 있는 태그가 화면에 표시된다 -->
<!-- 태그는 바디태그 안에 작성 -->
<h1>장바구니</h1>
<ul>
<li>우유</li>
<li>치즈</li>
<li>삼겹살</li>
<li>커피
<ul>
<li>아메리카노</li>
<li>카페모카</li>
<li>녹차</li>
</ul>
</li>
</ul>
</body>
HTML 구조
<!DOCTYPE html>- HTML5 문서를 선언, HTML5로 작성됨을 알림
<HTML>...</HTML>- HTML 문서의 시작과 끝 (HTML 선언 태그 제외)
<HEAD>...</HEAD>- 문서의 상단 제목을 표시하는 <TITLE>태그.
문서의 정보를 설정하는 <meta>태그, <link>태그 등 화면에 출력되지 않는 설정 작성
<BODY>...</BODY>- 실제 화면에 나오는 콘텐츠 작성속성(Attribute)
HTML 속성의 특징
- 모든 HTML 요소는 속성을 사용할 수 있다.
- 속성은 요소에 추가적인 정보를 전달한다.
- 속성은 항상 시작하는 tag 안에 명시되어 있다.
- 속성은 보통 속성명/속성값 으로 짝을 맺어서 입력한다. (이름="값")
이미지 태그, audio 태그, video 태그
<body>
<!-- 다른 페이지로 이동 <a href="이동할주소">이름</a> -->
<!-- 새창으로 다른 페이지로 이동 <a href="이동할주소" target="_blank">이름</a> -->
<a href="color.html" target="_blank">컬러html로 이동</a>
<!-- br태그: 한줄 띄움 -->
<br>
<!-- hr태그: 수평선 -->
<hr>
<!-- 이미지 태그 <img scr="사진위치" alt="사진없을때설명"> -->
<img height="100px" src="images/1.PNG" alt="사진이없을때설명">
<hr>
<!-- 오디오 태그: controls넣어야 재생 가능. <audio src="오디오파일위치" controls></audio> -->
<audio src="media/ukulele.mp3" controls></audio>
<hr>
<!-- 비디오 태그: controls넣어야 재생 가능. <video scr="비디오위치" controls></video> -->
<video hieight="200px" src="media/example.mp4" controls></video>
</body>
ul(Unordered list) > li
<!-- 순서 없는 리스트 -->
<ul>
<li>우유</li>
<li>빵</li>
<li>치즈</li>
</ul>ol(Ordered list) > li
<!-- 순서 있는 리스트 -->
<ol>
<li>일어나기</li>
<li>샤워하기</li>
<li>아침먹기</li>
<li>등교하기</li>
</ol>dl(Description list) > dt,dd
<!-- 정의 설명 리스트 -->
<dl>
<dt>제목:</dt>
<dd>매우 재미있을 책</dd>
<dt>작가:</dt>
<dd>홍길동</dd>
<dt>페이지:</dt>
<dd>500</dd>
</dl>BOLD & ITALIC
굵은 글씨, bold
<!-- <b></b> 이름이나 고유명사 표현 -->
<p>태그 사이에 <b>굵은 글씨</b> 로 표현하고자 하는 내용을 입력</p>
<!-- <strong></strong> 의미적으로 중요함 표현 -->
<p>태그 사이에 <strong>굵은 글씨</strong> 로 표현하고자 하는 입력</p> 기울임 글씨, 이탤릭체
<!-- <i></i> -->
<p>태그 사이에 <i>이탤릭체</i> 로 표현하고자 하는 내용을 입력</p>
<!-- <em></em> 의미적으로 중요함 표현 -->
<p>태그 사이에 <em>이탤릭체</em> 로 표현하고자 하는 입력</p> 많이 쓰는 특수문자
<ul>
<li>오른쪽 한 따옴표: ’</li>
<li>왼쪽 한 따옴표: ‘</li>
<li>오른쪽 쌍 따옴표: ”</li>
<li>왼쪽 쌍 따옴표: “</li>
<li>앰퍼샌드(and): &</li>
<li>더 크다: ></li>
<li>더 작다: <</li>
<li>카피라이트: ©</li>
</ul>네비게이션
HTML5 시멘틱 구조
SEO(검색엔진 최적화)
시맨틱 요소는 검색엔진 최적화(SEO: Search Engine Optimization)에 영향을 준다. 관련 키워드로 검색했을 때 검색 결과 상위에 문서를 노출하려면 SEO 최적화는 필수다. 구글 같은 검색 사이트는 주기적으로 전 세계에 공개된 웹을 수집(Crawling)하고 분석(또는 색인: Indexing)한다.
<header>
사이트의 제목과 로고, 검색 창 등이 위치
<nav>
다른 페이지로 갈수 있는 링크들이 위치
<main>
문서에서 오직 한 번만 사용. 본문을 뜻하며, 콘텐츠 내용 전체를 감싼다.
<article>
문서나 사이트에서 독립적인 부분. 웹 블로그에서의 글, 포럼에서의 포스팅 또는 코멘트 등.
<section>
비슷한 컨텐츠의 묶음. 뉴스의 연예섹션 스포츠섹션 등
<aside>
본문 외의 내용들이 위치
<footer>
저작권 정보나 제작자 정보가 위치
Non-semantic tags( div , span )
<!-- h1~h6(제목), p태그(본문)처럼 가로화면 전체영역 차지 -->
<div style="color: red;>Block-level</div>
<!-- 태그안의 내용까지만 길이를 가짐 -->
<span style="color: coral;">Inline</span>form 요소(element)
웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다.
또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다.
<form action="처리할페이지주소" method="get/post">
입력창 및 버튼 등
...
</form>action 속성은 입력받은 데이터를 처리할 서버상의 스크립트 파일의 주소를 명시합니다.
method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다.
따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다.
input 입력 type
<form action="#">
<label for="name">성
<input type="password" id="name">
</label>
<br>
<label for="name2">이름 :</label>
<input type="text" id="name2">
<!-- 타입 submit은 폼 태그 안의 input태그의 입력내용을 서버로 전송 -->
<input type="submit" value="전송버튼">
<button type="submit">전송버튼2</button>
</form><!-- 여러 종류의 입력 양식 -->
<!-- div태그로 구역을 나눔 -->
<form>
<!-- Text -->
<!-- value는 값이 보이는상태로 출력 -->
<div>
<label for="name">이름</label><br>
<!-- input태그에 required를 넣으면 값을 필수로 입력해야함 -->
<input type="text" id="name" name="name" value="길동" required>
</div>
<!-- Email -->
<!-- placeholer : 옅은 색으로 value처럼 보이게 -->
<div>
<label for="email">이메일</label><br>
<input type="email" name="email" id="email" placeholder="Enter an email">
</div>
<!-- Textarea : 여러줄 입력박스 -->
<div>
<label for="message">메세지</label><br>
<textarea name="message" id="message" cols="50" rows="5"></textarea>
</div>
<!-- Select : 옵션을 선택하는 것 -->
<div>
<label for="gender">성별</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female" selected>Female</option>
<option value="other">Other</option>
</select>
</div>
<!-- Number : 숫자만 입력가능 -->
<div>
<label for="age">나이</label><br>
<input type="number" name="age" id="age">
</div>
<!-- Date -->
<div>
<label for="bithdate">생년월일</label><br>
<input type="date" name="birthdate" id="birthdate">
</div>
<!-- Radio : name이 같아야함, 하나만 선택 가능 -->
<div>
<label>멤버쉽</label>
<!-- name 속성은 서버로 보내질 값 앞에 붙음 -->
<input type="radio" name="membership" value="simple" id="simple">심플
<input type="radio" name="membership" value="standard" id="standard">스탠다드
<input type="radio" name="membership" value="super" id="super" checked>슈퍼
</div>
<!-- Checkbox : 다중 선택 가능 -->
<div>
<label>I Like</label>
<!-- name 속성은 서버로 보내질 값 앞에 붙음 -->
<input type="checkbox" name="like1" value="bike" id="bike">오토바이
<input type="checkbox" name="like2" value="car" id="car">자동차
<input type="checkbox" name="like3" value="boat" id="boat">보트
</div>
<!-- Input submit : 입력한 내용이 서버페이지로 전송 -->
<input type="submit" value="제출">
<!-- Button submit -->
<!-- <button type="submit">Submit</button> -->
<!-- reset : 초기화 -->
<button type="reset">리셋</button>
</form>
테이블
<table>, <tr>,<td>,<th> 태그 : 표 만들기
<table> : 표 만들기
<tr> : 행(row)
<td> : 열(column)
<th> : 제목셀(굵은글씨)
속성 border는 테두리선의 굵기<body>
<!-- border는 테두리 생성 -->
<table border="1">
<!-- thead: 첫번째 제목행 -->
<thead>
<tr>
<!-- th: 굵은글씨 -->
<th>1행1열</th>
<th>1행2열</th>
<th>1행3열</th>
</tr>
</thead>
<!-- tbody: 첫번째 행을 제외한 나머지 -->
<tbody>
<tr>
<td>2행1열</td>
<td>2행2열</td>
<td>2행3열</td>
</tr>
<tr>
<td>3행1열</td>
<td>3행2열</td>
<td>3행3열</td>
</tr>
</tbody>
</table>
</body>
안녕하세요!!