[CSS] CSS 스타일, 기본 선택자, 캐스케이딩 스타일 시트

리버 River 2024. 3. 19. 21:53

2024. 3. 19. 21:53

1. CSS 란?

👩🏻‍💻 CSS (style) : 각 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어로 홈페이지의 스타일 즉 디자인 요소를 담당

1) 스타일

a. 스타일 형식

[기본구조]
선택자(Selector) { 속성(property) : 값(value); }
(* 스타일은 기본적으로는 마지막에 작성된 순서대로 표현되어짐!)

✏️ 맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것

✏️ 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라 하며, 세미콜론(;)으로 구분해 스타일 규칙을 여러 개 지정할 수 있다.

b. 스타일의 주석 표기

<style>
    /* style 안에 작성하는 주석방법! */
</style>

✏️ /* */ 안에 한 줄 또는 여러 줄 들어갈 수 있다.

💡 CSS 소스 경량화

- CSS 소스는 네트워크를 이용해 파일로 내려받으므로 되도록 파일 크기가 작은 것이 좋다.

- 즉, 줄 바꿈, 공백등을 제거하고 꼭 필요한 정보만 남겨 파일을 작게 만드는 것을 'CSS 소스 경량화(minify)' 라고 한다.

2) 스타일 시트

📁 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 '스타일 시트'라고 한다.

a. 브라우저 기본 스타일

· CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용

b. 사용자 스타일

💡 인라인 스타일(Inline style)

- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법

</h2 style="color:green">

💡 내부 스타일 시트(Internal style sheet)

- <style>태그를 사용하여 CSS 스타일을 적용하는 방법

<head>
  <style>
       body { background-color: lightyellow; }
  </style>
</head>

💡 외부 스타일 시트(External style sheet)
- 외부에 작성된 .CSS문서 즉 스타일 시트 파일을 연결하여 적용하는 방법

<head>
    <link rel="stylesheet" href="외부 스타일 시트 파일 경로">
</head>

⚡️ 외부 스타일 시트 작성
1. html 파일이 있는 디렉토리에 css 라는 이름의 디렉토리를 생성
2. css 디렉토리에 main.css 파일 생성
3. html 파일의 <style> 태그 안의 부분을 복사해서 main.css에 붙여넣기
▶️ <style> 태그는 포함하지 않음
4. html 파일의 <style> 태그 삭제
5. <link> 태그로 css 파일을 연결

⚡️ 외부 스타일 시트의 단점
- 캐쉬 때문에 바로 적용이 안 되는 경우가 있음

<!-- main.css 파일 -->
.de {
    color: #09F;
}

<head>
    <meta charset="UTF-8">
    <title>CSS 지정 방식</title>
        <link rel="stylesheet" href="./css/main.css" />
</head>

<body>
    <p class="de">
        디지털 디자인 이란 ?<br>
        우선 '디지털(Digital)' 그리고 '디지털 스토리텔링(Digital Storytelling)'이란 말에 대해 생각해보자.
    </p>

</body>

2. CSS 기본 선택자

1) 클래스 선택자 class selector

.클래스명 { 스타일 규칙 }

👩🏻‍💻 클래스 이름을 사용해서 다른 선택자와 구별하는데, 클래스 이름 앞에 마침표(.)를 붙여야 한다.

👩🏻‍💻 클래스 스타일을 적용할 때는 태그 안에 class="클래스명" 처럼 class 속성을 사용해서 지정

👩🏻‍💻 요소 하나에 클래스 스타일을 2개 이상 적용할 수 있다.

▶️ 이 때 공백으로 구분해서 스타일 이름을 적으면 된다.

<head>
    <meta charset="UTF-8">
    <title>CSS 지정 방식</title>
    <style>
        .de {
            color: #09F;
        }
    </style>
</head>

<body>
    <p class="de">
        디지털 디자인 이란 ?<br>
        우선 '디지털(Digital)' 그리고 '디지털 스토리텔링(Digital Storytelling)'이란 말에 대해 생각해보자.
    </p>
</body>

2) 전체 선택자 universal selector

* { 속성: 값... }

👩🏻‍💻 html내에 등장하는 모든 형태를 선택 (초기화, 기본 설정값) 가급적 사용안하는 것이 좋음.

➡️ reset.css 치면 나오는 글 참고해서 작성하는 것이 좋다.

<style>
    * {
         margin: 0; /* 바깥여백 */
         padding: 0; /* 안쪽여백 */
      }
</style>
</head>
<body>
    <h4>Artwork Concept Drawing</h4>
    <h1>아트웍 컨셉 드로잉</h1>
    <p>
        편집 포트폴리오에 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트웍 실습,
        3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
    </p>
</body>

3) 타입 선택자 type selector

태그명 { 스타일 규칙 }

👩🏻‍💻 특정 태그를 사용한 모든 요소에 스타일을 적용하는 선택자로, html 화면 내에서 하나의 이름으로 한 번만 사용권장
➡️ 주로 큰 단락, 부모에서 사용

👩🏻‍💻 여러 태그들을 한 번에 선택해 스타일 속성을 적용할 때 쉼표 사용

💡 태그(tag)와 요소(element)

- 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킴

- 즉 요소는 태그 안에 적힌 문자들을 지칭

<style>
        * {
            margin: 0; /* 바깥여백 */
            padding: 0; /* 안쪽여백 */
        }

        body {
            background: #000000; /* 배경색 지정. #000 -> 검정색 */
            color: white; /* 글자색 */
        }
</style>
</head>
<body>
    <h4>Artwork Concept Drawing</h4>
    <h1>아트웍 컨셉 드로잉</h1>
    <p>
        편집 포트폴리오에 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트웍 실습,
        3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
    </p>
</body>

태그 선택자와 클래스 선택자를 함께 사용하면 더 정확하게 태그를 선택할 수 있음
ex. 태그명.클래스명

<head>
    <style>
        li.select {
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="select">Lorem ipsum</h1>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>

4) id 선택자 id selector

#아이디명 { 스타일 규칙 }

👩🏻‍💻 id 선택자도 클래스 선택자와 마찬가지로 특정 부분에 스타일을 적용할 때 사용
👩🏻‍💻 마침표(.) 대신 # 기호를 사용한다는 점만 제외하면 클래스 선택자와 사용법은 동일
👩🏻‍💻 주로 큰 단락, 부모에서 사용. 자바 스크립트에서 사용.

<head>
    <meta charset="UTF-8">
    <title>스타일시트</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #title1 {color: #666666;}
        #title2 {color: blue;}
        #title3 {color: orange;}
        #title4 {color: red;}
        #title5 {color: gray;}
        #title6 {color: green;}
    </style>
</head>
<body>
    <h1 id="title1">웹디자인</h1>
    <h2 id="title2">스마트폰 웹디자인</h2>
    <h3 id="title3">웹기획</h3>
    <h4 id="title4">웹프로그래밍</h4>
    <h5 id="title5">웹퍼블리쉬</h5>
    <h6 id="title6" style="color:red;">제이쿼리</h6>
</body>

id는 고유값이어야 하지만, 스타일시트에서는 id 속성 중복이 문제가 되지 않음
하지만 자바스크립트는 id 속성이 중복될 경우에 문제가 발생
예) getElementById(), getElementsByClassName()
id 속성은 중복되지 않게 사용해야 함

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #rint { color: red;}
    </style>
</head>
<body>
    <h1 id="rint">CSS3 Selector Basic</h1>
    <h2 id="rint">CSS3 Selector Basic</h2>
    <h3 id="rint">CSS3 Selector Basic</h3>
</body>

5) 그룹 선택자

선택자1, 선택자2 { 스타일 규칙 }

👩🏻‍💻 여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표(,)로 구분해 여러 선택자 나열 후 스타일 규칙을 한 번만 정의

3. 캐스케이딩 스타일 시트

🚀 캐스케이딩 cascading 은 CSS 의 'C'에 해당하며, 스타일 시트에서 우선순위가 위에서 아래로 적용된다는 의미로 사용

🚀 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정

스타일 충돌하지 않게 하는 방법 : 스타일 우선순위 적용 / 스타일 상속

1) 스타일 우선순위

👾 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙

👾 웹 브라우저 내용을 표시할 때 사용자 스타일, 제작자 스타일, 웹 브라우저 기본 스타일 순으로 우선 적용 됨

👾 중요도가 같은 스타일인 경우 필요한 요소에만 적용할 스타일 일수록 우선순위가 높아진다.

a. ! important : 스타일에 강제 스타일 적용 시 사용 ex) background-color: yellow !important;
b. 인라인 스타일 ex) <h2 style="color:green">
c. id 스타일 ex) #id { color: #000; }
d. 클래스 스타일 ex) .class { color:#000; }
e. 타입 스타일 ex) h1 { color:#fff; }

<head>  
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        p {
            font-style: italic; /* 글자 스타일 */
            color: red !important /* 글자 색상. 중요 스타일은 !important 붙임 */
        }

        p {
            color: orange; /* 글자 색상 */
        }
    </style>
</head>
<body>
    <h1>디자인스킬업</h1>
    <p style="color:blue;">
        2D 그래픽은 모든 그래픽에서 기본이라 할 수 있습니다. 그래픽 작업에서 높은 비중을 차지합니다.
    </p>
</body>

💡 소스코드의 작성 순서

- 스타일 시트에서 중요도와 적용범위가 같아면 그 다음은 스타일을 정의한 소스 순서로 우선순위가 정해진다.

➡️ 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

<head>
     <style>
        * {
            margin: 0; /* 바깥여백 */
            padding: 0; /* 안쪽여백 */
        }
        body {
            background: #000000; /* 배경색 지정. #000 -> 검정색 */
            color: white; /* 글자색 */
        }
        body {
            background: #999; /* 동일한 속성에 값을 지정하는 경우 나중의 것이 적용됨 */
            font-family: '돋움'; /* 기본 글꼴 돋움 */
            font-size: 10px; /* 글자 크기 10px */
        }
        body {
            line-height: 30px; /* 줄 간격 30px */
        }
        a {
            text-decoration: none; /* a 속성을 가진 링크에 어떤 꾸밈도 하지 않음 */
            color: yellow; /* 링크를 지정한 글자의 색상을 노란색으로 지정 */
        }
        .color1 {
            color:green;
        }
    </style>
</head>

<body>
    <h4>Artwork Concept Drawing</h4>
    <h1 class="color1">아트웍 컨셉 드로잉</h1>
    <p class="color1">
        편집 <a href="#">포트폴리오</a>에 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트웍 실습,
        3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
    </p>
</body>

2) 스타일 상속

👾 웹 문서에서 사용하는 여러 태그는 서로 포함 관계

▶️ 이 때 포함하는 태그를 부모 요소, 포함된 태그를 자식요소
👾 '스타일 상속' : 부모 태그에 특정 값을 적용 시 아래, 즉 하위 요소에도 그 속성들이 그대로 적용
▶️ 예를 들어 정렬 text-align, color, font-size...

▶️ body 태그는 웹 문서에서 사용한 모든 태그의 부모요소

<head>
    <meta charset="UTF-8">
    <title>스타일시트</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
       
        body {
            font-family: '돋움'; /* 글꼴 */
            color: red; /* 글자 색상 */
        }
    </style>
</head>
<body>
    <h1>디자인과정</h1>
    <ul>
        <li>웹학과</li>
        <li>편집디자인학과</li>
        <li>CG학과</li>
        <li>모션영상학과</li>
        <li>건축인테리어학과</li>
        <li>기계학과</li>
    </ul>
</body>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 배경 이미지 지정과 속성 (0)	2024.03.22
[CSS] 고급 선택자 \| 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0)	2024.03.21
[CSS] 수직 중앙 정렬 방법, overflow와 scroll (0)	2024.03.21
[CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding] (0)	2024.03.20
[CSS] 박스 모델 요소 및 구성, 테두리 스타일 지정 (0)	2024.03.20

ID_ allriver