영상.
1) 파일 전체 정렬: alt+shift+f
2) 파일 일부 정렬: alt + k 다음 alt+f
3) .으로 시작하는 파일/폴더는 숨김전용 파일/폴더임.
4) 모든 파일 저장: Ctrl+Alt+s
5) 빠른 열기(파일/기호 탐색): Ctrl+p
6) 모든 명령 표시: Ctrl+shift+p
수업 중 이용: ctrl shift p : 설정페이지 -> settings.json
7) 바꾸기 Ctrl+h
8) 줄 위/아래 이동: Alt+Up/Down arrow
9) 위/아래에 줄 복사: Alt+shift+Up/Down arrow
10) 내어쓰기outdent(들여쓰기indent 반대) : Shift+tab
11) 코드 정리하기beautify : ctrl+alt+l
12) 편집기 분할(백슬래쉬): ctrl + \
lang = en 이면 영문 페이지라고 인식됨
(번역 인식 시 언어가 한국어여도 디폴트는 영어로 됨)
상위/조상 태그 (위의위의 태그)
부모/조상 태그(위의 태그)
태그
자식/하위 태그(아래의 태그)
후손/하위 태그 (아래아래 태그)
빈 태그(empty tag, self-closing tag): 없이도 으로 작동하는 태그.
html은 6개 버전이 있다. 1.2.3.4.xhtml.5.
type 이라는 속성은 쓸 수 있는 범위가 정해져있음. input, script...
href 하이퍼텍스트 레퍼런스 (어떤 페이지의 참조주소)
class : 중복 가능한 이름을 지정함
전역속성... 아무데나 붙여도 되는 속성.
component 개념에서는 빈태그들에 / 붙여야 함
input요소는 focus 가능한 요소(tab으로 지정)
div, h1 은 focus 가능하지 않음
ㄴ 이런 경우 tabindex 속성(값이 0 포함 양수면) 주면 tab으로도 지정 가능함
contenteditable 속성 신기하다
[ ] : 속성 선택자
inline 요소<-> block 요소
글자 - 상자
html에서 줄바꿈하면 띄어쓰기됨
HTML entity (html 특수문자): (띄어쓰기 명령어)
<div> 를 만약 기호로 나타내고 싶으면 <div> (less than [<]/ greater than[>]})span:
- (가로, 세로, margin top/bottom, padding top/bottom 지정 못함. border는 가능
그리고 margin/padding left right은 됨)
display: 특성을 지정해줌
기본값: 속성+mdn 검색 (initial value)
w3c 는 좀 상업적...
.container 클래스 선택자
맨 마지막: 가상 클래스 선택자 (요소일 수도 있음)
가장 오른쪽의 선택자로 선택됨
일지 선택자
: 이거랑
:: 다름 (엄밀히 얘기하면 ::쓰는게 맞음)
position: absolute; fixed;
float: left; right; < 이 4개 있으면 자동으로 블록요소가 된다
float 근데 좀 outdated...
스타일 상속 > 조상 요소한테 상속받을 때
글꼴: 5가지 속성있음 (자동상속)
font-size
font-weight
font-family
color
text-align
문자속성(자동상속)
color : 색;
wrap; nowrap; wrap : 줄바꿈(의역)
word-break: 띄어쓰기 기준으로 단어 인식하도록 만드는 명령어(단어 기준 줄바꿈: keep-all)
...
...
,,, 더 있었음
고딕체 sans-serif
바탕체 serif
필기체 cursive
고정너비체 monospace
판타지 fantasy
font-family 안에 적힌건 유저(받아보는 입장)의 컴에서 폰트 빼다 쓰는거임(데이터 아낌)
line-height: 3; 이면 3배라는 뜻(글자크기 기준으로)
html가 최상위 요소임
inherit은 부모요소(조상요소 x)한테 받음
CSS 우선순위:명시도라는게 있음
대강
0 상속(-점수가 아예없음)
1 전체 (0)
2 태그(요소) (1)
3 클래스(10)
4 아이디(100)
( ) 안의 값이 클수록 우선됨
0.0.0.0
순서대로
1) 인라인스타일선언(html에 직접 적는거)
2) 아이디
3) 클래스
4) 태그
근데 클래스 11개 있어도(110) 아이디(100) 못이김
주어진 위치가 다름. 아이디가 클래스보다 우선함.
점수가 같으면 나중에 만들어진 CSS가 적용됨.
position: absolute; 쓰면 얘만 똑 떨어져 나옴(고립)
- 대안이 없을 때 쓰는걸 추천. 한 번 쓰면 계속 쓰게 됨(초보자는)
- 프로젝트마다 쓰긴 쓰는데 많이 쓰이진 않음... (한~두번?)
- 남발하면 유지보수 어려워짐
box-sizing: border-box 를 reset.css 를 기본값으로 해서 레이아웃 잡으면 나중에 막혀버림...
position: absolute 하면 웹 줌인/줌아웃 했을 때 모양 고정 안되고 날아갈 수 도?있음.
다른 속성들을 곁들일 수는 있음... 상황 케바케
