CSS 문법, 속성 등 정리

/* 상속되는 CSS 속성들 : 글자, 문자 관련 */
font-style, font-size, line-height, color, text-align, ...

/* 강제 상속시키기 */
.child {
  height: inherit;
}

 

기본 문법

/* 주석 */
div {
  color: red;
  margin: 20px;
}

 

 

선언 방법

/* 내장 방식 (HTML) */
<style>
  div {
    color: red;
  }
</style>


/* 인라인 방식 (HTML) */
<div style="color: red;"></div>

/* 링크 방식 (HTML) */
<link rel="stylesheet" href="/resource/module/jquery-ui-1.13.2/jquery-ui.css"/>

/* import 방식 (CSS) */
@import url("./common.css")

 

 

 

선택자

/* 모든 요소 */
* {}

/* CLASS 속성의 값이 'ABC' */
.ABC {}

/* CLASS ID 속성의 값이 ABC */
#ABC {}

/* 두가지 이상. span 태그이면서 orange */
span.orange {}

/* 자식 요소. ul 자식 요소인 orange */
ul > .orange {}

/* 하위 요소. div 의 모든 orange 후손 */
div .orange {}

/* 바로 다음 형제 요소 */
.orange + li {}

/* 다음 형제 요소 전부 다 */
.orange ~ li {}

 

가상 클래스 선택자

/* 마우스 오버하는 동안 */
ABC:hover {}

/* 클릭하는 동안 */
ABC:active {}

/* 포커스되는 동안 */
ABC:focus {}

/* fruits의 자식 span 형제 요소중 첫번째 */
fruits span.first-child

/* fruits의 자식 li 형제 요소 중 막내 */
fruits li.last-child

/* fruits의 모든 하위 요소 중 2번째 */
.fruits *:nth-child(2)

/* fruits의 자식 중 span이 아닌 요소 */
.fruits *:not(span)

 

 

가상 요소

/* box 요소의 내부 앞에 내용 삽입. 인라인 요소 */
.box::before {
  content: "앞!";
}

/* box 요소의 내부 뒤에 내용 삽입. 인라인 요소 */
.box::after {
  content: "뒤!";
}

 

속성

/* disabled 속성을 포함한 요소 선택 */
[disabled] {}

/* type 속성을 포함하고 값이 password인 요소 선택 */
[type="password"] {}

 

 

 상속

/* 상속되는 요소 : 글자, 문자 관련 */
text-align, line-height, font-size, color, ...

/* 강제로 상속시키는 방법 */
.child {
  height : inherit;
}