HTML CSS 정리

jjinichoi·2022년 5월 18일
0

DOM

-각 태그에 대한 정보를 지니고 있는 JS의 객체


W3C

-표준화 단체 기구


VSCODE 단축키

기능단축키비고
BeautifyAlt+ Ctrl+ L
Live ServerCtrl+ 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-topmargin-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-sizefont-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 뒤에만 올 수 있으며 “/ ” 로 구분한다.
profile
🏃‍♀️

0개의 댓글