What is HTML?
HTML은 HyperText Markup Language의 약자로, 웹페이지의 틀을 만드는 마크업 언어다.
웹 페이지의 구조와 내용을 만드는 데 사용된다.
웹브라우저를 통해 보는 웹페이지나 웹 어플리캐이션들의 구조는 전부 HTML로 구성돼있다.
HTML은 tag들의 집합이다.
Tag는 부등호(<>)로 묶인 HTML의 기본 구성요소인데, 아래와 같이 태그로 시작해서 태그로 끝나는 구조를 갖고 있다.
Tree Structure 트리구조
태그는 쌍으로 되어있어, 태그를 열면 닫아줘야 한다.
여는 순서와 닫는 순서 역시 철저하게 지켜지고 있다. 이를 트리구조라고 한다.
부모노드는 자식노드를 가진다.
태그들의 의미는 다음과 같다.
div 태그는 한 줄을 차지 한다. (division)
span 태그는 컨텐츠 크기만큼 공간을 차지한다.
물론 CSS를 이용해서 span 태그이건 div 태그이건 한 줄을 차지하게 혹은 차지하지 않게 만들 수도 있다.
SELF-CLOSING TAG
가끔 가다 닫는 태그가 없는 경우도 있다. 태그 종료를 안 해도 되고, 혹은 셀프 클로징을 해줄 수 있는 태그다.
img 태그를 예로 들 수 있다.
밑의 코드에서 img태그는 src라는 속성을 갖고 그 속성에 대한 값이 "code4human-logo.png"로 들어있다.
자주 쓰이는 태그 정리
a 태그 : 해당 링크로 이동시킨다.
기존 코드에 a 태그를 추가했다. href속성에 링크를 값으로 담아주었다.
그러면 브라우저에서 다음과 같이 보이는데, 코드포휴먼 티스토리를 누르면 code4human.tistory.com으로 이동한다.
ul, li 태그 : 리스트.
ul과 li가 한 쌍이다.
ul은 unordered list을 의미한다.
body 태그에 ul 태그와 li 태그를 추가해보았다.
그러면 브라우저에 위와 같이 나타난다.
ul과 반대 개념으로 ol도 있다.
unordered list도 있으니 ordered list도 있을테니깐 말이다.
ul 태그를 ol 태그로 바꿔보았다.
그러면 순서가 정렬되어 나타난다. 웹사이트에서 소개하는 메뉴 등에 많이 사용된다.
input 태그 : 사용자에게 입력을 받는다.
대표적으로 텍스트박스가 있는데, body 태그 안에 텍스트박스를 구성하는 코드를 넣었다.
텍스트를 입력받을 수 있는 input 태그다.
type 속성에 "text"값을 넣어주고 placeholder 속성에 "type here"를 넣어 빈 공간을 채워준다.
브라우저에 텍스트박스가 생긴다.
로그인 할 때 비밀번호를 입력하게 되는데, 비밀번호는 type 속성의 값을 "password"로 잡아주면 좋다.
비밀번호를 입력받을 수 있는 input 태그를 추가했다.
위처럼 비밀번호 박스가 생긴다.
비밀번호 박스의 빈 공간을 채우고 싶다면 placeholder 속성에 값을 넣어주면 된다.
그러면 위처럼 메시지가 채워진 박스가 된다.
앞서 말했듯 div 태그는 한 줄을 차지한다. input 태그를 div 태그로 감싸보았다.
박스가 두 줄로 구분된다.
type 속성에 "checkbox"를 주면 체크할 수 있는 형태가 생긴다.
아직 기능은 안 되지만 이렇게 형태는 만들어줄 수 있다.
type="radio"를 담은 input 태그가 추가됐다.
"checkbox" 값은 다중선택이 가능하지만 "radio" 값은 한 가지만 선택해야 하는 형태다.
따라서 다중선택, 단일선택 조건에 맞춰 만들면 된다.
단 주의할 점이 있다.
"radio"값을 지정하고 그룹 설정을 해주지 않으면 다중선택이 될 수 있다.
name이라는 속성을 이용해서 하나의 그룹으로 묶어줘야 그 그룹 안에서 선택할 수 있게 된다.
옵션a와 옵션b 모두 name="choice"로 동일하게 하나의 그룹으로 묶어줘야 한다.
textarea 태그 : 줄바꿈이 되는 입력폼
textarea 태그는 input 태그와는 다르게 여러 줄 입력이 가능하다.
다만, 태그를 닫아줘야 한다.
줄바꿈이 되는 입력폼이기 때문에 여러 줄을 쓸 수 있다.
button 태그 : 버튼 생성
button 태그도 클로징을 해줘야 한다.
button 태그를 작성한 결과로 버튼이 생긴 것을 볼 수 있다.
기본적인 폼을 만들 수 있는 html의 태그를 살펴보았다.
How To Embed Javascript in HTML
웹은 HTML, CSS, Javascript의 세트로 작동한다.
Javascript를 HTML에서 사용하는 방법은 1.HTML 내부에 작성하는 방법과 2.HTML외부에 작성하는 방법으로 나뉜다.
1.HTML 내부에 작성하는 방법
script 태그를 이용한다.
2.HTML 외부에 작성하는 방법
script 태그의 src 속성을 이용한다.
이 경우는 자바스크립트 파일(확장자 js)를 별도로 만들어 프로그래밍 하는 경우다.
보통 두 번째 방법을 사용한다.
html, css 지식사이트 목록
'Code > 개발지식' 카테고리의 다른 글
| [용어] 웹 문서, 웹 서버 그리고 웹 사이트 (0) | 2019.10.27 |
|---|---|
| [용어] 웹과 인터넷 그리고 웹 브라우저 (0) | 2019.10.27 |
| 웹 개발자 학습 로드맵(feat. 유투브 뉴렉처) (0) | 2019.10.21 |
| git bash 터미널 계정 바꾸기 (0) | 2019.08.18 |
| CLI(Command Line Interface)에 대하여 (0) | 2019.08.14 |
댓글