7. CSS

2022. 5. 20. 14:58ㆍ지식정리

CSS

CSS란?

  • Cascading Style Sheets
  • HTML 요소가 어떻게 화면에 보여져야 하는지 묘사한다.
  • 여러 web page의 layout을 조정할 수 있기에 생산성이 있다.
  • 외부 stylesheets는 CSS 파일로 따로 저장 가능하다.
  • W3C(World Wide Web Consortium) 에서 web page를 tag로 포매팅할 때 생기는 경제성과 복잡해지는 문제를 해결하기 위해 개발. style formatting을 html 에서 제거

CSS의 구문

selector    Declaration     Declaration
h1          { color : blue; font-size : 12px }
            property  value property value
  • selector : 스타일 지정하고자 하는 HTML 요소
  • declaration : 세미콜론으로 구분되는 하나 이상의 선언들.
    • property : 특성 이름
    • property value : 특성 값

CSS Selector

  • 스타일 하기를 원하는 html 요소를 찾는데 쓰인다

종류

  • simple selectors
    • name, id, class에 기반
  • combinator selectors
    • 요소간 세부적인 관계를 기반
    • space , > , +, ~
  • pseudo-class selectors
    • 특정 상태 기반
    • 첫번째 글자, 줄, 요소
    • content를 element의 content 앞에, 뒤에 위치
  • attribute selectors
    • attribute / attribute 값에 기반
    • a[attribute="value"] 처럼 특정한 attribute 가진 element 지정

CSS element selector

  • element 이름 기반으로 선택 
    p {
text-align: center;
color: red;
}

    CSS id selector

  • id attribute로 가지고 요소 선택
    #para1 {
text-align: center;
color: red;
}

CSS class Selector

  • class attribute로 html element 선택 
    .center {
text-align: center;
color: red;
}
  • 특정 element의 특정 class atrribute로도 선택 가능
    p.center {
text-align: center;
color: red;
}
  • class attribute 중복 기재 가능
    <p class="center large">This paragraph refers to two classes.</p>

CSS Univeral selector

  • * : 페이지의 전체 html 요소를 선택하는 공통 selector
    ```
  • {
    text-align: center;
    color: blue;
    }

CSS Grouping Selector

  • 여러 html element 들에 같은 style을 동일하게 적용
    h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

전체를 한데 묶어서 코드 중복 해소

h1, h2, p {
text-align: center;
color: red;
}


| selector | 예시 |
|---|---|
| #id | #firstname |
| .class | .intro |
| element.class | p.intro |
| * | * |
| element | p |
| element,element,... | div, p |

## CSS 추가하는 방법(3가지)
* 외부 CSS
* 내부 CSS
* 인라인 CSS

> 외부 CSS
* 외부의 CSS 파일을 추가
* 파일 하나 변경 만으로 전체 웹사이트의 외관을 바꿀 수 있음
``` * 외부 CSS 파일 내용 ``` body { background-color: lightblue; }

h1 {
color: navy;
margin-left: 20px;
}

> 내부 CSS
* 하나의 HTML 페이지 내 고유의 스타일을 적용할 때 쓰일 수 있다
* `<style>` element로 정의되고, `<head>` 안쪽에 위치한다

```

인라인 CSS

  • 하나의 element에 고유의 스타일을 적용할 때 쓰일 수 있다.
  • style attribute 에 어떤 CSS property든 적용해서 쓸 수 있다.
    <h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

CSS가 여러개 있을 때의 우선순위

  • 마지막으로 정의된 CSS property가 적용된다.
  • 외부 / 내부는 마지막 순서의 property가 덮어쓴다

    Cascading order

  • cascade = 폭포가 되어 떨어지다
  • 우선순위에 따라서 CSS property가 폭포수처럼 위에서 아래로 떨어지듯 적용된다.
    • 위에서 적용된 것은 아래에서 건들 수 없다.
    • 예시 : 3단 케이크를 만든다. 케이크 한단을 쌓고 스프링클을 뿌리고를 반복하면 맨 마지막에 뿌린 스프링클이 제일 위에 덮인다.
  • 우선순위
  1. Inline style(HTML 요소 내부)
  2. External & internal style sheets(head 요소 내부)
  3. Browser default(브라우저 기본 값)

css commentation

  • single line : /* comment */
  • multiple line : /* comment*/
    /* This is
a multi-line
comment */

CSS Color

  • 미리 정해진 이름이 있거나
  • RGB,HEX,HSL, RGBA, HSLA 값들이 있다.

색깔의 이름들 

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

배경색

  • HTML 요소의 배경을 정할 수 있다.
  • <h1 style="background-color:DodgerBlue;">Hello World</h1>

글자색

  • <h1 style="color:Tomato;">Hello World</h1>

테두리 색

  • 테두리 색깔, 두께, 무늬를 포함
  • <h1 style="border:2px solid DodgerBlue;">Hello World</h1>

색상값

  • RGB,HEX,HSL, RGBA, HSLA 값들
  • ex) TOMATO
    • rgb(255,99,71)
    • #ff6347
    • hsl(9,100%,64%)
    • 투명도 추가시 rgba(255,99,71,0.5)
      <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

...

...

```

CSS 레이아웃

display

  • element 가 어떻게 display 되는지를 결정한다.

  • block 과 inline 이 있다.

  • Block level element

    • 항상 새 줄에서 시작하고 너비 전체를 차지한다
    • <div>
    • <h1> - <h6>
    • <p>
    • <form>
    • <header>
    • <footer>
    • <section>

  • inline element

    • 개행을 하지 않고 필요한 만큼만 너비를 차지한다.
    • <span>
    • <a>
    • <img>

      기본 display 값 덮어쓰기

  • inline element <-> block element

  • element 의 display 방식을 바꿀 수는 있어도 element 자체를 바꿀수는 없다. inline 요소에 display: block 설정을 해도, 다른 block element를 안에 넣는 것이 금지다.

  • ex

    li {
  display: inline;
}

span {
  display: block;
}

a {
  display: block;
}

  • display : none

    • element를 지우거나 재생성 안하고 보여줬다 숨겨준다.
    • <script>는 display:none이 기본이다.
    • visibility:hidden 은 자리는 차지하면서 숨긴다.(여전히 레이아웃에 영향을 준다)

Position property

  • element 배치시키는 형식
  • 종류
    • static
      • 기본설정, 페이지 흐름에 따른다.
    • relative
      • 상하좌우 특성을 가지고 상대적인 위치를 정한다.
      • 다른 컨텐츠는 조정되지 않음
    • fixed
      • 페이지 스크롤 되고 상관없이 viewport의 상대적인 위치에 고정된다.
    • absolute
      • 가장 가까운 부모 요소에 상대적인 위치에 고정된다.
      • 정상적인 flow에서 제거되어서 다른 요소를 덮을 수 있다.
    • sticky
      • relative와 fix의 중간, 스크롤 위치에 따라 달라진다.

Layout - z - index property

  • 요소 순서에 따라서 쌓이는 것을 상술한다.
  • position이 정해진 요소에 대해서만 동작한다
  • z - index 없이 겹치면 html 나온 순서에 따라 위에서 부터 overlap 된다. 맨 마지막에 코드로 나오는 element 가 제일 윗쪽에 position이 잡힌다

Layout - Overflow

  • 해당 property는 컨텐츠가 너무커서 영역에 맞지 않을때 어떻게 제어할지 정한다
  • value 종류
    • visible - default 값. overflow되는 컨텐츠는 영역을 넘어서서 보여진다
    • hidden - overflow 되는 컨텐츠는 보이지 않는다
    • scroll - overflow 되는 컨텐츠를 스크롤을 통해 보여준다
    • auto - scroll bar를 필요하면 추가하고 아니면 추가하지 않는다

Layout - display: inline-block

  • display:inline-block 는 요소의 너비나 높이를 정할 수 있다.
  • inline 과의 차이 : top bottom margin/padding이 필요하다.
  • block 과의 차이 : element 다음에 개행을 붙이지 않는다

Layout - Horizontal & Vertical align

Horizontal

  • block element를 가운데 배치시 : margin : auto;
  • text를 element의 가운데 배치시 : text-algin: center;
  • image를 가운데 배치시 :
    • block element 내에 위치
    • margin-left: auto;
    • margin-right: auto;
  • element 정렬 방법
    • position: absolute;
    • float: right;
  • clearfix
    • element가 element를 담고있는 것보다 크기가 크고 float 일때 쓰는 방법 
      .clearfix::after {
content: "";
clear: both;
display: table;
}

      Vertical

  • padding 과 text align: center를 혼용

CSS Combinators

selector들 간의 관계를 설명하는 연산자

  • (space) : 자손 선택자(descendant). 자손에 해당하는 요소는 모두 적용된다
    • 꼭 자식이 아니어도 된다. 포함되기만 하면 된다 
      div p {
background-color: yellow;
}
  • (>) : 자식 선택자(child). 뒤에 따르는 요소는 앞 요소에 포함된다
    • 꼭 한단계 아래 하위요소 여야 한다.
      div > p {
background-color: yellow;
}
  • (+) : 인접한 형제 선택자(adjacent sibling).
    • 바로 옆에 붙어있는 요소만 해당된다. 
      div + p {
background-color: yellow;
}
  • (~) : 일반 형제 선택자(general sibling selector). 해당 요소 뒤에 나오는 모든 형제 요소는 다 선택한다. 
    div ~ p {
background-color: yellow;
}

CSS attribute selectors

특정한 attribute나 attribute 값으로 요소를 스타일링 할 수 있다.

  • CSS[attribute] selector
    • 특정한 attribute로 선택 가능
      a[target] {
background-color: yellow;
}
  • CSS [attribute="value"] selector
    • 특정한 attribute 값에 해당하는 요소를 다 선택
      a[target="_blank"] {
background-color: yellow;
}
  • CSS [attribute~="value"] Selector
    • 특정한 단어를 스페이스 구분해서 포함하는 attribute 값에 해당하는 요소를 선택
      [title~="flower"] {
border: 5px solid yellow;
}
  • CSS [attribute|="value"] Selector
    • 특정 값이거나 "-" 하이픈으로 구분되는 값
    • "top-text" , "top-header" 는 해당되지만 "topcontent"는 해당안됨
      [class|="top"] {
background: yellow;
}
  • CSS [attribute^="value"] Selector
    • 특정 단어로 시작하는 attribute 값에 해당되는 요소
    • "top-text" , "top-header" ,"topcontent" 모두 해당됨
      [class^="top"] {
background: yellow;
}
  • CSS [attribute$="value"] Selector
    • 특정단어로 끝나는 attribute value 가진 요소
      [class$="test"] {
background: yellow;
}
  • CSS [attribute*="value"] Selector
    • 특정 단어를 포함하는 attribute value
    • 일부만 포함해도 상관없음
      [class*="te"] {
background: yellow;
}

CSS 단위(Units)

CSS에는 길이를 나타내는 여러 다른 단위들이 있다. 그리고 width,margin,padding,font-size같은 요소들에는 length 값이 존재한다.

  • 절대 길이 - 고정길이, 정확하게 똑같은 크기로 표현된다.
    • cm (centimeters)
    • mm (millimeters)
    • in (inches. 96px, 2.54cm)
    • px (pixels. 1/96 inch)
      • 기기에 따라서 달라진다. dpi가 낮은 경우 1px이 기기 화면의 pixel 하나이고, 해당도가 높은 화면 같은 경우 1px이 여러 pixel이 될 수 있다.
    • pt (points. 1/72 inch)
    • pc (picas. 12 pt )
  • 상대 길이 - 다른 길이 특성에 상대적인 길이로 나타난다.
    • em - 요소의 font size에 비례 (2em - 현재 font size의 2배)
    • ex - 현재 font의 x-축 높이에 비례
    • ch - "0"의 너비에 비례
    • rem - root element의 font size에 비례
    • vw - viewport 1% 너비에 비례 (viewport - 브라우저 창 크기)
    • vh - viewport 1% 높이에 비례
    • vmin - viewport 중 작은 길이의 1%에 비례
    • vmax - viewport 중 큰 길이의 1%에 비례
    • % - 부모 요소에 비례

Browser 지원

길이 단위 chrome edge firefox safari opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0

CSS Specificity (CSS 특수성, 한정성)

CSS 규칙 2개가 동시에 한 요소에 적용될 때 높은 한정성을 가진 값이 '이긴다'(적용된다)

더 좁은 범위를 가지는 규칙이 적용된다

  • class > element
    <html>
<head>
<style>
  .test {color: green;}
  p {color: red;}
</style>
</head>
<body>

Hello World!

```
  • id > class
    <html>
<head>
<style>
  #demo {color: blue;}
  .test {color: green;}
  p {color: red;}
</style>
</head>
<body>

Hello World!

```
  • inline CSS > id
    <html>
<head>
<style>
  #demo {color: blue;}
  .test {color: green;}
  p {color: red;}
</style>
</head>
<body>

Hello World!

```

'지식정리' 카테고리의 다른 글

Path Manipulation  (2) 2023.01.17
Division by Zero(0으로 나누기)  (2) 2023.01.17
6. Browser는 어떻게 동작하는가?  (0) 2022.05.15
5. Domain name이란?  (0) 2022.05.13
4. Web Hosting이란?  (0) 2022.05.12

관련글

댓글 0

티스토리툴바