HTML
취미로 웹을 조금씩 공부해보려고 한다.
회사에서 일하면서 간단한 운영툴 정도는 직접 만들 수 있으면 훨씬 좋지 않을까 라는 생각이 들기도 했고,
만들고 배포하는것 자체가 어플보다 훨씬 접근성이 좋기 때문에 배워두면 나쁘지 않겠다는 생각이 들었다.
정말 간단한 웹을 만들 정도만 조금씩 공부를 할 예정이다.
HTML
HyperText Markup Language
Hyper Text 는 초월적인 문자로
일반적인 문자가 선형적으로 이동하는것과 다르게 (책으로 예를들면 1쪽에서부터 2쪽으로 봐야하는)
웹페이지가 저기 페이지로 갔다가, 이쪽 페이지로 왔다가 할 수 있듯이 비선형적으로 움직이는 문자를 말한다.
MarkUp Language 는 문서나 데이터의 구조를 기호나 태그를 통해 표시하는 언어다.
요약하면 HTML은 태그를 이용해 초월적인 문자의 구조를 기록해놓은 언어(?)
배우다 보니 논문때문에 HTML이 나왔다는 얘기가 있던데 잘 모르니 패스
HTML은 위와 같은 태그 방식을 사용한다.
기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
비주얼 스튜디오 코드에서 !를 치고 엔터를 누르면 위와 같이 기본 구조가 생성된다.
!DOCTYPE html
브라우저에게 해당 문서가 어떤 버전의 HTML을 따르는지를 웹 브라우저에게 알려준다.
해당 부분을 명시하지 않으면 브라우저가 옛날에 작성된 문서라고 간주하고 옛 버전에 맞춰서 문서를 해석하려고 하기 때문에 최신 웹 기술을 사용한다면 웹페이지가 렌더링 되지 않을수도 있다.
html lang="en"
HTML문서의 루트 요소이며, 문서의 언어를 지정한다.
head
헤드 부분은 해당 문서의 메타데이터를 작성하는 부분이다.
문서 제목, 스타일 시트, 자바스크립트 파일등이 포함 된다.
기본으로 만들어진 구조의 메타데이터를 보자면
charset - 문서의 문자 인코딩을 정의. 위의 문서에서는 유니코드 문자 인코딩 방식으로 정의
viewport - 모바일 장치에서 웹페이지가 올바르게 표시되도록 뷰포트 설정
title
head안에 있는 title 태그는 우리가 흔히 브라우저에서 볼 수있는 탭에 써진 텍스트다.
body
실제 유저에게 보여주는 콘텐츠들을 작성하는 부분이다.
많은 문자들을 바디 안에다가 쓰게 된다.
태그
제목 태그 H1 ~ H6
<h1>제목1</h1>
<h2>제목2</h2>
<H3>제목3</H3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
이런식으로 제목을 달 수 있다.
p - paragraph
<p>단락 1</p>
<p>단락 2</p>
paragraph의 약자로 단락을 나눌 수 있다.
a - anchor
<a href="#title1">제목으로 이동</a>
<a href="AnotherPage">다른 페이지 이동</a>
<a href="http://www.naver.com">네이버</a>
<h1 id="title">제목</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#">최상단으로 이동</a>
Anchor (닻) 의 약자
href에 #요소id를 입력해서 해당 부분으로 이동을 할 수도 있고,
다른 페이지로 이동할수도 있고,
링크로도 이동할 수 있다.
그냥 #만 입력하면 최상단으로 이동한다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
<a> - HTML: Hypertext Markup Language | MDN
HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크 목적지
developer.mozilla.org
img
<img src="이미지 주소 or 파일" alt="이미지 설명">
image의 약자로 이미지를 표시한다.
src 는 source의 약자로 해당 이미지의 소스를 넣어주면된다.(링크나 파일 전부 가능)
alt는 alterate로 대체하다인데, 이미지를 불러올 수 없을 때 위 스샷처럼 해당 문자열을 출력한다.
닫는 태그는 필요 없다.
ul / ol / li
<ol>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
<li>요소4</li>
<li>요소5</li>
</ol>
<ul>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
<li>요소4</li>
<li>요소5</li>
</ul>
ol - Ordered List
정렬된 리스트로 순서대로 숫자가 생긴다.
ul - UnOrdered List
정렬되지 않은 리스트로 그냥 요소의 맨 앞에 점이 생긴다.
li - List Item
List 안의 아이템 태그다.
- 중첩
- 중첩1
- 중첩2
- 중첩1
이것처럼 계속해서 중첩이 가능하다.
br / hr
저그<br>
프로토스<br>
테란<br>
<hr>
관우<br>장비<br>유비<br>
html 안에서 엔터를 쳐서 글을 써도 웹에서는 줄바꿈이 되지 않는다.
br - line break 을 통해 줄바꿈이 가능하다.
그리고
hr - horizontal rule 을 통해 구분하는 구분 선을 만들 수 있다.
닫는 태그는 필요 없다.
Table , tr / th / td
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
<tr>
<td>이름1</td>
<td>나이1</td>
<td>직업1</td>
</tr>
<tr>
<td>이름2</td>
<td>나이2</td>
<td>직업2</td>
</tr>
<tr>
<td>이름3</td>
<td>나이3</td>
<td>직업3</td>
</tr>
</table>
tr - Table Row
행을 담당하는 태그
th - Table Header
표의 헤더를 담당한다.
보통은 1행만 쓰지만 응용하여 여러개를 쓸 수도 있다.
td - Table Data
말그대로 표의 데이터다.
테이블의 값들을 입력할때 쓰인다.
모두 table 태그 안에 넣어주면 된다.
colspan, rowspan
th와 td 태그에 사용할 수 있는 속성이다.
<tr>
<th colspan="2">이름</th>
<th>나이</th>
<th>직업</th>
</tr>
<tr>
<td rowspan="2">이름1</td>
<td>나이1</td>
<td>직업1</td>
</tr>
표에서 해당 부분이 몇개의 행/열을 차지할지를 정할 수 있다.
그 크기만큼 늘어난다.
select , option
<select>
<option>1번</option>
<option>2번</option>
<option>3번</option>
<option>4번</option>
</select>
드롭박스를 만들 수 있다.
TextArea
<textarea cols="100" rows="30"></textarea>
이런식으로 텍스트 입력 박스를 만들 수 있다.
form / label / input / button
<form action="/vote">
<label for="dropBox">하나를 골라주세요:</label>
<select name="dropBox" id="dropBox">
<option value="1">1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
</select>
<input type="text" name="InputText" placeholder="추가 의견">
<button>버튼</button>
</form>
form은 양식을 제출 할 수 있다.
action에 다른 페이지나 다른 주소를 넣어서 이동하게 할 수 있다.
label은 말그대로 라벨을 생성하는데, for에 다른 태그의 id를 넣어주면 label을 눌렀을때 해당 태그가 반응한다.
해당 html에서는 select를 연결시켜 주었으므로 label을 누르면 드랍박스가 반응한다.
input 은 종류가 너무나도 많지만 대표적인 text만 가져왔다.
우리가 회원가입 할때 흔히 보는 id나 password 입력칸을 생각하면 된다.
button은 말 그대로 버튼인데, form안에 넣어주면 양식을 제출한다.
나중에 자바스크립트로 name을 연결해서 다른 동작들을 구현할 수 있다.
위와 같이 작성해서 버튼을 눌러보면 쿼리스트링으로 값들이 들어오는데,
selection의 name인 dropbox와
input의 name인 InputText가 보이는 것을 알 수 있다.
참고로 option에는 value를 적어주어야 양식을 제출했을때 값을 받아볼 수 있다.
span / div
div는 division(분할) 의 약자로 블록(단락)을 나누는 역할을 하고,
span은 블록이 아닌 인라인(줄)을 나누는 역할을 한다.
위 예시처럼 그룹으로 묶어서 스타일을 적용할때 사용한다.
그리고 우리가 변수명을 만들 때 의미를 생각해서 짓는것 처럼 무작정 div만 사용해서 그룹을 묶는것이아니라
header - 머릿말 , main, section, footer - 꼬릿말 등등 div 대신 명시적으로 상황에 따라 쓸 수 있는 태그들이 정말 많다.
html을 분석할때나 크롤링, 스크린리더들이 div를 대신해서 상황에 맞는 태그들을 쓰면 도움이 된다고 하니 역할에 맞춰서 태그를 사용하는것이 좋아보인다.
유용한 것들
주석
<!-- 여기 주석 처리 -->
html의 주석은 놀랍게도 위와같이 신기하게 생겼다.
vs code를 쓴다면 컨트롤 + / 를 누르면 된다.
정렬은 alt + shift + f
Emmet
https://docs.emmet.io/abbreviations/syntax/
Abbreviations Syntax
Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predef
docs.emmet.io
Emmet은 html과 css의 작성시간을 단축시켜주는 확장 기능이다.
vs code에 기본 내장되어 있으며
이런식으로 구조를 수식을 통해 만들 수 있다.
여러 수식으로 응용을 할 수 있으니 익혀두면 정말 편리할 것 같다.