HTML 프로그램
Visual Studio Code
웹 문서를 만드는 규칙(파일 명명 규칙)
1.하나의 프로젝트 당 하나의 폴더를 만들어 Html, Css, Javascript 파일들을
분리하여 저장해야 한다. 그리고 폴더의 이름도 반드시 영문 + 숫자 조합이어야 한다.
ex) portfolio폴더 -> html폴더/ css폴더/ 이미지 폴더...
- 웹 파일을 생성할때에는 영문 소문자를 사용하여 이름을 짓는다. 한글이름은 지을 수 없다.
ex) about.html - 웹 파일 이름에 숫자가 들어갈 경우 영문 소문자 다음에 쓴다.
ex) about01.html (o)
01about.html (x)
- 웹 파일 이름에 공백이 필요한 경우 공백 대신 - (하이픈), _(언더바)를 이용한다.
ex) abot_01.html(o)
abot-01.html(o)
abot01 html(x)
- 웹 파일 이름에 .은 확장자 앞에만 쓸 수 있다.
ex) abot-01_sub.html(o)
abot.01_sub.html(x)
웹 표준
인터넷 초기에는 대부분 인터넷 익스플로러를 사용했는데 호환성이 좋지않아 다른 브라우저에서는 화면이 다르게 보여지거나 기능이 작동하지 않는 경우가 많았다.
그래서 w3c(world wide web consortium)에서 웹 페이지 표준화 작업을 진행했다.
웹 표준안은 HTML태그가 중심이며, 모든 브라우저에서 공통으로 인터넷을 사용하고 자유롭게 커뮤니티를 만들어 가는 것이 웹 표준이다.
= 모든 사용자가 모든 브라우저에서 어떠한 환경을 가졌든 동일한 웹 서비스를 이용할 수 있게 표준안에 따라 웹 문서를 작성하는 것을 말한다.
웹 접근성
어떤 브라우저든 어떤 디바이스를 사용하든 사용자가 어떤 장애환경을 가지고 있던지 웹 서비스를 편리하게 이용하도록 만드는 것을 말한다. 즉, 웹에 어떻게 더 쉽게 접근할 수 있느냐를 뜻한다.
Visual Studio Code 기본기능
탐색기 - 작업중 또는 열어둔 폴더를 탐색하는 기능
검색 - 찾고 싶은 글자나 태그 검색 기능
깃 - 작업 기록
디버그 - 코드 오류 잡는 기능
확장 프로그램 - 추천 확장 프로그램
Coding
새 파일에 !를 넣어주면 기본 양식이 나타난다.
< !DOCTYPE HTML>
-해당 문서를 웹 표준(html 5)로 작성하겠다는 선언문,
-파일에게 어떤 언어를 사용할 것인지 알려주는 역할,
-DOCTYPE은 문서의 맨 첫줄에 쓰여야 한다.
< html>< /html> : 문서의 시작 부분, html문서 전체를 의미
lang="ko": html문서에서 사용할 언어를 지정
html에서 속성은 속성이름 = "값" 형태를 사용하며 태그마다 쓸 수 있는 속성이 정해져 있다.
"ko" : 한국어 문서
"en" : 영어 문서
"ja" : 일본어 문서
"zh" : 중국어 문서
속성과 속성값을 사용하는 문법
-태그는 각 태그마다 쓸 수 있는 속성이 정해져 있다.
이때 속성을 나타낼 때에는 태그이름 다음에 한 칸 공백으로 구분하여 속성과 속성 값을 표기한다.
[기본형]
<태그명 속성명 = "값"
< head>
html 문서의 두뇌역할을 한다. 사람의 생각도 눈에 보이지 않듯이 head안에 쓰여진 정보들은 브라우저에 보이지 않는다. 이 부분은 브라우저가 화면을 보여줄때 어떻게 보여줄지 해석(생각)하는 부분이다. head안에는 css파일이나 javascript파일, 파비콘 이미지 등 외부파일을 연결하는 곳이다.
< meta>
메타태그는 웹 문서에서 메타정보를 표현할 때 사용하는 태그이다.
메타정보란 데이터에 대한 데이터를 말하며, 예를들어 문서에서 사용하는 언어의 형식이나
브라우저가 보여줘야 하는 해상도 사이즈 등을 설정하는 역할을 한다.
메타태그의 속성
meta 태그의 속성
1. charset : 각 국가별 언어에 맞게 보여주는 기능
값이 UTF-8로 설정되어 있어야지만 언어가 깨지지 않고 제대로 표현된다.
- name : viewport - 화면에 보여지는 배율을 설정한다.
content - 브라우저에서 표현될 컨텐츠를 의미(어떻게 보여줄건지 )
with=device-with는 접속하는 기기의 가로사이즈에 맞춰 보여주겠다는 의미
initial scale은 기본 배율, 1.0은 각 100% (각 디바이스에 맞는 원본 배율)을 의미
< title>
브라우저의 탭 이름, 사이트의 이름을 적는 부분
< body>
브라우저에서 실제 표현되는 공간. 여기에 글자나 이미지 등 컨텐츠를 작성
< !-- --> 주석
메모장 영역
보통 개발자끼리 소통하는 용도나 문서의 구조를 구분하여 표기하는 역할
[기본형]
< !-- : 주석의 시작 부분
-- > :주석의 끝 부분
[단축키]
Ctrl + /
