❤CSS RESET
css 스타일 초기화
브라우저가 가지고 있는 css 기본 스타일이 서로 다르기 때문에 크로스 브라우징을 하기 위해서 초기화를 시킨다.
css초기화 라이브러리는 리셋을 먼저 해야하기 떄문에 메인css파일 위에 배치해 주어야한다.
reset.css라는 라이브러리
reset-css CDN by jsDelivr - A CDN for npm and GitHub
-
시험 외 범위
EMMET
css선택자를 이용해서 html에서 빠르게 태그를 사용할 수 있다.
선택자를 이용해서 작성한 다음에 tab키를 눌러준다.
😊CSS 문법
선택자 {
속성(properties): 값;
속성(properties): 값;
}
🌹주석 / 해석되지 않는 글 /
😁CSS 선언
-
inline 직접 선언
html 요소의 style 속성에 직접 작성 - 요소에 직접 입력하기에 선택자가 필요 없다.
element에 직접 입력할 경우 유지보수가 힘들기 때문에 js를 이용할 경우에 사용하는 것이 좋다.
-
style 태그를 이용 내장방식 -html 문서 내부(태그 안)에 작성
-
link태그를 이용 링크방식 외부의 css 파일을 가지고 온다. (추천!)
-
@import 방식
css에서 외부에 있는 css를 가져오는 방식 (link는 html에서 css를 가지고 옴.)
@import url ("css경로.css");
link로 연결된 css파일은 동시에 여러개가 호출된다.(병렬)
@import는 한가지 css 파일이 완벽하게 호출된 후, 다음 css파일을 호출한다.(직렬) (시간이 오래걸린다.)
- 상관관계가 있는 css 파일이 있는 경우에 import를 사용한다(1이 있어야 2가 제대로 작동된다거나..)
😎CSS 선택자
-
기본 선택자
-
전체 선택자 : 요소 내부의 모든 요소
-
태그 선택자 : 태그 이름이 선택자
-
클래스 선택자: html의 class 속성의 값이 선택자
.class
-
id 선택자 : html의 id 속성의 값이 선택자ㅊ
#id명시도는 id(100pt) > class(10pt) > tag(1pt) >(0pt) 순서로..*
-
-
복합 선택자
보통 앞부분은 (조건) 뒤에 나오는 선택자가 (선택)
-
일치 선택자
선택자1선택자2 (선택자 두개를 바로 이어서 붙임)
두개의 선택자를 동시에 만족시켜야지 적용이 가능함.
-
자식 선택자
선택자1 > 선택자2
선택자 1의 자식 요소(조건)이면서 선택자 2를 가진 요소(선택)를 선택함.
-
후손 선택자
선택자1 선택자2 ( 선택자 두개의 사이를 띄어쓰기로 표시함)
선택자1의 후손(조건)이면서 선택자2를 가진 요소(선택)를 선택함.
후손은 중복 선택이 될 가능성이 높기 때문에 잘 보고 사용해야한다.
-
인접 형제 선택자
선택자1 + 선택자2
선택자1의 다음에 인접해 있으면서 형제 요소인 선택자 2 (하나만)선택
선택자1
선택자2 이렇게 있으면 선택자 2가 선택함
선택자1과 선택자2는 같은 이름의(기능의) 요소가 아니여도 된다. 그저 형제..
-
일반 형제 선택자
선택자1 **-** 선택자2 선택자1의 다음에 나오는 선택자2를 가진 형제 요소 전부다 선택(같은 부모 요소를 공유하는 요소들을 형제 요소라고 부른다.)
형제 요소는 서로 다른 이름의 요소도 포함한다.
-
-
: 가상클래스 (pseudo-class selector)
-
hover
선택자:hover
마우스가 올라간 상태에서의 상태를 지정
-
active
선택자:active
마우스로 클릭하는 동안의 상태를 지정
-
focus
선택자:focus
포커스된 동안의 상태
대화형콘텐츠에만 사용 가능(input 혹은 tabindex 전역속성이 있거나)
- 시험 외 범위
-
-
:: 가상 요소(tag) 클래스 (pseudo-class)
: 콜론 하나도 가상요소를 사용할 수 있지만 두개를 쓰는게 좋다.
내부에 삽입! 태그 사이의 내용에 연결됨
content로 이미지 삽입도 가능
(확실하지 X) 같은 요소에 가상 요소 선택자가 두 번 선택된다면 content는 한번만 입력된다.
- 예시 링크
-
before
선택자::before
선택자의 내부의 앞에 내용을 삽입
"가상요소 클래스로 내용삽입" 기본내용div::befor{ *content요소가 필수다. (내용이 없으면 ""로 표시)
content: "가상요소 클래스로 내용삽입"
}
content 밑에 스타일을 추가하면 content부분에만 적용이 된다.
기본 내용에는 영향을 주지 않는다.
-
after
선택자::after
선택자의 내부의 뒤에 내용을 삽입
→ 이미지를 삽입할때는 url함수를 사용한다.
content: url("이미지 경로");
-
시험 외 범위
class를 부여하지 않아도 요소가 포함하고 있는 속성 값으로 선택할 수 있는 선택자
속성 선택자 (attribute selectors)
-
[attr]
[disabled] {
opacity: 0.2;
} -
[attr=value] ([attr="value"]로 표시할 수도 있음)
속성을 포함하며 속성 값이 value인 요소 선택
-
[attr^=value]
속성을 포함하며 속성 값이 value로 시작하는 요소 선택
[class^="btn-"] {
font-weight: bold;
border-radius: 4px;
}Success
Danger
Normal -
[attr^=value]
속성을 포함하며 속성 값이 value로 끝나는 요소 선택
-
🎉상속
대부분 글자와 관련된 속성들은 상속된다.
-
강제 상속
속성의 값에 inherit값을 주어 부모의 값을 상속 받아서 사용할 수 있다.
'자식'를 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아닙니다.
🤦♀️우선순위
같은 요소가 여러 선언의 대상이 될 경우 어떤 CSS 속성을 우선 적용할지 결정하는 방법
-
명시도
선택자마다 점수가 부여되는데 점수가 높은 경우를 적용
점수
-
가장 중요(!important) : 모든 선언을 무시하고 가장 우선 ( 값 뒤에 배치)
property: value !important;
-
인라인 선언 : 1000pt
-
아이디 선택자 : 100pt
-
클래스 선택자 : 10pt (가상 클래스)
-
태그 선택자 : 1pt (가상 요소)
-
전체 선택자 : 0pt
-
상속 : 점수를 계산하지 않음
-
부정 선택자 : 점수를 계산하지 않음
-
-
선언순서
명시도의 점수가 같은 경우 가장 마지막에 해석되는 걸 적용
-
중요도
명시도는 상속보다 우선
11 CSS 단위
😉 PX, %
-
PX (해상도에 따른 상대 단위 px)
고정적인 값이지만 모든 디바이스에서 같은 크기라는 것은 아님.
-
%
부모 요소의 사이즈에 영향을 받는다.
부모를 100% 기준으로 잡고 사이징
🎁 EM, REM
-
EM
자기 자신의 폰트 사이즈에 영향을 받는다.
폰트 사이즈 10px* 3em = 30px
→ 폰트 사이즈는 상속이 되기 때문에 상속이 중첩되어 자손으로 계속 넘어간다.
(계속 폰트 사이즈가 커짐)
→ 중첩때문에 관리하기가 어렵다.
-
REM (Root EM) em의 단점을 커버
최종 조상의 폰트 사이즈에 영향을 받는다.
최종 조상의 폰트 사이즈 10px * 2rem = 20px
→ 최종 조상의 폰트 사이즈에만 영향을 받기 때문에 중첩이 없이 하위 요소에서 폰트 수정이 있어도 영향을 받지 않는다.
-
시험 외 범위
-
VH,VW
viewport 기준으로 사이징
100이 기준으로 50vh,50vw면 화면의 반반씩 차지 한다는 뜻이다.
-
vmin, vmax
-
vmax : 가로 세로 중 더 긴 viewport를 기준으로 사이징
-
vmin : 가로 세로 중 더 짧은 viewport를 기준으로 사이징
상황에 따라서(viewport의 크기) 크기가 변할 수 있다.
-
-
13 CSS속성 - 글꼴 문자
글꼴은 대체로 상속된다.
-
시험 외 범위
-
font(단축)
font: 기울기 두께 크기 / 줄높이 글꼴;
크기와 줄높이는 /로 구분이 되어야한다.
폰트크기와 글꼴은 필수로 입력이 되어야한다.
-
font-style 기울기
-
font-weight 글자의 두께
normal 400 / large 700
세단계로 나눈다면 300 -500 - 700 정도로 사용한다.
border,ligther은 상속값(부모의 값)과 비교하여서 (400-700-900)중에서 선택된다.
주어진 값이 없다면 비슷한 두께의 글씨를 이용한다.
-
-
font-size
단위 - 기본은 16px(브라우저마다 조금씩 다르다.)
% - 부모(상위) 요소의 비율로 지정
-
line-height (행간)
normal(기본값) - 브라우저마다 다를 수 있다.
숫자 - 요소 자체 글꼴 크기의 배수 (1.4~1.7 추천)
단위 - 단위 지정 크기
% - 요소 자체의 글꼴 크기의 비율
-
font-family
브라우저마다 기본 글꼴이 다르다.
글꼴 후보 목록을 지정
제공되는 웹 폰트가 없다면 사용자에게 있는 글꼴을 사용한다.
폰트는 상당히 용량이 크다. 그렇기 때문에 다운받는 것을 우선하지 않고 사용자에게 있는 글꼴을 우선 사용한다.
사용자 브라우저에 글꼴이 없다면 다음 후보로 넘어가다가 글꼴 계열을 사용한다.
→ 글꼴 계열은 필수로 입력해 줘야 한다.
font-family: 글꼴 후보1, 글꼴 후보2, 글꼴 계열;
가장 많이 사용 되는 것은 sans-serif (고딕계열)
-
color
글자의 색상을 지정
색상표현법
- 색상이름 (브라우저에서 제공하는 색상의 이름)
- hexadecimal color (#00000)
- RGB 빛의 삼원색 rgb(255,255,255)
- RGBA(alpha) rgba(255,255,255,1)
- HSL 색상채도명도
- HSLA
-
시험 외 범위
-
text-align
문자 정렬 방식
left / right / center / justify(칸이 넘쳐서 2줄인 경우)
-
text-decoration
문자의 장식(선line)을 선택
none / underline / overline / line-through
-
text-indent
들여쓰기 (px)
(음수 값을 사용할 수 있다. / 내어쓰기)
background속성을 사용해서 이미지를 삽입할 경우 alt 대신에 내용을 입력하고 indent값을 크게 주어 화면 밖으로 날려버린다.
-
letter-spacing (자간-글자 간의 간격)
기본값 normal 0 (폰트마다 다름)
-
word-spacing (띄어쓰기의 크기)
기본값 normal 0 (기본 사이즈가 0/ 30 숫자를 입력하면 기본값(0) + 30이라고 생각하면 됨)
-
