📄HTML/CSS

1 minute read

도입

역시나 쓰면서 익히는 것이 제일이다. 그래서 체계적으로 정리하지는 않고 메모처럼 추가해 나갈 예정이다. 필요시 구글링해서 찾겠지만 w3school 말고 mdn에서 찾아보기를 추천한다.

HTML

<head>: Meta 태그로서 보이지는 않지만 여러가지를 세팅할 수 있다. 예를 들어 검색 엔진에 노출될 컨텐츠를 정하는 일도 가능하다.

<meta property="og:image" content="~~">  

Attibute의 값 설정은 true, false 이외에도 enabled로 설정할 수도 있다. (ex) autoplay="enabled"
태그는 block 타입과 inline 타입으로 나뉘는데 block 타입은 줄이 넘어가고 옆에 위치하지 않는다. <div>나 <p> 같은 태그들이 보통 block 타입이다.
Html 작성시 !를 치면 자동완성으로 기본폼을 작성할 수 있다.
Html에서 script는 <body>의 마지막에 넣도록 한다. 그래야 위에 넣은 것들이 변환되어 적용된다.
<input type="submit">처럼 속성으로 입력 포맷을 정할 수 있다.
form에서 action에 html 파일을 적으면 submit때 이동하게 되고 method는 GET이나 POST이다.

CSS

Cascading Style Sheet: Cascading은 위에서 아래로 흐른다는 뜻이다. 즉, 위에서 아래로 브라우저가 읽어서 적용한다는 뜻이고 그래서 같은 속성이 여러개 있어도 제일 마지막에 정의된 녀석이 적용된다.
CSS를 추가하는 방법
1. Html안에서 추가하려면
2. 외부 CSS를 link 태그로 연결한다(External CSS)

display 속성으로 block, inline을 설정할 수 있는데 inline은 width, height등을 가질 수 없다. 그래서 <div>를 inline으로 바꿔보면 화면에서 사라지는 것을 확인할 수 있다. inline은 좌우로만 margin, padding을 가질 수 있다.

margin 속성은 시계방향으로 위, 오른쪽, 아래, 왼쪽 순서이다.
display: inline-block; 블록이면서 가로로 배열된다. 하지만 비추천으로 이런 용도라면 flex를 쓰자.
Collapsing margin: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
* {속성} 이렇게하면 모든 태그에 적용이 가능하다.
height: 100vh;: Viewport height(화면 크기)의 100배
Pseudo Selector: span:nth-child(3n+2) {…}
Combinator
1. div>span {...}과 같은 형태는 <div>의 자손이 아닌 자식인 에게 스타일을 적용시킨다.
2. p+span {...}과 같은 형태는 <p>와 같은 위상의 바로 뒤에 있는 형제에게 스타일을 적용시킨다.
3. 같은 위상이되 안 붙어있다면 p~span {...}
focus-within은 자식이 포커스 되었을 때 부모가 바뀌는 것이다. form이 있고 그 안에 input이 있을 때라던지 반대도 가능하다.

선택자 정리

h1 {  
    color : red;  
}  

* 전체 선택자 : body보다 넓은 개념이다.
- Pseudo-class selector: :로 확장하는걸 가상클래스 선택자라고 한다.
- Pseudo-element selector: ::은 가상요소 선택자라고 한다.
# 아이디 선택자
. 클래스 선택자: 여러 개 사용이 가능하다.

<h1 class="aaa bbb">  

기본 속성 선택자: 대괄호 안에 속성과 값을 넣어 한정시킬 수 있다.

input[type=text] {  
    background: red;  
}  

후손 선택자: 말 그대로 자식을 포함해서 더 후손까지 적용시킬 수 있다.

#header h1 {  
    color:blue;  
}  

(아이디가 header인 태그의 후손인 h1 선택)

자손 선택자: 선택자A > 선택자B. 바로 아래 자손만 적용시킨다.
동위 선택자: 선택자A + 선택자B. 바로 뒤에 있는 동위 태그에 적용시킨다.
반응선택자
:active
:hover
상태선택자
:checked
:focus
:enabled
:disabled
구조선택자

li:nth-child(2n+1)  

중 저 수열에 해당하는 애들만 적용된다.

의 자식중이 아니라

중이라는것을 주의한다.

📄HTML/CSS

도입

HTML

CSS

선택자 정리

You may also enjoy

🅰️Angular

SQL of Oracle

Chrome Shortcuts

🧱Ethereum