프론트엔드(Front-End) : 접속하는 사용자 (클라이언트, Client) 브라우저 상에서 보게 될 영역을 개발하는 부분.
- HTML(Hyper Text Markup Language) : 구조를 정의.
자동차 핸들 : 스티어링 휠이 있다. 깜빡이각 있다. 크락션이 있다.
- CSS(Cascade Style Sheet) : 구조의 생김새 설정.
자동차 핸들: 스티어링 휠의 굵기, 색, 크기, 모양(둥근가, 네모난가)
- Javascript : 구조의 동작 구현.
자동차 핸들: 스티어링 휠을 돌리면 어떻게 되는가? 크락션을 누르면 어떻게 되는가?
IDE(Integrated Development Environment) : Visual Studio Code
- 백 엔드(Back-End) : 서버 단에서 클라이언트가 요청(Request)한 데이터나 로직을 내부적으로 처리하는 부분.
(로그인 처리/ 회원가입 처리/ 게시글 작성 처리..)
IDE : JetBrains Intellij Ultimate
HTML
SEO(Search Engine Optimization)
: 검색 결과에 더 잘 노출될 수 있도록 취하는 모든 조치 혹은 그러한 것.
<b>Hello?</b>
<!-- B 태그 : Bold 글씨를 굵게 한다. -->
<strong>Hello?</strong>
<!-- STRONG 태그 : 글씨를 굵게 한다. -->
<!-- 검색 엔진에 수집을 하는 로봇이 있는데 B는 검색 엔진이 중요하게 생각하지 않는다.
STRONG은 검색 엔진이 이 페이지의 중요한 내용이구나 를 인식한다. -->
<i>아무 내용</i>
<!-- I 태그 : Italic. 기울임 꼴. SEO 의미 없음. -->
<em>중요함</em>
<!-- EM 태그 : Emphasize. 기울임 꼴. SEO 의미 있음. --><s>취소됨</s>
<!-- s 태그 : Strike. 어떠한 내용이 이동/수정 되었거나 더 이상 올바르지 않음을 나타낼 때 사용 -->
<del>삭제됨</del>
<!-- del 태그 : Deleted. 어떠한 내용이 삭제되었음을 나타낸다. -->2<sup>4</sup>
<!-- SUP 태그 : Superscript, 위 첨자 -->
H<sub>2</sub>
<!-- SUB 태그 : Subscript, 아래 첨자 -->
<u>아무내용</u>
<!-- U 태그 : UnderLine, 밑줄 긋기 -->
<ins>뇽뇽뇽</ins>
<!-- INS 태그 : Inserted, 밑줄 긋기, 단, 해당 내용이 작성 후에 추가되었음을 나타낸다. -->IMG
<img alt="" src="">
<!-- IMG 태그 : Image, 이미지를 넣기 위해 사용 -->
<!-- ALT 속성 : Alternative, 어떠한 이유에 의해 이미지를 정상적으로
표시하지 못하는 경우(엑박)에 대신 표시할 텍스트 + 시각장애인의 접근성을
보장하기 위한 조치 -->
<!-- SRC 속성 : Source, 이미지의 주소/경로 -->
<a href="https://velog.io/write?id=20fa0087-c65f-458b-b2d6-fdc01a3e1a5d"
target="_blank">
<img alt="Database" src="../스크린샷 2022-06-10 오후 7.35.22.png">
</a>sup, sub
2<sup>4</sup>
<!-- SUP 태그 : Superscript, 위 첨자 -->
H<sub>2</sub>
<!-- SUB 태그 : Subscript, 아래 첨자 -->
한국<a href="#"><sup>대한민국</sup></a>ul, ol, li
<ul>
<!-- UL 태그 : Unordered List, 순서와 관계 없는 목록. (메뉴) -->
<!-- LI 태그 : List Item, 목록의 항목, UL과 OL 둘다 사용 -->
<li></li>
</ul>
<ol>
<!-- OL 태그 : Ordered List, 순서와 관계가 있는 목록. (목차) -->
</ol>
header, aside, nav, main, footer, section, article
<header>
<!-- HEADER 태그 : 페이지 상단부(로고, 메뉴 등등) -->
</header>
<aside>
<!-- ASIDE 태그 : 페이지와 직접적으로 관계가 없거나 간접적일 내용 -->
</aside>
<nav>
<!-- NAV 태그 : Navigator, 메뉴, 링크, 기능 등의 집합을 내용으로 가짐 -->
</nav>
<main>
<!-- MAIN 태그 : 페이지의 주된 내용 -->
</main>
<footer>
<!-- FOOTER 태그 : 페이지 하단부(저작권, 사이트맵 등등) -->
</footer>
<section>
<!-- SECTION 태그 : 구획을 나누는 목적. 페이지에서 분리될 경우 무의미해지는 내용 -->
</section>
<article>
<!-- ARTICLE 태그 : 구획을 나누는 목적. 페이지에서 분리될 경우에도 유의미한 내용 -->
</article>h1~h6
<!-- H 태그 : Heading, 문서나 구획의 제목. H1 ~ H6. H1이 가장 큰 의미
(문서에 한 개만, 문서의 제목), H6이 가장 작은 의미. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>Table
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UF-8">
<title></title>
</head>
<body>
<table border="1">
<caption>표 제목</caption>
<!-- CAPTION : 표의 제목 (선택) -->
<thead>
<!-- THEAD : 표의 데이터가 아닌 열 이름 등을 담을 때 사용. (선택) -->
<tr>
<!-- TR : Table Row, 하나의 행 -->
<th rowspan="2">코드</th>
<!-- TH : Table Heading, 열 이름을 담는 셀(간) -->
<th rowspan="2">이름</th>
<th colspan="2">인구(만)</th>
<th rowspan="2">면적(km²)</th>
</tr>
<tr>
<th>2021</th>
<th>2022</th>
</tr>
<!-- <tr>
<th>YoY∆</th>
</tr> -->
</thead>
<tbdoy>
<!-- TBODY : 표의 데이터를 담을 때 사용. (필수) -->
<tr>
<td>KR</td>
<td>대한민국</td>
<td>5078</td>
<td>5178</td>
<td>100210</td>
</tr>
<tr>
<td>US</td>
<td>미국</td>
<td>32850</td>
<td>32950</td>
<td>9834000</td>
</tr>
<tr>
<td>JP</td>
<td>일본</td>
<td>12480</td>
<td>12580</td>
<td>377975</td>
</tr>
<tr>
<td>DE</td>
<td>독일</td>
<td>8224</td>
<td>8324</td>
<td>357588</td>
</tr>
<tr>
<td>FR</td>
<td>프랑스</td>
<td>6639</td>
<td>6739</td>
<td>543940</td>
</tr>
<tr>
<td>GB</td>
<td>영국</td>
<td>6622</td>
<td>6722</td>
<td>243610</td>
</tr>
</tbdoy>
<tfoot>
<!-- TFOOT : 표의 데이터에 대한 통계(평균, 합 등) 등을 담을 때 사용. (선택) -->
<tr>
<th colspan="2">평균</th>
<!-- COLSPAN 속성 : 열(가로) 방향으로 통합시킬 셀 개수 (본 셀 포함) -->
<td>11982.16667</td>
<td>12082.16667</td>
<td>1909553.833</td>
</tr>
</tfoot>
</table>
</body>
</html>| 코드 | 이름 | 인구(만) | 면적(km²) | |
|---|---|---|---|---|
| 2021 | 2022 | |||
| KR | 대한민국 | 5078 | 5178 | 100210 |
| US | 미국 | 32850 | 32950 | 9834000 |
| JP | 일본 | 12480 | 12580 | 377975 |
| DE | 독일 | 8224 | 8324 | 357588 |
| FR | 프랑스 | 6639 | 6739 | 543940 |
| GB | 영국 | 6622 | 6722 | 243610 |
| 평균 | 11982.16667 | 12082.16667 | 1909553.833 |
INPUT
INPUT 태그 : 사용자로 부터 값을 입력 받기 위해 사용
속성 :
autofocus: 속성 값을 부여하지 않음. 페이지가 로드되었을 때 자동으로 포커스를 준다.
maxlength: 사용자 입력값이 있을 때, 최대 길이.
max: type 속성 값이 'number'일 때, 최댓값.
min: type 속성 값이 'number'일 때, 최솟값.
name: 서버로하여금 해당 INPUT 값을 식별할 수 있게 하기 위해 존재.
placeholder: 속성 값이 비어있을 때, 표시할 도움말.
value: 해당 INPUT의 값
type: 해당 INPUT의 종류
text: 일반 텍스트(기본값)
tel: 연락처
email: 이메일
password: 비밀번호
checkbox: 체크박스(여/부)
radio: name이 같은 input들 중 하나만 선택할 수 있게함.
<label>
<input checked type="radio" value="1">SKT<br>
<input type="radio" value="2">KT<br>
<input type="radio" value="3">LGU+ -->
</label>
CHECKED 속성 : 해당 INPUT이 체크된 상태로 시작.
VALUE 속성 : 실제로 서버로 전송될 값.select :
<select name="drop">
<!-- SELECT 태그 : 역할은 TYPE이 RADIO인 INPUT과 비슷.
드롭다운. -->
<option value="1">A</option>
<option value="2">B</option>
<option value="3" selected>C</option>
<!-- OPTION 태그 : SELECT 태그 자식. 선택할 수 있는 항목.-->
<!-- SELECTED 속성 : 해당 OPTION 이 선택된 상태로 시작. -->
<!-- VALUE 속성 : 실제로 서버로 전송될 값. -->
</select>
<select>
<optgroup label="대구광역시">
<!-- OPTGROUP : OPTION 태그를 담기 위헤 존재. 아무런 역할도 없음. -->
<option>북구</option>
<option>동구</option>
<option>수성구</option>
<option>달서구</option>
</optgroup>
<optgroup label="서울특별시">
<option>서초구</option>
<option>강남구</option>
<option>송파구</option>
<option>강동구</option>
</optgroup>
</select>
submit: 해당 submit 버튼이 있는 form을 전송한다. (텍스트는 value로) FORM 태그 안에 있을 때만 해당
reset: 해당 reset 버튼이 있는 form의 input을 초기화한다. (텍스트는 value로)
button: 그냥 버튼 (텍스트는 value로)
LABEL 태그 : 하나의 INPUT을 설명과 함께 감싸는 역할. 시각장애인 등 접근성을 위한 조치.
라벨에 감싸져 있으면 감싸진 태그의 내용을 클릭하면 input으로 포커스가 두어진다.
hidden 속성 : 태그를 보이지 않게 한다. 속성 값 없음.
FORM 태그 : 서로 관련이 있는 INPUT 태그들을 한번에 담기 위해 사용.
가령, 회원가입 FORM, 로그인 FORM 등.
활용
코드를 두드리면 문이 열린다