Intro
웹=HTML(구조)+CSS(스타일)+JavaScript(동작)
Hyper Text : 한 문서에서 다른 문서로 갈 수 있는 텍스트(링크)
Markup Language : 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어
markup→표시
HTML →웹페이지의 구조 혹은 데이터 작성을 위한 마크업 언어
CSS : 웹페이지의 다양한 스타일들을 정의
Cascading Style Sheets
Style Sheets : 웹페이지의 스타일과 관련된 모든 것을 정해둠
JavaScript : 웹을 이용하는 유저와 상호작용 하기 위한 기능을 추가할 때 쓰는 언어
HTML
<!DOCTYPE html>
HTML
복사
: 문서 형식을 정의
<html lang="kr">
HTML
복사
: 본격적인 태그의 시작 사용하는 주 언어 정의
<html> : 전체 html을 감싸는 태그 1회만 쓰임 html태그 밖에 다른 코드가 존재하면 안된다
lang→주 언어 적어둠
head와 친구들
•
<head>
html문서에 대한 정보를 담고 있음
단 하나 존재, html바로 아래 존재
•
<meta>
문서와 관련된 정보를 담는 태그
브라우저만 읽을 수 있다
옆에 붙는 charset="utf-8"은 한글 안깨지게 하는 용도
•
<title>
탭이나 북마크에 나오는 제목을 지정할 수 있다.
body와 친구들
<body>
실질적으로 보여지는 부분
문서 내 하나 존재
헤드 바로 아래 위치
내부 태그들은 여러번 쓸 수 있다.
아래는 body 친구들(body안에 들어가는 태그들)
Layout
시맨틱 태그(Semantic tag)
: 의미를 가지고 있는 태그
구조를 정의한다
•
header
웹 페이지 혹은 세션의 제목을 담는 태그
•
nav
내비게이션 역할 메뉴를 주로 담고 있다.
•
section
기준에 맞게 구간을 나눈다.
•
article
주 내용을 담기 위한 태그
•
aside
광고나 사이트의 주변 부분을 담는 태그. 주로 광고
•
footer
웹사이트 맨 하단에 사이트의 추가정보를 담는다.
-배치는 css에서-
Text
1.
제목 태그
제목을 나타내고 싶을 때 사용 중요도에 따라 1~6까지(숫자가 작을 수록 글자 크기 up)
2.
본문 태그
paragraphs
단락
글 토막단위 사용
break
줄바꿈
종료태그x
※종료 태그가 없는 것을 빈 요소라 한다.(태그 사이가 비어있음)
종료 태그가 있으면 요소
preformatted
적은 내용 그대로 브라우저에 표시
적은 그대로 나와서 보통은 p로 사용
3.
글자와 관련된 태그
•
strong
볼드체
•
emphasized
이탤릭체
•
subscripted
일반 위치보다 위로
•
superscripted
일반 위치로 아래로
-위의 둘 log이나 제곱 쓸때 유용
•
inserted
밑줄 추가
•
deleted
취소선 추가
※태그를 감싸지 않고 body안에 작성된 텍스트는 일반적인 태그로 감싼 텍스트와 같이 작동한다.
but, css 할 때 불편하니 감싸자
Link
anchor
링크 태그
a옆에 속성 작성
기본 모양 : <a 속성의자리></a>
<a 키="값">
속성 → 키="값"
키=링크주소
값 = 실제 링크 주소
href
연결할 웹 사이트 주소를 담고 있다는 의미
하이퍼링크로 만들어준다.
반드시!작성!
<a href="www.~.com">
속성이란?
태그에 대해 추가적 정보 적용
html 모든 태그는 속성 가질 수 있음
태그가 여러개면 띄어쓰기로 구분
경로
주소+경로
=url
인터넷에서 html페이지, css문서, 이미지 등 자원의 위치를 나타낸다.
1.절대 url
접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치 나타냄
즉, 주소 모두
2.상대 url
기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냄
즉, 기준점 이후 주소
target
링크를 클릭했을 때 해당 페이지를 어디에 열지 정하는 속성
target="_self"
현재 탭에서 열기
target="_blank"
새 탭에서 열기
멀티미디어
img
이미지태그
<img src="이미지url">
빈요소라 종료태그 x
src
소스의 약자
불러올 이미지의 url을 속성 값으로 가진다.
alt="사진 설명"
불러올 이미지가 없거나 실패했을 때 대신 표시되는 문장