> 웹문서의 뼈대를 만드는 HTML
HTML은 웹문서를 만드는 기본 언어입니다.
HTML은 웹 브라우저의 여러 내용 중에서 제목과 본문,이미지, 표와 같은 웹 요소를 알려주는 역할을 하며, 웹 개발을 하면서
웹 브라우저에 보여주고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야 한다.
<폴더나 이미지,파일 저장 시 규칙>
01.이름을 지을 때 숫자로만 지을 수 없다.
02.영문보다 숫자가 먼저 이름 앞에 나올 수 없다.(01web.html-X)
03.이름을 한글로 지을 수 없다.영문 소문자로만 짓는다.
04.이름에 공백이 포함되어서는 안된다. 만약 공백이 필요할 경우 -(하이픈)이나 _(언더바)만 사용가능
05.이미지나 파일 등을 이름지을때는 파일과 연관된 단어를 직관적이고 간단하게 지어주는 것이 좋다.
작업을 시작할때 파일을 담을 폴더를 만들어준다. 그 후에 폴더째로 비주얼스튜디오쪽에 끌어담는다. 또는 ctrl+o로 열 수있다.
보통 폴더이름은 회사이름이 들어간다.
HTML 코드 입력하기
!DOCTYPE html
: html문서를 웹 표준으로 작업하겠다고 선언하는 선언문.
html lang="ko"
: html태그는 문서의 시작을 알리며, html문서 전체를 의미함.
lang속성을 이용해 문서에서 사용할 언어를 선언할 수 있음.
"ko" :한글 단순히 언어를 사용할거라고 선언한다는 의미이다.
head
:html문서의 두뇌와 같은 역할을 하는 태그로, 브라우저에 실제 표현되지는 않지만
다른 외부 파일(css,js...)을 연결하거나 언어의 인코딩, 화면비율 등등을 정의하는 태그
meta
:html문서의 정보가 들어있는 태그. "데이터에 대한 데이터"를 정의하는 태그.
charset="UTF-8"의 속성을 이용해 전세계 언어를 인코딩(해석)해주고, name="viewport"를 이용해 디바이스에 따른 영역을 설정하기도 하며, 검색 엔진에 해당 페이지를 노출시키는 역할도 함.
title
:브라우저 탭에 표시 보통 회사의 이름이나 사이트 명 등을 적음.
body
:실제 브라우저에 표현되는 영역으로, 다양한 태그를 이용해 웹 구조를 설계하는 공간.
<단축키모음>
-주석 단축키 :ctrl + /
-html파일 만들때 이름.html로 확장자 잘 써있는지 꼭!!확인하기!
-html파일 만들었으면 첫 줄에 !+enter 쳐서 기본구조 출력하기 -> 저장(ctrl+s)
[block속성]
태그의 성격(속성) 중 하나로, box의 형태를 가지고 있는 태그.
css를 이용해 넓이와 높이를 설정할 수 있고, 여러 개를 출력하면 위에서 아래로 출력됨.
1. 제목태그(h1~h6)
제목을 나타내는 태그로, h1~h6까지 있음.
h1이 가장 크고, 숫자가 높아질수록 글자크기는 점점 작아짐.
기본적으로 제목에 대한 강조를 표시하기 위해 글자가 굵게 표현됨.
h1은 보통 로고 자리로, html문서 1개당 1번만 출력할 수 있다.
2.단락태그 p
단락을 나타내는 태그로, 긴 글을 입력할 때 사용함.
3.줄바꿈 태그 br 단독태그
단락이나 제목 등, 내용 안에서 줄바꿈이 필요한 부분에 br태그를 사용하면
줄바꿈을 할 수 있다.
단독태그로, 닫힌 태그 없이 사용하는 태그. br 또는
형태를 사용하고, 둘다 웹표준 문법 (단독태그의 기본 문법 중 하나)
넓이를 가지고 있진 않지만 위에서 아래로 내려오는 속성이 있기 때문에 block 속성으로 본다.
4. 정의태그 d1,dt,dd
어떠한 단어를 정의하고, 정의에 대한 내용을 설명하는 태그.
실무에서는 보통 매장이름과 해당 매장의 정보들을 나열할때 주로 사용함.
반드시 d1로 안에 있는 dt,dd를 감싸주어야 하고,dt는 제목으로 1번만 쓸 수 있고
dd는 제목에 대한 설명으로 여러 번 쓸 수 있다.
5.목록 태그 u1,li / o1,l1
ul,li는 순서를 정의할 수 없는 항목을 나열할때 사용하는 목록태그로,
보통 웹사이트 작업을 할 때 메뉴 부분에 사용됨. 사용 빈도가 굉장히 높은 태그
ol,li는 순서가 있는 항목을 나열할 때 사용하는 목록태그로
보통 책이나 문서의 목차 등에 활용함. 사용빈도는 낮은 편.
[inline속성]
inline속성을 가지고 있는 태그들은 여러개 출력시 가로로 출력되며, 출력된 결과물 사이에
공백이 1칸씩 생김. line 즉, 줄이기때문에 넓이 높이를 가질 수 없음.
block속성과는 다르게, 내용이 포함된 부분까지만 영역을 가짐.
1.글자를 굵게 표현하는 태그 b,strong
b태그는 문자의 일부분을 강조하고싶을때 strong태그는 내용을 강조할 때 사용하지만 경고할때를 사용한다.
보통 스트롱태그는 사용자가 반드시 알고있어야하는 내용에서 태그를 사용한다. 웹접근성을 위한 태그로 사용된다.
b,strong태그 모두 글자를 굵게 강조하는 태그, 출력 시 눈에 차이점이 보이지는 않지만
b태그는 문장의 일부를 단순 강조할때 사용하고, strong태그는 시각장애인들을 위한 웹접근성을 고려한 태그로 화면낭독기(글자를 읽어주는 프로그램-센스리더)에서 구분 할 수 있음.
사용자들이 반드시 알아야하는 경고의 의미를 담은 내용은 strong태그를 이용하는 것이 좋음.
2.글자를 기울여 표현하는 i,em
글자를 강조할때 사용하는 태그로, 적용시 기울임서체(이탤릭체)로 표현해줌.
em태그의 경우 문장의 흐름에서 특정 부분을 강조할때 사용하고,
i태그의 경우 마음속의 생각이나 용어, 관용구 등에 사용함.
하지만 사전적인 의미일 뿐, 엄격하게 구분해서 사용하지는 않음.
3.취소선을 나타내는 s태그, 밑줄을 나타내는 u태그
s태그는 글자 중앙에 취소선을 그어서 내용이 취소됐음을 나타내는 태그이고
u태그는 글자 밑에 내용을 강조하기 위해 밑줄을 나타내는 태그.
4.sup : 윗첨자
5.sub : 아랫첨자
+글자의 특정 부분을 꾸며주는 span태그 ★★★★★
span태그는 글자의 일부분을 꾸밀 때 주로 사용하는 태그로,. inline속성의 대표 태그이다.
단순 글자를 꾸미는 용도 의외에도 햄버거 버튼을 만들거나 디자인 요소를 만들 때 많이 사용됨.
