HTML/CSS/JavaScript
HTML (Hypertext Markup Language) : 웹 브라우저가 이해할 수 있는 언어
CSS (Cascading Style Sheet) : 문서를 예쁘게 꾸미는 언어
JavaScript : 문서에 기능을 만들어주는 언어
들여 쓰기
들여 쓰기로 부모-자식 태그를 구분해야 한다. 비록, 웹 브라우저는 들여쓰기를 굳이 구분하지 않지만, 인간이 쉽게 이해하기 위해서 필요하다.
주석 처리
<!-- --> 으로 주석 처리를 한다.head
-> 사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역
1. 타이틀 : 문서의 제목을 입력하는 tag.
2. 메타 데이터 : 인코딩 정보, 문서 설명, 문서 작성자
ex) "charset(인코딩 방식)="utf-8" ", "name(저자 이름 or 문서 종류)="이름" ".
3. CSS, JavaScript
style, link, script
-> 문서의 외형에 영향을 주는 태그들
style : html tag의 style을 정의하는 태그
body {
color : blue;
}link : 외부 css파일을 링킹하는 태그
<link rel="stylesheet" href="style.css" />script
- 콘텐츠 방식
- 링크 방식
body
-> 사람 눈에 실제로 보이는 콘텐츠 영역
block, inline, inline-block
- block (블록 레벨 요소)
레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
ex) <div>, <article>, <section>, ...- inline(인라인 레벨 요소)
블록 요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 좌/우에 여백을 넣는 것만 허용된다.
ex) <span>, <a>, <strong>, ...- inline-block
글자처럼 취급되나, block 태그의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
- CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.
레이아웃
콘텐츠 분할 요소 (div)
-> 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
레이아웃 태그 #1 (header, footer, main)
header -> 블로그 글 제목, 작성일 등의 중요 정보를 담는 태그
footer -> 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
main -> 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
레이아웃 태그 #2 (section, article, aside)
section -> 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할 을 하는 태그
article -> 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
aside -> 문서의 주요 내용에 간접적인 정보를 전달하는 태그로 쇼핑몰의 오른쪽에 따라다니는 "오늘 본 상품" 같은 것으로도 사용할 수 있다.
레이아웃 태그를 왜 알아야 할까?
- HTML5 태그를 의미 있게 사용하기 위해 "Semantic(시멘틱)" 태그를 사용하여 문서 구조를 작성
- 단순히 의미 구분자인 div를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미 있게 전달
- 시멘틱 하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임
콘텐츠
h1 ~ h6
- 문서 구획 제목을 나타내는 태그로 Heading (헤딩) 태그라고 부른다.
- h1 태그는 페이지내에 한번만 사용되어야 하고 구획의 순서는 지켜져야 한다.
p
- 문서에서 하나의 문단을 나타내는 태그이다.
- 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
b, strong
- 글씨의 두께를 조절할 수 있다.
- b태그는 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해준다.
- strong 태그는 굵은 글씨로 변형 후 강조의 의미를 부여한다.
- b와 strong은 시각적으로 굵은 효과는 같지만 의미가 다름으로 사용에 주의
i, em
- 글씨의 기울기를 조절 할 수 있다.
- i 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용할 수 있다.
ex) 등장인물, 외국어 구절, 기술 용어 등 - em 태그는 기울임과 내용에 강조를 나타낸다.
- i와 em은 시각적으로 기울임은 같지만 의미가 다름으로 사용에 주의
u
- 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다.
- CSS로 스타일링 하여 빨간 밑줄을 넣는 것으로 "오타"를 나타내는 것 처럼 사용할 수 있다.
- 단순하게 밑줄만 긋는 용도로는 사용하면 안된다.
s, del
- 글씨에 취소선을 추가할 수 있다.
- s태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다.
- del 태그는 문서에서 제거된 텍스트를 나타낼 수 있다. ins 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현 할 수 있다.
a
- 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
- href 속성을 사용해서 이동하고자 하는 파일 혹은 url을 작성한다.
- target 속성을 사용해서 이동해야 할 링크를 새 창, 현재창 등 원하는 타겟을 지정할 수 있다.
멀티미디어
- 이미지
- 비디오, 오디오
- SVG (Scalable Vector Graphics
img
- 문서 내에 이미지를 넣을 수 있는 태그
- 가장 기본적인 이미지 넣는 방법
- src 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
- alt 속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있음
figure, figcaption
- 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
- figcaption 태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다.
- 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다.
video
- 문서 내에 영상을 첨부할 수 있는 태그
- src 속성을 사용하여 비디오를 문서 내에 첨부할 수 있다.
- poster 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있다.
- source 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.
audio
- 문서 내에 소리을 첨부할 수 있는 태그
- src 속성을 사용하여 소리를 문서 내에 첨부할 수 있다.
- source 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.
- controls 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.
svg (Scalabel Vector Graphics)
- 그래픽으로 만들어진 이미지
- 일반 이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용된다.
- 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용되고 있다.
- img 태그 처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다. (더 많은 사용방식 존재)
- 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다.
리스트
- 정렬되지 않은 (순서가 없는) 목록
- 정렬된 (순서가 있는) 목록
- 설명 목록
ul, li
- 정렬되지 않은 목록 태그
- 기본 불릿(bullet) 형식으로 목록을 그린다.
- li 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
- ul 태그의 자식요소로른 li 태그만 들어와야 한다.
- 하위 리스트를 만들려면 li 태그 안에 ol, ul 태그를 사용하면 된다.
dl, dt, dd
- 설명 목록 태그
- dt 태그에 사용된 단어 혹은 내용의 설명을 dd 태그에 작성할 수 있다.
- 주로 용어사전이나 키-값 이 있는 쌍의 목록을 나타낼 때 사용한다.
- 태그를 여러개 작성하고 하나의 dd태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있다.
- 위와 반대로, dt 태그 하나에 여러개의 dd태그를 가질 수 있다.
표
table
- 표를 만드는 태그
- tr 태그로 행을 구분할 수 있다.(row 라고 부른다.)
- td 태그로 열을 생성 할 수 있다.(cell 이라고 부른다.)
th
- 열(셀)의 제목 태그
thead
- 제목 그룹 태그
- 태그 안에 열 제목의 행을 넣음으로써 그룹을 지을 수 있다.
tbody
- 표 본문요소 태그
- 태그 안에 여러 열의 행을 넣음으로써 본문 요소를 그룹 지을 수 있다.
tfoot
- 표 바닥글 요소 태그
- 문서 버전이 HTML4라면 tfoot은 tbody 보다 먼저 작성되어야 하고 HTML5 버전이라면 thead, tbody, tfoot 순으로 배치 되어야 한다.
caption
- 표 설명 태그
외부 콘텐츠
iframe
- 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
- src 속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다.
- 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.
- name 속성을 지정하면, a 태그의 target 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.
양식태그
- Form
- 설명과 입력
- 버튼
form
- 정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있다.
- 정보를 제출하기 위한 button을 가진다.
- action 속성으로 정보가 제출 되었을 때 페이지를 이동시킬 수 있다.
- method 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.
label
- input, textarea, selectbox의 설명을 작성할 수 있는 태그
- for 속성을 사용하여 연결하고자 하는 태그에 id 속성을 지정하면 label을 클릭하면 연결된 태그가 선택된다.
- label 태그 안에 input을 넣으면 자동으로 for->id 연결과 같은 처리를 해준다.
- id 속성 값이 절대로 중복되면 안된다.
input
- 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
- type 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다.
- value 속성을 사용해 기본 내용을 입력 해둘 수 있다.
- name 속성을 사용해 input의 이름을 지정할 수 있다.
자주사용되는 input 타입
checkbox : input을 체크박스 형태로 만든다.
radio : 라디오 버튼으로 만든다.
file : 파일을 첨부할 수 있게 만든다.
button : value 속성에 입력된 값을 이름으로 갖는 버튼으로 만든다.
hidden : input을 시각적으로 숨겨준다. 정보 제출 시 value 속성에 입력된 값은 전송된다.
select
- 옵션 메뉴를 제공하는 태그
- option 태그를 사용해 옵션을 정의할 수 있다.
- 첫번째 option은 이름이된다.
- value 속성을 선언하지 않은 경우 option 태그의 콘텐츠가 기본값이 되낟.
- 첫번째 옵션이 버튼명이기 때문에 placeholder 속성을 사용할 수 없다.
textarea
- 여러 줄을 입력할 수 있는 대화형 태그
- 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
- cols/rows 속성으로 기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다.
알아두면 좋은 속성
readonly : 사용자가 수정할 수 없는 "읽기 전용"으로 만든다.
required : form이 제출될 때 "필수 입력 사항"으로 만든다.
이 때, 필수 입력에 대한 태그에 따른 안내 문구, 행동 등은 브라우저가 자동으로 처리해준다.
placeholder : input, textarea에 부가 설명을 입력해둘 수 있다. select 태그에선 사용할 수 없다.
distable : 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.
button
- 클릭 가능한 버튼을 태그로 form 태그 내에 어디서든 사용할 수 있다.
- type을 reset으로 지정하면 버튼이 눌리면 입력한 양식이 모두 초기화 된다.
- type을 submit으로 지정하면 form 양식을 제출 할 수 있다. form 태그 내 button 태그의 기본 type은 submit이다.
- button 태그 내 콘텐츠에 태그의 입력이 가능하나, 블록 레벨 태그는 사용하면 안된다.
- disabled 속성을 가질 수 있다.
HTML 주의사항
- Markup 언어는 소문자로 통일한다.
- 닫는 태그를 생략하지 않는다.
- 콘텐츠를 제외한 나머지 내용은 영어로 작성한다.
- 태그들의 id값을 중복시키지 않는다.
- 계층 구조 유지
- 코드는 예뻐야한다.
- 뎁스가 잘 맞아야 유지보수하기 수월해 진다.
- 동일한 의미의 태그 중첩 금지
- b, strong
- 링크 이동하는 a 태그, 클릭할 수 있는 button 태그의 중첩 등등
추천 사이트
TCP School
MDN
W3School
