[웹 프로그래밍 기초] CSS 란?

CSS란?

• Cascading Style Sheets의 약자
• HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어이다.

CSS 선택자

CSS3에서 특정 HTML 태그를 선택할 때 사용

h1{color:red;}

h1: 선택자 , color : 스타일 속성 , red: 스타일 값

선택자 종류

종류	형태	사용 예
전체 선택자	*	*
태그 선택자	태그	h1
아이디 선택자	#아이디	#id
클래스 선택자	.클래스	.header
속성 선택자	선택자[속성 = 값]	input[type=text]
문자열 속성 선택자	선택자[속성 ~= 값]	div[data-role~=row]
	선택자[속성 |= 값]	div[data-role
	선택자[속성 ^= 값]	div[data-role^=row]
	선택자[속성 $= 값]	div[data-role$=row]
	선택자[속성 *= 값]	div[data-role*=row]
후손 선택자	선택자 선택자	header h1
자손 선택자	선택자>선택자	header>h1

태그 선택자

• CSS 작성시 가장 기본이 되는 방식
• HTML 태그에 직접 스타일 지정
• 페이지 안에 있는 해당 태그 모두에 영향

선택자 여러개에 속성 적용하기 : 쉼표(,)사용

<style>
body,p,h1{margin:0;padding:0}
</style>

아이디 선택자

• CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
• 아이디는 고유한 값을 가지므로 페이지 안에서 고유한 엘리멘트를 나타내기 위해 사용

클래스 선택자

• 특정 집단의 여러 요소를 한 번에 선택할 때 사용
• 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택

속성 선택자

• input 태그는 이름은 모두 같지만 type속성에 따라 형태가 다르다.
• 태그안에 특정 속성들에 따라 스타일 지정

형태	설명
선택자[속성]	특정 속성의 태그 선택
선택자[속성 = 값]	특정 속성 내부 값이 특정 값과 같은 태그 선택

문자열 속성 선택자

• [속성이름~="속성값"] 선택자 : 속성값, 속성값 다음에 공백으로 구분되는 값

• [속성이름|="속성값"] 선택자 : 속성값, 속성값 다음에 하이픈(-)으로 시작되는 값

• [속성이름^="속성값"] 선택자 : 속성값으로 시작되는 요소 선택

• [속성이름$="속성값"] 선택자 : 속성값으로 끝나는 요소만 선택

• [속성이름*="속성값"] 선택자 : 속성값이 포함된 모든 단어 선택

속성 선택자 예시 )

 <style>
        h1{color:red;}
        input+label{color:green;}
        input[type="radio"]{
            accent-color: red;
        }
        input[type="password"]{background:skyblue;}
    </style>

후손 선택자 / 자손 선택자

    <div>
        <h1>css</h1>
        <h2>기본 선택자</h2>
        <ul>
            <li>전체</li>
            <li>태그</li>
            <li>아이디  클래스 </li>
        </ul>
    </div>

div 태그를 기준으로,
바로 한 단계 아래에 위치한 h1,h2,ul 태그는 자식(자손)
div 태그 아래에 위치한 모든 태그를 하위(후손)

후손 선택자

형태	설명
선택자 B 선택자 C	선택자 B의 후손인 선택자 C선택

자손 선택자

형태	설명
선택자 B > 선택자 C	선택자 B의 자손인 선택자 C선택

자손 선택자 주의 사항
테이블 구조는 웹 브라우저가 <tbody> 태그를 자동으로 추가하므로 스타일 속성이 적용되지 않음

 <style>
        table>tbody>tr>td>input[type="password"]{color:red}
    </style>

tbody 태그를 꼭 포함해줘야 한다.

종류	형태	사용 예
반응 선택자	선택자:active	div:active
	선택자:hover	div:hover
상태 선택자	선택자:checked	input:checked
	선택자:focus	input:focus
	선택자:enabled	input:enabled
	선택자:disabled	input:disabled
구조 선택자	선택자:first-child	li:first-child
	선택자:last-child	li:last-child
	선택자:nth-child	li:nth-child(2n+1)
구조 선택자	선택자:first-of-type	h1:first-of-type
	선택자:last-of-type	h1:last-of-type
	선택자:nth-of-type	h1:nth-of-type(2n+1)
	선택자:nth-last-of-type	h1nth-last-of-type(2n+1)
동위 선택자	선택자+선택자	h1+div
	선택자~선택자	h1~div
링크 선택자	선택자 : link	a:link
	선택자:visited	a:visited
문자 선택자	선택자::first-letter	p::first-letter
	선택자::first-line	p::first-line
	선택자::after	p:after
	선택자::before	p::before
	선택자::section	p::section
	선택자:not(선택자)	li:not(.item)

반응 선택자

• 사용자의 반응으로 생성되는 특정한 상태를 선택
• 일반적으로 특정 선택자와 붙여서 사용

상태 선택자

• 입력 양식의 상태를 선택할 때 사용

구조 선택자

:first-child : 형제 관계에서 첫번재로 등장하는 태그 선택
:last-child : 형제 관계에서 마지막에 등장하는 태그 선택
:nth-child(수열) : 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택
:nth-last-child(수열) : 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택 

    <style>
        ul{overflow:hidden;}
        li{
            list-style:none;
            float:left;padding:15px;
        }
        li:first-child{
            border-radius:10px 0 0 10px;
        }
        li:last-child{
            border-radius:0 10px 10px 0;
        }
        li:nth-child(2n){
            background-color:skyblue
        }
        li:nth-child(2n+1){
            background-color:lightgray
        }

    </style>

우선 순위

1. 나중에 선언한 코드의 우선순위가 높다.
2. 구체성 점수가 높은 선택자가 우선 순위가 높다.
   ( 1등 아이디(#) 2등 클래스(.) 3등 태그 )