CSS 정리1

Noma·2021년 1월 19일

1) CSS

Cascading Style Sheets
:Style sheet는 스타일링의 문서입니다.

Author style: 개발자가 정의하는 것
User style: 사용자가 결정하는 것 (ex. dark mode)
Browser: 기본 style sheet를 정의
스타일 적용 우선 순위: Author > User > Browser
Author -> User -> Browser 순으로 Cascading 된다.
!important: (다른 우선 순위를 무시하고) 이미 정의된 특정 속성을 재정의한다. 하지만 가능한 사용하지 않는 것이 좋다.

p{
  color: red !important;
}
#thing{
  color: green;
}

<p id="thing">will be RED.</p>

2) Selector

	Selector	Example
Universal	*	* { box-sizing : border-box; }
Type	tag	li { list-style : none; }
ID	#id_name	#home { margin: auto; }
Class	.class_name	.btn { border-radius : 3px; }
State	:	button : hover { color : red; }
Attribute	[ ]	a [ href="naver.com" ] { color : purple; }

- Child Selector (A>B)

부모 바로 안에 있는 child 요소를 선택한다.

- Selector Expression Example

모든 표현을 보고 싶다면, 이곳을 클릭하세요.


a[href]{
color: purple;
}
// href 속성을 가진 모든 a 태그

a[href="naver.com"]{
color: purple;
}
// href 속성값이 "naver.com"인 모든 a 태그

a[href^="naver"]{
color: purple;
}
// href 속성값이 "naver"로 시작하는 모든 a 태그

a[href$=".com"]{
color: purple;
}
// href 속성값이 ".com"으로 끝나는 모든 a 태그

a[href*="ver"]{      >> To include a specified value
color:purple;        
}
// href 속성값이 "ver"을 포함하는 모든 a 태그

#special{ }
li#special{    >> ❗ Don't space it out.
}
//li 태그 중에 ID가 special인 태그

- Power

Universal tag(*)<Tag selector( tag_name ) < Class selector( .class_name ) < ID selector( #id_name )
: 같은 힘일 경우, 나중에 쓰여진 것이 더 강하다.

3) CSS structure

HTML에 CSS 적용하기

1. External stylesheet

가장 일반적이고 유용한 방법
HTML <head>안에 <link>요소에서 참조하는 경우

<link rel="stylesheet" href="style.css">

경로 조정

<!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css">

<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
<link rel="stylesheet" href="../styles/style.css">

2. Internal stylesheet

외부 CSS 파일이 없는 대신, HTML <head>안에 포함된 <style> 요소 내부에 CSS를 작성한다.

<head>
  <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
    </style>
</head>

3. Inline styles

style 속성을 포함한 한 요소에만 영향을 주는 CSS 선언이다.
유지관리에 좋지 않고 (문서당 동일한 정보를 여러번 업데이트 해야할 수 도 있음), CSS정보와 HTML구조 정보가 혼합되어 코드의 가독성이 떨어질 수 있다.

4) Shorthands

font, background, padding, border, margin등의 일부 속성을 속시 속성이라고 한다. 이는 여러 줄의 속성 값을 한 줄로 작성하여 코드를 깔끔하게 만들 수 있다.

background-color:red;
background-image:url(bg.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

위의 코드는 아래와 같다.

background: red url(bg.png) 10px 10px repeat-x fixed;

5) Custom properties

자주 반복되어 쓰이는 수치가 있다면 그것을 상수로 정해서 사용하는 것이 유지보수면에서 좋다.
--(double dash)name: value;
정의된 위치의 모든 자식요소에서 접근가능하나, 보통 어디서든 사용할 수 있도록 :root{}(최고 부모노드)에서 정의한다.
불러올 때는 var(--name); 이런 식으로 사용한다.

/* Global */
:root {
  /* Color */
  --text-color: #f0f4f5;
  --background-color: #263343;
  --accent-color: #d49466;
  
  /* Size */
  --padding: 12px;
  --avatar-size: 36px;
  
  /* Font Size */
  --font-large: 18px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-micro: 10px;
}
// 사용할 때
.btn{
  color: var(--text-color);
}