VS Code
<!DOCTYPE html> ... 문서의 HTML 버전을 지정, html은 기본적으로 HTML5를 의미,
HTML1 예전버전을 사실 명시할 일은 잘 없고, (예전 버전 사용을 안하므로)
HTML2 혹 있다면 XHTML정도
HTML3 ex) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...>
XHTML
HTML5 (표준)
DOCTYPE(DTD, Document Type Definition)은
마크업 언어에서 문서 형식을 정의하며,
웹 브라우저가 어떤 HTML 버전의 해석 방식으로
페이지를 이해하면 되는지를 알려주는 용도.
<html> 와 </html> ... 문서의 전체 범위,
HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 웹브라우저에게 알려주는 역할.
<head> 와 </head> ... 문서의 정보를 나타내는 범위,
웹 브라우저가 해석해야 할
웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)과 같은,
웹 페이지의 보이지 않는 정보를 작성하는 범위.
<body> 와 </body> ... 문서의 구조를 나타내는 범위,
사용자 화면을 통해 보여지는
로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지와 같은,
웹 페이지의 보여지는 구조를 작성하는 범위.
헤드의 lang이라는 속성은 지정할 문서의 언어(ISO 639-1)를 명시하는 HTML 속성이다.
지정 가능한 언어 목록은 다음 링크에서 확인할 수 있다.
https://ko.wikipedia.org/wiki/ISO_639-1_코드_목록
ISO 639-1 코드 목록 - 위키백과, 우리 모두의 백과사전
ko.wikipedia.org
자바스크립트의 console.log(); ... console에 어떤 기록을 남기겠다(log), () 안에 그 내용 작성
보통은 자바스크립트 파일을 가지고 와서 HTML에 연결하는 것도 하나의 정보로,
많은 경우 HTML의 헤드에다 <script>태그를 작성을 한다. 물론 예외 상황은 있다.
meta 태그는 HTML 문서의 제작자, 내용, 키워드 같은,
여러 정보를 검색엔진이나 브라우저에게 제공.
charset 속성은 문자 인코딩 방식을 지정하는 속성. 웹에선 UTF-8의 사용을 권장
! 브라우저가 프로젝트를 처리할 때,
브라우저는 프로젝트 폴더에 들어가자마자
index.html 파일을 찾게 되므로 index.html을 최상위 경로(루트)에 위치하게 한다.
img 태그의 alt 속성은 이미지가 출력되지 못하는 경우, 대신 출력할 텍스트라고 해서 대체 텍스트라고 부른다.
이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 다양하게 이미지를 출력할 수 없는 상황에
이미지 대신 화면에 나올 글자이다. src와 함께 필수 속성
상대 경로 vs 절대 경로
./ (생략 가능) http (https)
../ / (//)
우리가 개발하고 있는 컴퓨터를 로컬 환경이라고 하고,
내부적으로 live server와 같은 플러그인의 도움을 받거나 기타 등등
우리의 컴퓨터 내부에서 특정한 개발용 서버를 열어 줄 수 있다.
그 개발용 서버는 각각의 포트번호에 의해서 구별이 된다.
나의 컴퓨터 내부의 5501번 주소에서 프로젝트를 개발서버로 오픈한 것.
포트번호가 달라지면 프로젝트도 달라질 수 있다.
이 때, 로컬호스트 주소도 내부에서만 접근할 수 있는 웹사이트주소와 비슷하다.
절대 경로를 표현하는 /는 최상위 경로, 루트 경로를 나타낸다.
CSS
각 브라우저마다 상이하게 설정되어 있을 수 있는 기본값들을 초기화해주는 것을 권장.
파일명.min.확장자에서 보이는 min(Minify의 약어) 키워드는
파일이 난독화나 경량화되었다는 것을 의미한다.
외부에서 가져와 사용하는 플러그인, 라이브러리 등은
직접 수정할 상황이 매우 드물기 때문에
굳이 원본을 사용할 필요가 없어 이 버전을 선택할 것을 권장한다.
복사해온 이 CSS 초기화 파일의 HTML 주소(경로)는 내가 작성한 CSS보다 먼저 실행되도록 그 위에 앞서서 링크를 작성해준다.
cf. 코드펜의 CSS 초기화
Emmet
태그명과 함께 tab키를 누르면서 태그가 자동완성되는 것.
+ tab키
after
각각의 emmet 형태(+tab) 참조
Emmet은 CSS 선택자를 활용해 사용하는 기능이다.
* 기호는 곱하기(몇번 반복할지), {}는 내용을 삽입, $는 순서대로 숫자를 입력하는 것을 의미한다.
상위(조상)요소는 현재 태그를 기준으로 부모를 포함하는, 현재의 태그를 감싸고 있는 모든 상위요소
하위(후손)요소는 현재 태그를 기준으로 자식을 포함하는 , 현재의 태그가 감싸고 있는 모든 하위요소
meta태그나 link태그와 같이 종료 태그가 없는 태그를 빈 태그(empty tag)라고 한다.
작성이 편리함, HTML 1/2/3/4까지는 종료태그 없이 쓰다가
XHTML에서 종료태그를 명확히 엄격하게 작성하다
HTML5에서 두 가지 방식 모두 차용함
태그에서 속성과 속성의 값은 태그의 기능을 확장하는 것으로 볼 수 있다.
빈태그는 시작태그와 종료태그로 감싸서 내용을 채울 수 없는 형태이므로,
속성과 속성값을 사용하여 태그의 기능을 온전하게 한다.
ex) <br>만 예외 (속성, 속성값 사용 X)
요소가 화면에 출력되는 특성은 크게 2가지로 구분된다.
CSS 스타일과 밀접한 내용
1. 인라인(Inline) 요소: 글자를 만들기 위한 요소들 ex) span ... 본질적으로 아무것도 나타내지 않는, 컨텐츠 영역을 설정하는 용도.
요소가 수평으로 쌓임, 태그의 줄바꿈은 띄어쓰기 효과로 나타남.
태그를 연달아 사용하면 글자 사이에 공간이 없이 연달아 나타남.
가로 너비, 세로 높이는 포함한 컨텐츠 크키만큼 자동으로 줄어듬!
style속성을 통하여
글자 요소는 가로, 세로 크기를 지정할 수가 없다!
margin(외부 여백), padding(내부 여백)을 지정할 때,
좌우로는 지정이 가능하나, 상하로는 지정할 수가 없다!
image ... 이미지를 삽입하는 요소
a ... 다른/ 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소.
인라인 요소들은 블록 요소를 자식 요소로 가질 수 없다.
2. 블록(Block) 요소: 상자(레이아웃)를 만들기 위한 요소들 ex) div ... 본질적으로 아무것도 나타내지 않는,
컨텐츠 영역을 설정하는 용도.
요소가 수직으로 쌓임.
가로 너비는 부모 요소의 크기만큼 자동으로 늘어남!
세로 높이는 포함한 컨텐츠 크키만큼 자동으로 줄어듬!
style속성을 통하여
가로 너비와 세로 높이를 지정할 수 있다!
margin(외부 여백), padding(내부 여백)을 지정할 때,
좌우,상하 모두 지정할 수가 있다!
=> 시각적으로 제어하는 데에는 블록 요소가 더 유효함
특별한 의미가 없는 구분을 위해 사용하는 요소.
h1 ... 제목을 의미하는 요소. 숫자가 작을수록 더 중요한 제목.
p ... 문장을 의미하는 요소.
ul ... 순서가 필요없는 목록의 집합을 의미
li ... 목록 내 각 항목(item)
Git과 GitHub
Git은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한
대표적인 버전 관리 시스템(VCS)이다.
'컴퓨터 사이언스 > TIL 정리' 카테고리의 다른 글
| Java (0) | 2022.06.30 |
|---|---|
| MGS day 03 (0) | 2022.06.30 |
| MGS Day 01 (0) | 2022.06.28 |
| [자바스크립트] 일반 (0) | 2022.06.11 |
| [파이썬] tkinter - messagebox 종류 (0) | 2022.06.01 |