DOM
-각 태그에 대한 정보를 지니고 있는 JS의 객체
W3C
-표준화 단체 기구
VSCODE 단축키
| 기능 | 단축키 | 비고 |
|---|---|---|
| Beautify | Alt+ Ctrl+ L | |
| Live Server | Ctrl+ L, O | - Live Server 사용 시에는 무조건 ‘폴더 > 파일’ 로 되어있어야함. |
| 코드 감싸기 | Ctrl+ Shift+ P→ wrap → 태그입력 |
DOCTYPE - HTML코드의 버전을 명시
| 버전 | DOCTYPE |
|---|---|
| HTML5 | <!DOCTYPE html> |
| XHTML | <!DOCTYPE htmlPUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”> |
빈태그 - 세개 모두 사용 가능하나 혼용X
<img><img/><img />
img태그 아래 여백 없애기
- css → img{ display: block; }
display
-
block요소
- div, h1, p
- 사용 가능한 최대 가로 너비를 사용
- 크기를 지정할 수 있다.
-width: 100%; height: 0;으로 시작(이 값을 가진다는 뜻이 아님)
- 수직으로 쌓임
- margin, padding 위, 아래, 좌, 우 사용가능
- 레이아웃을 잡는 용도 -
inline요소
- span, img
- 필요한 만큼의 너비만 사용
- 크기를 지정할 수 없다.
-widthL 0; height: 0;으로 시작
- 수평으로 쌓임
- margin, padding 위, 아래 사용 불가능
- 텍스트를 다루는 용도
Charset
- EUC-KR : 완성형
- 최 진 이
- 완성형이 없어서 찾지 못하면 한글 깨짐 - UTF-8 : 조합형
- ㅊㅗㅣㅈㅣㄴㅇㅣ
- 조합할 수 있는 것만 있으면 대부분 사용 가능
http-equiv
- 서버나 사용자의 환경에 작동방식을 변경해주는 지시사항을 명시 대표적으로, 인터넷익스플로러에서 우리가 사용하는 웹사이트가 어디에 해당하는 버전에서 최적화돼서 나올 수 있는지에 대한 랜더링방식을 명시 가능
property = “og:”
- OpenGraph 약자
- 브라우저에게 어떤 특정한 정보를 주기 위해서 하는 일종의 문법
base 태그
- base태그는 한 html 문서에서 한번만 사용가능
dl, dt, dd
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>dl안에는 dt, dd만을 포함해야하기 때문에 dl대신 아래와 같은 방법으로 활용
<ul>
<li>
<dfn></dfn> //용어하나를 정의하는 태그
<p></p>
</li>
<li>
<dfn></dfn>
<p></p>
</li>
</ul>src
- srcset이 사용될 수 없는 환경에서는 속성이 대체돼어서 적용
동기, 비동기
- 동기 - 순차적 실행
- 비동기 - 비순차적 실행(필요에 의해 건너띄거나 다시 돌아옴)
novalidate
- 특수한 경우나 test할 때 많이 사용
method
-
GET 방식
- URL주소에 우리가 입력한 데이터에 담겨서 전송됨 -
POST 방식
- URL주소에 정보가 포함되지 않지만 전송되는 정보를 뜯어보면 알 수 있음
- POST방식을 많이 사용하긴 하지만 완전 숨길 수 없기 때문에 암호화를 해야한다.
단위
| 단위 | 설명 |
|---|---|
| em | 자기자신의 폰트사이즈에 영향을 받는다. |
| rem | 최상위 요소인 html태그의 폰트 사이즈 영향을 받는다. |
| vw | 뷰포트의 가로 넓이 사이즈 (백분율) |
| vh | 뷰포트의 세로 넓이 사이즈 (백분율) |
| vmin | 뷰포트의 최소 넓이 |
| vmax | 뷰포트의 최대 넓이 |
margin 중복
-
형재요소들의
margin-top과margin-bottom이 만났을 때
- 수직으로 쌓이면 마진이 겹침 -
부모요소의
margin-top과 자식요소의margin-top이 만났을 때
- 자식요소에margin-top을 주면 부모요소의margin-top으로 사용 됨 -
부모 요소의
margin-bottom과 자식요소의margin-bottom이 만났을때
- 자식요소의margin-bottom을 주면 부모요소의margin-bottom으로 사용 됨 -
둘 다 양수 - 더 큰 값으로 중복
-
둘 다 음수 - 더 작은 값으로 중복
-
각각 양수 와 음수 - 합한 값으로 중복
display: none;
- 존재하지 않는 것
overflow속성
-
요소의 크기 이상으로 내용(자식요소)이 넘쳐을 때, 내용의 보여짐을 제어
-
어디로 부터 넘쳤는지 확인 후 그 부모요소에
overflow속성 적용
| 값 | 설명 |
|---|---|
| visible | 넘친 부분을 자르지 않고 그대로 보여줌 |
| hidden | 넘친 부분을 잘라내고, 보이지 않도록 함 |
| scroll | 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함(강제, 상하좌우 모두 생성됨) |
| auto | 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함(자동, 스크롤 할 부분만 생김) |
font 단축속성
font : 기울기 두께 크기 / 줄높이 글꼴;- 단축속성 사용 시에는
font-size와font-family를 필수로 입력해야함
font-family
-
font-family: 글꼴후보1, 글꼴후보2, ... , 글꼴계열; -
글꼴 이름 설정, 지정한 폰트 중 브라우저에서 쓸게 없을 경우 글꼴 계열을 사용하기 위해 글꼴 이름 후보들과 글꼴계열은 필수다.
word-spacing
- 단어 사이의 간격을 설정
float을 해제하는 방법
-
float속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야 함 -
형제요소에
clear: left, right, both;추가하여 해제 -
부모요소에
overflow: hidden, auto;추가하여 해제(비추천) -
부모요소에
clearfix클래스를 추가하여 해제(추천) -
clearfix::after {content: “”; clear: both; display: block;} -
clearfix가 있는 자식요소에는 무조건float이 있는 요소들만 있어야 한다.
position
| 값 | 설명 |
|---|---|
| static | 기준 없음/ 배치 불가능 |
| relative | 요소 자신을 기준으로 배치 |
| absolute | 위치 상 부모 요소를 기준으로 배치 |
| fixed | 브라우저(뷰포트)를 기준으로 배치 |
| sticky | 스크롤 영역을 기준으로 배치/ IE지원 불가 |
background
background: #fff url("이미지경로") repeat right bottom / auto 100% fixed ;background : 색상 이미지 반복 위치 / 사이즈 스크롤 특성;background-size값은background-position뒤에만 올 수 있으며 “/” 로 구분한다.
