HTML TIP
inline 요소 특징
옆으로 수평하게 쌓인다.
<span>
글자 요소는 width, height 를 사용할 수 없다.
글자 요소는 margin padding은 위아래는 사용할 수 없고 좌우만 사용할 수 있다.
인라인 요소 안에는 블럭 요소를 사용할 수 없다.
block 요소 특징
위에서 아래로 수직으로 쌓인다.
block 요소의 가로너비는 부모요소만큼 최대한 늘어난다.
block 요소의 세로너비는 최소한으로 작게 유지한다.
block 요소 안에는 block , inline 요소 모두 사용할 수 있다.
전역 속성
title
: 요소의 정보나 설명을 지정
style
: 태그에 css 선언하는 방식
class
: 요소를 지칭하는 이름. ( 중복 가능 )
id
: 요소를 지칭하는 이름. ( 중복 불가능, 고유 이름 )
data-이름="데이터"
: 데이터를 잠시 저장해 두고 js에 활용할 수 있다.
*** defer 속성 활용
<script defer src="./main.js"></script>: html 이 모두 로딩 된후 script를 동작 하도록 함.
CSS TIP
CSS 선언 방식
내장 방식 :
<style>
div {
color: black;
}
</style>inline 작성 방식 (권장 하지 않는다.) :
<div style={color:black;}></div>link 방식 (병렬 방식 - 동시에 다 연결 속도 빠름) :
<link rel="stylesheet" href="./style.css/">@import 방식(직렬 방식 : css 문서 안에 css 문서를 연결하는 방식) :
@import url("./box.css");=> style.css 로 연결하여 사용한다. ( 순서대로연결 - 지연된다.)
( box.css -> style.css -> index.html )
가상 클래스 선택자 (Pseudo-classes)
ABC:hover
: ABC요소에 마우스 커서가 올라가 있는 동안 선택.
ABC:active
: ABC요소에 마우스를 클릭하고 있는 동안 선택.
ABC:focus
: ABC요소가 포커스되면 선택.(input 요소 등에 사용)
( focus가 안되는 요소에는 tabindex="-1" 속성을 주면 가능하다.)
ABC:first-child
: ABC가 형제 요소 중 첫째라면 선택.(아니면 선택 안됨)
ABC:last-child
: ABC가 형제 요소 중 막내라면 선택.(아니면 선택 안됨)
ABC:nth-child(n)
: ABC가 형제 요소 중 (n)번째라면 선택.
.fruits *:nth-child(n+2)
: fruits 클래스를 갖은 요소의 모든 자식 요소 중 n+2 번째라면 선택(n은 0부터).//2,3,4,5,6,..
ABC:not(XYZ)
: XYZ가 아닌 ABC 요소 선택.
ABC::before { content: "앞!"; }
: ABC 요소의 내부 앞에 내용 삽입(content).(콜론 2개!)
( content 라는 속성과 꼭 함께 써야한다. )
ABC::after { content: "뒤!"; }
: ABC 요소의 내부 뒤에 내용을 삽입 (content).
( content 라는 속성과 꼭 함께 써야한다. )
[ABC]
: 속성 ABC를 포함한 요소 선택. (disabled, type, value..)
[ABC="XYZ"]
: 속성 ABC를 포함하고 값이 XYZ인 요소 선택.
강제 상속
color: inherit;
속성에 값으로 inherit 을 넣으면 부모요소의 스타일을 상속하여 적용한다.
우선 순위
- 점수 ( 명시도 )
!important - 99999999999점
인라인 - 1000점
id 선택자 - 100점
class 선택자 - 10점
태그 선택자 - 1점
전체 선택자 - 0점
body - 상속은 계산하지 않는다.
