프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자

Frontend/CSS

프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자

쏠솔랄라 2023. 2. 5. 18:35

CSS? ; Cascading Styled Sheets

THML 문서에 style 속성을 추가하여 시각적으로 꾸며주는 역할
디자인 부분을 담당

CSS 적용법 (스타일링 기법)

내부스타일링

HTML 문서의 <head> 요소 안에 <style> 요소를 활용하여 적용
한 페이지(html 파일) 안에서 스타일을 한번에 관리

ex)
            <html>
                <head>
                    <style>
                    ...
                    </style>
                </head>

                <body>
                </body>
            </html>

외부스타일링

HTML 문서의 <head> 요소 안에 <link> 요소를 활용하여
한 페이지(html 파일) 안이 아닌 외부에 만들어 둔 CSS 문법이 담긴 파일을 연결하여 적용하는 방법
다른 html 파일에도 적용 가능 (재사용)

        CSS (folder)
            style.css (file)
        ex)
            <head>
                <link href="./css/style.css" rel="stylesheet"/>
            </head>

인라인스타일링

        요소 안에 직접적으로 style 속성을 활용하여 적용

        ex)
            <p style = "fornt-size:50px;"> ... </p>

        내부 외부를 포함한 어떠한 CSS보다도 우선순위가 가장 높다

    => 내부 스타일 : 한 html 문서 안에 작성
        외부 스타일 : html 문서 외부에 작성
        인라인 스타일 : 요소 안에 직접적으로 작성

선택자

: 전체 선택자, 요소 선택자, id/class 선택자, 그룹 선택자, 가족 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자

CSS 문법
        ---- {
            ... CSS
        }

전체 선택자

: 스타일을 모든 요소에 적용

단, 전체 선택자는 다른 선택자보다 우선순위가 낮기 때문에
그 이후 선언되는 CSS가 있다면 덮어씌워짐

* {
CSS 속성 : 속성값;
                }

            reset.css
                * {
                    margin: 0;
                    padding: 0;
                    font-family: 'Noto Sans'
                }

ex)

<style>

h1 {

color:chartreuse

}

* {

margin: 0;

padding: 0;

color: brown;

}

</style>

요소 선택자

: 특정 태그명을 선택하여 모든 해당 태그에 CSS를 적용

ex)
p {
CSS 속성: 속성값;
}

id, class 선택자 (중요!)

: 요소의 id와 class 속성에 관한 이야기
                <p id="" class=""> ...</p>

id, class 속성은 어디에 사용?
id ; 고유값
class ; 그룹화

특정 요소를 그룹으로 묶어주거나 하나의 요소만 구분하기 위해 사용
-> 요소에 이름을 지어주는 행위

            1) 그룹화 할 때 사용하는 속성 : class
            2) 특정 요소를 선택하여 사용하는 속성 : id

            이를 활용하여 CSS 선택자로 적용한다면

            내가 원하는 요소를 선택하여 CSS 속성을 부여할 수 있고
            한 번의 CSS 속성의 부여를 통해 여러 요소(특정 그룹)에 CSS 적용이 가능

                id 선택자
                    #아이디명 {
                            CSS 속성명: 속성값;
                    }

                    <div id="nav"></div>

                    #nav {
                        ...
                    }

                class 선택자
                    .클래스명 {
                        CSS 속성명: 속성값;
                    }

                    <ul>
                        <li class="menu_item"></li>
                        <li class="menu_item"></li>
                        <li class="menu_item"></li>

                    </ul>

                    .menu_item {
                        ...
                    }

<head>

<title>id/class 선택자</title>

<style>

.small-font {

font-size: 12px;

}

.big-font {

font-size: 24px;

}

.red-text {

color: red;

}

#red-text {

color: red;

}

.font-bold {

font-weight: bold;

color: blue;

}

</style>

</head>

<body>

<header>HEADER</header>

<main>

<h2>ID/CLASS 선택자</h2>

Lorem ipsum dolor sit

amet consectetur adipisicing elit.

</span>

Aliquam eligendi esse at aperiam saepe.

<span class="red-text big-font"> Dolore unde ea nemo. </span>

Ipsa fuga nesciunt repellat velit ullam deserunt tempora placeat fugiat

aut dolores.

</p>

Lorem ipsum dolor sit amet, <span> consectetur adipisicing elit. </span>

Nulla, rerum, consequuntur magnam animi fugiat voluptatum

<span>

quis maiores voluptatibus voluptates dolor aperiam explicabo incidunt

nam voluptatem.

</span>

<span class="red-text font-bold"> Delectus ab fuga iusto alias.</span>

</p>

</main>

<footer>FOOTER</footer>

</body>

</html>

그룹 선택자

선택자1, 선택자2, ... {
                ...CSS 문법
            }

            .active, #content {
                ...
            }

                장점: 동일한 속성을 부여해야하는 경우
                CSS를 추가로 작성하지 않고 재사용할 수 있다

가족 선택자 (중요!)

: CSS 선택자의 가족

HTML 요소의 가족관계
조상: 상위의 모든 요소
부모: 바로 위 상위 요소

자손: 하위의 모든 요소
자식: 바로 아래 하위 요소

형제: 이웃한 요소
ex)
                    <div>
                        <div>
                            <div> -- 기준 요소
                                <div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div></div>
                            <div></div>
                        </div>
                        <div></div>
                        <div></div>
                    </div>

자식 선택자 (중요중요!)
                (" > ")

                기준 선택자 > 자식 선택자 {
                    ... CSS
                }

                header > nav {
                    ...
                }
                header > nav > p {
                    ...
                }

                    ex)
                    <header>
                        <nav>
                            <p> ... </p> <--선택
                        </nav>
                    </header>

자손 선택자 (중요중요!)

                기준선택자 자손선택자 {
                    ...
                }

                header p {
                }

                <header>
                    <p>
                        <p>
                            <p></p>
                        </p>
                    </p>
                    <p></p>
                </header>

            => 이어지는 깊이가 길어질수록 우선순위가 높아진다
                class, id 값을 남발하는 것을 방지
                CSS 선택자로서의 가독성 상승

형제 선택자

ex.

<!DOCTYPE html>

<head>

<title>자식자손선택자</title>

<style>

ul a {

text-decoration: none;

}

ul > a {

color: aqua;

}

ul > li > a {

color: darkmagenta;

}

ul > li > p > a {

color: forestgreen;

}

ul li a {

color: yellow;

}

ul li > p > a {

color: blue;

}

/* 길이가 더 중요함(개수) 자손자식 관계는 중요하지 않음

길이를 바탕으로 우선순위가 결정됨*/

</style>

</head>

<body>

<h2>자식자손선택자</h2>

<ul>

<li>

</li>

<li>

<p>

</p>

</li>

</ul>

</body>

</html>

ex2.

<!DOCTYPE html>

<head>

<title>nthchild</title>

<style>

.list > li:first-child {

color: brown;

}

.list > li:nth-child(3) {

color: aqua;

}

.list > li:last-child {

color: chartreuse;

}

</style>

</head>

<body>

</ul>

</body>

</html>

속성 선택자

속성? (properties)
<요소명 속성="속성값"> ... </요소명>

속성명

[속성명] {

...
}

[속성명 = "속성값"]
[속성명]="속성값"] {

...
        }

       ex.
            <a href="https://www.daum.net"></a>
            <a href="https://www.naver.net"></a>

            [href="https://"] {
                ...
            }

            [type="checkbox"] {
                ...
            }

            [name="user-email"]{
                ...
            }

            // 굳이 클래스를 주지 않아도 선택할 수 있다

            <input type="text" name="user-email" id/class="">

            // id/class를 주지 않아도 속성을 선택해 적용할 수 있다

부록
            [속성명 = "속성값"] -> 값이 완벽 일치
            [속성명 ~= "속성값"] -> 값이 다른 값과 띄어쓰기로 구분
             ex. name="apple banana"

            [속성명 *= "속성값"] -> 속성값에 포함
            ex. name="bbapplecc"

            [속성명 $="속성값"] -> 속성값이 접미사로 끝나는 요소
            ex. name="~apple"

            [속성명 ^="속성값"] -> 속성값이 접두사로 시작하는 요소
            ex. name="apple~"

            [속성명 |="속성값"] -> 속성값이 일치하거나 접두사로 있으면서 -으로 연결
            ex. name="apple-banana"

가상 클래스 선택자 (:)

: 클래스를 추가할 필요 없이 요소 중 원하는 특정 요소의 스타일 지정
보통은 특정한 <<행위>>에 대한 CSS 속성을 부여할 때 많이 사용

[: hover]
해당 요소에 커서(마우스)가 올라가 있을 때 어떻게 바꿀 것인지

[: active]
해당 요소를 마우스(커서)로 클릭했을 때

[: focus]
사용자 입력 요소가 선택되어 활성화 되었을 때

[: nth-of-type(Jnthj-child)]
        해당 요소가 몇 번째 자식인지 선택자로 선택할 때
        - first-child
        - last-child
        - nth-child(n), n=자연수(1,2,3,4,5,6,7,8, ...)
        - nth-child(2n-1) // 수학공식
        - nth-child(odd/even) // 홀/짝도 가능

가상 요소 선택자 (::)

: 선택된 요소 뒤나 앞에 가상의 요소를 만들어 내거나
해당 요소의 특정한 속성값에 대한 CSS 속성 부여를 위해 사용

[:: before]
해당 요소 앞(이전)에 가상의 요소

[:: after]
해당 요소 뒤(이후)에 가상의 요소

[:: placeholder]
사용자 입력 태그의 placeholder 속성에 CSS를 부여

[:: -webkit-scrollbar]
해당 요소의 스크롤바에 CSS를 부여를

ex.

<!DOCTYPE html>

<head>

<style>

[type="text"] {

color: blue;

text-align: center;

}

[type="text"] ::placeholder {

color: cornflowerblue;

}

[type="text"] {

background-color: darkgoldenrod;

}

a {

text-decoration: none;

}

[href] :visited {

color: chartreuse;

}

[href] :hover {

color: blueviolet;

}

ul > li {

list-style: none; /*리스트의 반점 삭제*/

}

ul > li ::after {

content: "|";

}

ul > li:last-of-type::after {

content: "";

}

</style>

</head>

<body>

<a href="https://www.naver.com"

>네이버     로<br />이동</a

<ul>

</ul>

</body>

</html>

사실은 이거 다 모르겠어요

나중에 다시 찾아보고 공부해야겠어요

지금은 이런 게 있다 정도만 ㅠㅠ

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

프론트엔드 CSS 요소의 레이아웃[위치, 정렬] - display, position, flexible layout (0)	2023.02.17
프론트엔드 CSS - padding, margin, box-sizing , 테두리, 레이아웃 (0)	2023.02.11
프론트엔드 CSS 속성 - 글꼴, 크기단위, 배경 (0)	2023.02.11
프론트엔드 Text관련 CSS 속성 - color, text-align, line-height, text-indent, text-decoration, text-shadow (0)	2023.02.05

현재글프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자

Developer

구독하시면 과연 이 초보개발자가 어디까지 가나 보게 되실 겁니다

HTML, java eclipse, Python, 정처기 실기, OracleDatabase, 파이썬, 백준, CSS, 정보처리기사 실기, 정처기 실기 프로그래밍 언어, 백준 java, SQL, 백준코딩, 정처기 실기 기출, 백준코딩테스트, java코딩, 230628, Java, Spring, Eclipse,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Developer