[CSS] CSS 2강 - CSS의 구조를 알아보자

이번 시간에는 CSS의 언어 자체 구조를

조금 더 깊이 살펴볼 시간을 가져봅시다.

HTML에 CSS 적용하기

가장 먼저 살펴볼 부분은 CSS를 문서내에

적용하는 세 가지 방법입니다.

외부 스타일 시트

CSS를 시작하기 앞서 외부 스타일 시트를

페이지에 연결했습니다. CSS를 여러 페이지에

연결할 수 있으며,CSS를 문서에 첨부

하는 가장 일반적이고 유용한 방법이며

모두 동일한 스타일 시트로 CSS 스타일을

지정할 수 있습니다. 대부분의 경우 사이트의

다른 페이지는 모두 동일하게 보이기 때문에

기본 모양과 느낌에 동일한 규칙을 사용할 수

있습니다.

외부 스타일 시트는 CSS 확장자가 .css인

별도의 파일로 작성하고, HTML의 <link> 요소

에서 참조하는 경우입니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1-2-1.css-exterio</title>
    <link rel="stylesheet" href="css/1-2-1.css-exterior.css">
</head>

<body>
    <h1>Hello World!</h1>
    <p>CSS first example</p>
</body>

</html>

CSS 파일내 구조는 다음과 같습니다.

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

<link> 요소의 href 속성은 여러분의 파일 시스템

파일을 참조해야 합니다.

위 예에서, CSS 파일은 HTML 문서와

동일한 폴더가 있지만, 다른 곳에 저장한다면

지정된 경로를 다음과 같이 조정할 수 있습니다.

<!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css">

<!-- 현재 폴더의 styles 라는 하위 폴더에 있는 general 이라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
<link rel="stylesheet" href="../styles/style.css">

내부 스타일 시트

내부 스타일 시트는 외부 CSS 파일이 없는 대신

HTML <head> 태그 안에 포함된 <style> 요소

내부에 CSS를 배치해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1-2-2.css-interior-style-sheet</title>
    <style>
        h1 {
            color: palegoldenrod;
            background-color: yellowgreen;
            border: 1px solid black;
        }

        p {
            color: lavender
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p>it's my first css Example!</p>
</body>
</html>

이는 일부 상황에서 유용할 수 있지만 CSS가

필요한 외부 스타일 시트 만큼 효율적 이지

않습니다.

웹 사이트에서, CSS가 모든 페이지에서 반복되고

변경이 필요한 경우 여러 위치에서 업데이트 됩니다.

인라인 스타일

인라인 스타일은 style 속성 내 포함된 한

요소에만 영향을 주는 CSS 선언입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-2-3.css-inline-style</title>
</head>
<body>
    <h1 style="color:aqua; background-color: beige; border: 1px solid brown">
        Hello World!
    </h1>
    <p style="color:blueviolet;">첫번째 CSS 예제</p>
</body>
</html>

하지만 이런 코드방식은 유지 관리가 좋지 않고

프레젠테이션 CSS 정보와 HTML 구조 정보를

혼합해 코드를 읽고 이해하기 어렵게 만듭니다.

다른 유형의 코드를 분리하여 유지하면

코드 작업을 하는 모든 사람이 훨씬 쉽게

작업할 수 있습니다.

인라인 스타일이 더 일반적이거나 권장되는

곳이 몇군데 있습니다. 작업 환경이 실제로

제한적인 경우 이를 사용하는 것이 좋습니다.

또한 가능한 많은 전자 메일 클라이언트와

호환되도록 HTML 전자 메일이 많이 사용된

것을 볼 수 있습니다.

이 기사에서 CSS 실습하기

이 기사에는 많은 CSS 예제가 있습니다.

이렇게 하려면, 컴퓨터에 새 디렉토리/폴더를

작성하고 그 안에 다음 두파일의 복사본을

작성하시는 것이 더욱 좋습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1-2-4.css-test</title>
    <link rel="stylesheet" href="css/1-2-3.css-test.css">
</head>

<body>

    <p>테스트용 HTML을 작성</p>

</body>

</html>

p {
  color: blue;
}

그 다음, 실험하려는 CSS를 발견하면

HTML <body> 콘텐츠를 스타일을 지정할

HTML로 바꾸고 CSS를 추가하여

CSS 파일 내에서 스타일을 지정해줍니다.

선택자 (Selectors)

선택자를 만나지 않고서야 CSS에 대해서

자세하게는 이야기 할 수 없습니다.

선택자란 스타일을 적용하기 위해

HTML 문서에서 무언가를 대상으로 하는

방법입니다.

스타일이 적용되지 않는다면 선택자가

일치해야 하는 것과는 동일하지 않을 수

있습니다.

각각의 CSS 규칙은 선택자 또는 선택자

목록으로 시작하여 규칙을 적용해야 하는

요소 또는 요소 규칙을 브라우저에 알려줍니다.

다음은 모두 유효한 선택자 또는 선택자

목록의 예입니다.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

위의 선택자를 사용하는 CSS 규칙과 스타일을

적용할 일부 HTML을 만들어 봅시다!.

우선 순위 (Specificity)

두 선택자가 동일한 HTML 요소를 선택할 수 있는

경우가 종종 있습니다. 단락을 파란색으로 설정하는

p 선택자 및 선택한 요소를 빨간색으로 설정하는

class가 있는 아래 스타일 시트를 입력해줍니다.

.special {
  color: red;
}

p {
  color: blue;
}

HTML 문서에 special 클래스가 있는 단락이

있다고 가정합니다. 두 규칙이 모두

적용 될 수 있으므로 어느쪽이 우선일까요?

우리의 문단은 어떤 색이 될까요?

<p class="special">나는 무슨 색?</p>

CSS 언어에서 클래스와 태그가 충돌 시

어떤 규칙이 이기는지 제어하는 규칙이 있습니다.

이러한 규칙을 계단식(cascade) 및 우선 순위(specificity)

라고 합니다. 아래 코드를 블록에서 p 선택자에

대해 두 가지 규칙을 정의했지만, 단락이

파란색으로 표시됩니다. 파란색으로 설정한

선언은 스타일 시트에서 나중에 나타나고 이후

스타일은 이전 스타일을 재정의 하기 떄문입니다.

이것은 실제로 계단식(cascade)라고 합니다.

p {
  color: red;
}
p {
  color: blue;
}

그러나, class 선택자 및 요소 선택자가 있는

이전의 블록의 경우에 class가 이기고 단락이

빨간색으로 표시됩니다.

class는 요소 선택자 보다 더 구체적이거나

더 우선 순위가 높은 것으로 설명되 이깁니다.

속성 및 값

css에 가장 기본적인 수준에서, CSS는

두 가지 요소로 구성됩니다.

속성(Properties): 변경할 스타일 기능( font-size, width 등)
을 나타내는 식별자 이다.
값(Values): 지정된 각 속성에는 값이 지정되어 있으며
이는 해당 스타일 기능을 변경하는 방법(글꼴, 너비 또는 배경색)
을 나타냅니다.

아래 이미지는 단일 속성과 값을 강조 표시합니다.

속성 이름은 color이고 값은 blue 입니다.

값 과 쌍을 이루는 속성을 CSS 선언(description)

이라고 합니다. CSS 선언은 CSS 선언 블록 안에 있습니다.

다음 이미지는 선언 블록이 강조 표시된 CSS를

보여주고 있습니다.

마지막으로 CSS 선언 블록은 선택자와 쌍을 이뤄

CSS Rulesets (또는 CSS 규칙)를 생성합니다.

이미지에는 h1 선택자 및 p 선택자의 두 가지

규칙이 있습니다. h1의 규칙이 강조 표시됩니다.

CSS 속성을 특정 값으로 설정하는 것을

CSS 언어의 핵심 기능입니다.

CSS 엔진은 페이지의 모든 단일 요소에

적용할 선언을 계산하여 적절하게 배치하고

스타일을 지정해주는 역할을 합니다.

기억해야 할 부분은 CSS에서 속성과

값이 모두 대소문자를 구분한다는 것 입니다.

각 쌍의 속성과 값은 콜론 ( : )으로 구분 됩니다.

다음 속성의 다른 값을 찾아 다른 HTML 요소에

적용하느 CSS 규칙을 작성합니다.

font-size
width
background-color
color
border

함수 (function)

대부분의 값은 비교적 간단한 키워드 숫자 값이지만

함수의 형태를 취하는 몇가지 가능한 값이 있습니다.

calc() 함수를 예로 들자면, 이 함수를 사용하면

CSS 내에서 간단한 계산을 수행할 수 있습니다.

<div class="outer">
   <div class="box">The inner box is 90% - 30px</div>
</div>

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: magenta;
  color: white;
}

함수는 함수 이름과 해당 함수에 허용된 값이

배치되는 괄호들로 구성됩니다.

위의 calc() 예제의 경우, 이 박스의 너비는

블록 너비의 90% 에서 30px를 뺀 값을 요구합니다.

이것은 90%가 무엇인지 알지 못하기 떄문에 미리

계산하고 CSS에 값을 입력할 수 있는 것이 아닙니다.

모든 값과 마찬가지로 MDN의 관련 페이지에

사용법 예제가 있으므로 기능의 작동 방식을

더욱 자세히 살펴볼 수 있습니다.

또 다른 예로 rotate()와 같은 transform 에 대한

다양한 값으로 아래와 같이 입력합니다.

<div class="box"></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

다음 속성의 다른 값을 찾아 다른 HTML 요소에

적용하는 CSS 규칙을 작성합니다.

transform
background-image, in particular gradient values
color, in particular rgb/rgba/hsl/hsla values

@rules

아직, 우리는 @rules가 발생하지 않았습니다.

이것들은 CSS에 행동방법에 대한 지침을 제공하는

특수 규칙으로, 일부 @rules는 규칙 이름과 값으로

단순합니다. 예를 들어, 추가 스타일 시트를

기본 CSS 스타일 시트로 가져오려면 @import를

사용할 수 있습니다.

@import 'style.css'

여기서 접하게 될 가장 일반적인 @rules 중 하나는

media-query(미디어 쿼리)인 @media입니다.

이는 특정 조건이 참일 떄만 CSS를 적용할 수

있는 미디어 쿼리를 사용할 수 있습니다.

아래 CSS에는, <body> 요소에 분홍색 배경색을

주는 스타일 시트가 있습니다. 그러나 @media를

사용해서 30em 보다 넓은 viewport가 있는

브라우저에만 적용되는 스타일 섹션을 만들 것

입니다. 브라우저가 30em 보다 넓을 경우

배경색은 갈색으로 변경됩니다.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: brown;
  }

  h1 {
    color: #fff;
  }
} ;

viewport는 너비에 따라 스타일을 변경하는

미디어 쿼리를 CSS에 추가할 수 있므며

결과를 직접 브라우저에서 테스트

해보실 수 가 있습니다.

속기 (shorthands)

font, backgroud, padding, border, margin

등의 일부 속성들은 속기 속성이라 불리며

이는 여러 줄의 속성 값을 한줄로 설정 해

시간을 절약하고 작업에서 코드를 깔끔하게

만들 수 있기 때문입니다.

/* 패딩 및 마진과 같은 4-값 속기에서는 위, 오른쪽, 아래, 왼쪽 (위에서 부터 
시계방향) 순서로 값이 적용됩니다.
위, 아래에 패딩 / 마진을 설정하고 왼쪽 / 오른쪽에 패딩 / 마진을 설정하는 다른 
shorthand 유형 (예: 2-값 shorthands)도 있습니다. */
padding: 10px 15px 15px 5px;

이것들은 모두 똑같을까요?

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

아래 한줄의 코드가

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

아래 코드와 같이 같은 작업을 수행합니다.

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

주석(comments)

CSS도 HTML과 마찬가지로 주석을 달아

몇 달 후에 코드가 다시 작동할 때

코드 작동 방식을 이해하고 코드를 사용하는

다른 사람들이 이해하도록 도와주는 게 좋습니다.

CSS의 주석은 /*로 시작하고 */ 로 끝납니다.

아래 코드 블록에서 주석을 사용하여 다른

고유 코드 섹션의 시작을 표시했습니다.

코드가 더욱 커질수록 코드를 탐색하는 데

더욱 유용합니다. 코드 편집기에서도 주석을

검색할 수 가 있습니다.

/* 기본 요소 스타일링 처리 */
/* =================================================== */

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (max-width: 1200px) {
  /* 1200px 이상 환경에서는 전역 
   여백 크기를 더욱 높힙니다. */
  body {
    padding: 12px 14px;
  }
}

/* DOM에 중첩된 특정 요소 처리 */

div,
p,
#id:first-child {
  background-color: red;
}

div p + p {
  padding-top: 0;
}

주석은 테스트 목적으로 코드의 특정 부분을

일시적으로 "주석 처리"하는 경우에도 유용합니다.

예를 들어서, 코드의 어느 부분에서 오류가

발생했는지 확인하려고 하는 경우, 다음 예제에서는

.special 선택자에 대한 규칙을 주석처리 했습니다.

/*.special {
  color: red;
}*/

p {
  color: blue;
}

CSS에 주석을 추가해 더욱더 익숙해 져야 합니다.

공백(whitespace)

css에서 공백은 실제 공간, 탭 및 줄 바꿈을

의미합니다. HTML과 같은 방식으로 브라우저는

CSS 내부의 많은 공백을 무시하는 경향이 있고,

가독성을 돕기위해 많은 공백이 존재합니다.

아래 첫 번째 예제에서는 각 선언(및 규칙시작/종료)이

각 라인에 있습니다. 이는 CSS를 유지 관리하고

이해하기 쉽기 때문에 CSS를 작성하는 좋은 방법입니다.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}
div p {
  margin: 0;
  padding: 1em;
}
div p + p {
  padding-top: 0;
}

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

대부분의 공백을 제거한 상태에서 정확히

동일한 CSS를 작성할 수 있습니다.

이것은 첫번째 예제와 기능적으로 동일하나

읽기가 다소 어렵다는 단점이 있습니다.

예를 들어, 다음 선언은 유효한 CSS입니다:

margin: 0 auto;
padding-left: 10px;

그러나 다음은 유효하지 않습니다:

margin: 0auto;
padding- left: 10px;

참고 문서

CSS 의 구조 | MDN

CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다.

developer.mozilla.org

GitHub - CSS-STR/css-blog-tutorial

Contribute to CSS-STR/css-blog-tutorial development by creating an account on GitHub.

github.com

'프론트 엔드 > CSS' 카테고리의 다른 글

[CSS] CSS 3강 - CSS의 작동방식 (0)	2023.02.24
[CSS] CSS 1강 - CSS 시작하기 (0)	2023.02.18
[CSS] CSS 란 무엇인가? - CSS3의 등장 (0)	2023.02.17

HTML에 CSS 적용하기

참고 문서

'프론트 엔드 > CSS' 카테고리의 다른 글

티스토리툴바