[css] CSS 정리

CSS?

• Cascading Style sheet의 약자로 문서를 표시하는 방법을 지정

작성 방법

• ;로 구분하여 프로퍼티 지정 가능

1. CSS 파일에 작성

  선택자 {
  	프로퍼티 : 값;
  }
  
  h1 {
  	font-size : 14px;
  }

2. html head에 작성

<style>
  h1 {
  	font-size : 14px;
  }
</style>

3. html 태그에 직접 작성

<h1 style="font-size:14px;">안녕하세요</h1>

상속

1. 부모 요소의 스타일이 상속 되는 프로퍼티, font관련, 색상, 정렬 등이 대표적

    <div style="font-size: 21px;">
        parent
        <p>child</p>
    </div>

2. 부모 요소의 스타일이 상속 되지 않는 프로퍼티, width, height, margin, display, border 등이 대표적

    <div style="border : 1px solid red;">
        parent
        <p>child</p>
    </div>

3. 부모 요소의 스타일이 상속 되는 프로퍼티지만 html의 요소에 따라 상속되지 않기도함

    <div style="font-size: 21px;">
        parent
        <button>child</button>
    </div>

4. 강제로 상속 받기, inherit 추가

    <div style="font-size: 21px;">
        parent
        <button style="font-size: inherit;">child</button>
    </div>

선택자

• 전체 선택자 = 와일드 카드(*) 사용

* {
    padding : 0;
}

• 타입 선택자

div{
    padding : 10px;
}

• id 선택자 = #id이름으로 지정 가능

#id{
    padding : 10px;
}

• class 선택자 = .class이름으로 지정 가능

.class{
    padding : 10px;
}

• 선택자 여러개 지정하기 = ,로 구분

a,
#id2,
.class2{
    padding : 10px;
}

• 속성 선택자
  • 연산자 / 설명
  • 속성명 = 해당 속성을 갖는 요소들을 모두 선택
  • = = 값이 정확하게 일치할 때 선택
  • ~= = 값이 정확하게 일치할 때 선택, 여러개의 값이 지정되어도 상관없음
  • |= = 값이 일치하거나, 값 뒤에 -가 붙는 경우 선택
  • ^= = 접두사로 값을 가질 때 선택
  • $= = 접미사로 값을 가질 때 선택
  • *= = 값이 포함된 모든 요소를 선택

/* `요소이름[속성명(연산자]` 형태 */
/* span 요소에 id 속성이 같으면 스타일 지정 */
span[id]{
    color: red;
}

/* href 속성이 www.naver.com이면 지정 */
a[href="www.naver.com"]{
    color: green;
}

/* class로 class1을 갖는 span 요소 선택 */
span[class~="class1"]{
    color : blue;
}

/* id의 hi또는 hi-를 포함하는 span 요소 선탣 */
span[id|="hi"]{
    color:teal;
}

/* id의 접두사가 test인 span 요소 */
span[id^="test"]{
    color: blueviolet;
}

/* id의 접미사가 test인 span 요소 */
span[id$="test"]{
    color:greenyellow;
}

/* id안에 js가 포함된 span 요소 */
span[id*="js"]{
    color: aqua;
}

<span id="x">sapn[id]</span>
<a href="www.naver.com">a[href="www.naver.com"]</a>
<span class="class1 class2">span[class~="class1"]</span>
<span id="hi-1">span[id|="hi"]</span>
<span id="test1">span[id^="test"]</span>
<span id="1test">span[id$="test"]</span>
<span id="assajsaasa">span[id*="js"]</span>

• 위에 언급한 것 이외에도 다양한 선택자가 존재합니다.

우선순위와 명시도

• 우선순위는 마지막에 작성된 값이 더 높은 우선순위를 가진다.

div {
	color=red;
	color=blue; /* blue가 적용 */
}

<link rel="stylesheet" href="a.css" />;
<link rel="stylesheet" href="b.css" />; <!-- 동일한 선택자로 구성되면 b.css가 선택 -->

• 명시도

  • (A,B,c)로 구성하면 A>B>C 순으로 우선순위를 가진다.
  • A=id, B=class, 속성, 의사 클래스 선택자, C=요소, 의사 요소 선택자

  <style>
        #p-id #c-id{ /*(2,0,0) 우선순위가 더 높다.*/
            border : 1px dashed #000;
        }
        #p-id div.c-class{ /*(1,1,1)*/
            border : 1px solid #000; /*무시*/
            font-size: 20px;
        }
  </style>
  <div id="p-id">
        <div id="c-id" class="c-class">
            child
        </div>
  </div>

  

  • !important를 제일 큰 우선순위를 가짐

  <style>
        div{
            color: red !important;
        }
  </style>
  <div style="blue;">
        hi
  </div>

  hi

  
  

  출처 : 기초부터 완성까지 프런트엔드