프론트엔드_CSS

태그 규칙

숫자가 앞에 나오면 안된다.
타입별로 선택하여 사용이 가능.

//타입이 버튼인 클레스를 모두 선택해라
input[type=“button”]{} 

선택자

자손 선택자 (스페이스)
띄어쓰기로 구분.
자식, 자손 모두를 선택할수 있다.

section p{
  font-weight:bold;
}

자식 선택자 >
바로 밑 자식만 선택가능.

자식 선택자(>)

일반 형제 선택자 ~
일반 형제인데 h1 뒤로부터 p까지만 적용하고 싶을때

h1 ~ p{
  text-decoration:underline;
}

인접 형제 선택자 +
바로 인접한 형제만 적용

h1 + p{
  background:yellow;
}

inherit
상속받겠다

{border : inherit}
//border:initial : 브라우저 기본 스타일 속성을 따른다. 

px를 사용하는게 사용성 면에서 적절한가?

다양한 디바이스가 생겨나며 픽셀 밀도가 디바이스마다 다양해지면서 절대값 px 사용시 디바이스별로 위치,크기가 달라보이는 문제가 발생.

em

em 부모로부터 상속받는 글짜크기. 유지 보수가 편리. 부모요소는 최상단 루트에서 변경하면 일괄 변경되기 때문에 유지 보수가 편리.
vw,vh,vmin,vmax,em,rem 등등 적재적소에 사용하기.

폰트를 rem으로 설정하고 나머지는 em으로 사용하며 편함.
rem
html 의 기본 폰트사이즈 16픽셀을 기본 단위로 사용.

openWAX

색의 명도 대비는 웹 접근성에 맞게 해야함. 시각적으로 문제가 있는 사람들을 고려해야함.
오픈 웍스라는 확장 프로그램 openWAX 에서 설치하면 3.색에 무관한 콘텐츠 인식에서 흑백토글을 볼 수 있다.
색상 명도 대비는 웹 접근성 때문에 4.5:1
링크텍스트

웹폰트

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트.
폰트 로컬로 설치하면 import 보다 용량이 가볍고 어디서나 쓸수 있다.
한번 사용뿐인 무거운 폰트는 이미지로 넣는것을 추천.

font-face

브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 @font-face 속성을 통해 폰트를 설치하여 사용하도록 할 수 있습니다.
스네펫으로 만들어 놓고 css.json 에 만들어놓으면 추가가 편하다.

@font-face {
    font-family: "Pretendard-Regular";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
body{
	font-family: Pretendard-Regular, "Times New Roman", Dotum, "돋움", sans-serif;
}

https://fonts.google.com/![](https://velog.velcdn.com/images/jellyjoji/post/20eb04df-c9cc-48e4-a84a-b291aa91a8fb/image.png)

여기서 폴더에 저장된 다운받은 로컬폰트의 위치경로 src를 설정해주면된다.
src : url(파일경로 써주기)
woff format 은 성능최적화에 맞게 넣어주면 된다.
font 도 vw 로 설정하면 반응형으로 자연스럽게 커지도록 할수있다.

text-overflow

텍스트가 넘칠경우 어떻게 표시할지.

line-height

140% or 1.4; 로 배수값으로 쓰는게 좋다.
text-indent
1em; 들여쓰기를 조정

:only-of-type

유일하게 새용된 태그일때만 사용.
요소가 하나밖에 없을 때만 적용됨.

:only-of-type
//(형제중)하나뿐인 유일한거만 잡힘

형제선택

div :nth-child(3)
띄어쓰기 여부에따라 자식 혹은 형제가 선택됨.
div :nth-child는 div의 자식 요소중에서 찾는거고,
div:nth-child의 경우 div의 형제 요소에서 찾는거

:not(제외할것){} 부정선택자

li:not(red){
color : green
}
//빨간생이 아닌 li는 초록색으로 바꿔라

:root 전역변수

루트에 컬러를 저장해놓고 var()를 꺼내쓴다.
유지보수에 용이하도록 중복되는 요소를 root로 잘 정리하는게 코딩을 잘 하는것이다.

:root{
—main-color: #898989;
}
li{
color :ver(—main-color);
}

가상요소

가상클레스는 요소자체를 선택(그 안에 있는거)
가상요소는 선택하는거에 추가적으로 추가하는것.
:before ::before 둘다 가능하나 ::로 써주는걸 추천.
가상요소는 단일요소로 사용할 수 없다.

CSS 우선순위

적용이 안될땐 우선순위를 보면된다.

• 전체선택자가 구체적이지 않아서 우선순위가 가장 낫다.
  좀더 구체적인게 상위순위이다.
  div #id 가 #id 보다 더 구체적이라서 상위순위.
  아무리 구체적이라도 id 선택자가 최위선순위다.

!important 선언

!important 선언 들어가면 어떤 선언보다도 우선한다.
강제적용하면 그때는 괜찮으나 다음부터 유지 및 보수가 불가.

<a class=”#” !important>

box-sizing : border-box

테투라값을 포함할지 안할지 여부.
반응형에 적합.

auto

가운데정렬 할때 사용.

단축속성은 반드시 쓸 필요는 없다.