[CSS] CSS의 개념 - 선언방식과 선택자

728x90

CSS 개념

CSS (Cascading Style Sheets)는 웹 페이지를 꾸미려고 작성하는 코드로 HTML이 텍스트나 이미지 등 구성 요소를 웹 문서에 만든다면 CSS는 색상, 크기 위치 등의 디자인 요소를 담당하는 코드이다.

 

 

CSS 구조

기본적으로 CSS는 선택자 {속성 : 값;} 의 형태로 이루어져 있다.

💡예시 
div { color : red; }

.btn {
  color : blue;
  margin-left : 30px;          
}

 

 

CSS 선언 방식

내장방식

<style></style>태그의 내용으로 스타일을 작성하는 방식이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 스타일 태그 안에 내용 입력 -->
        <style>
            body {
                font-size: 24px;
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>
    </body>
</html>

링크방식

html 파일 헤더 부분에 css파일 링크를 연결하여 사용하는 방식이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- html 과 css 연결 -->
        <link rel="stylesheet" href="./main.css">
    </head>
    <body>
    </body>
</html>

import 방식

 CSS문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식이다.

/*가져올 css파일*/
@import url("./main.css");

/*현재 문서 내용*/
div {
    margin: auto;
}

인라인 방식

요소의 style속성에 직접 스타일을 작성하는 방식이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 태그안에 스타일 속성으로 적용 -->
        <div class="header" style="width: 1100px;"></div>
    </body>
</html>

 

 

CSS 선택자

기본선택자

*{} /*전체 선택자*/

div{} /*태그선택자*/

.examlple{} /*클래스 선택자*/

#examlple{} /*id선택자*/

 

복합 선택자

/*클래스명 : examlple*/

div.example{} /*일치 선택자*/

ul > .examlple{}  /*자식 선택자*/

div .examlple{} /*하위(후손) 선택자*/

.examlple + li{} /*인접 형제 선택자*/

.examlple ~ li{} /*일반 형제 선택자*/

 

가상 클래스 선택자

div:hover{} /*요소가 마우스커서에 올라가 있는 동안 선택*/

div:active{} /*요소에 마우스를 클릭하고 있는 동안 선택*/

input:focus{} /*요소가 포커스되면 선택(INPUT,A,BUTTON,LABEL,SELECT...)*/

.exmaple span:first-child{}  /*선택자가 형제 요소 중 첫째 선택*/

.exmaple span:last-child{}` /*선택자가 형제 요소 중 막내 선택*/

.exmaple *:nth-child(n){}` /*선택자가 형제 요소 중 (n)번째라면 선택*/

.exmaple *:not(span){} /*선택자가 아닌 요소 선택*/

가상 요소 선택자

.exmaple::before{ content : ""; } /*선택자 요소의 내부 앞에 내용을 삽입*/

.exmaple::after{ content : ""; }  /*선택자 요소의 내부 뒤에 내용을 삽입*/

속성 선택자

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

a[href="https://example.com"]{}  /*속성을 포함하고 속성값이 일치하는 요소 선택*/

 

참고문헌

 

CSS 란 무엇인가? - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹

developer.mozilla.org

 

 

728x90

'Frontend > CSS' 카테고리의 다른 글

tailwind css 반응형으로 디자인하기  (0) 2024.11.11
clsx - 클래스를 조건부로 적용해보자  (1) 2024.11.11