CSS 관련 요약

글 작성자: juyoungit

css

HTML 문서의 스타일을 설명하는 언어

CSS

CSS(Cascading Style Sheets)
HTML 요소가 표시되는 방법을 기술
웹페이지의 레이아웃을 제어할 수 있음
외부 스타일 시트는 CSS 파일에 저장

CSS가 HTML 페이지에서 스타일과 관련된 부분을 전담하도록 함으로서 HTML은 페이지의 구조만을 기술하는 깔끔함을 가질 수 있음

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
	color: blue;
    font-size: 40px;
    text-align: right;
}
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<h1>CSS 예시를 보고 위한 코드입니다.</h1>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

위의 예시코드에서 h1, p는 Selector(선택기)

color, font-size, text-align은 모두 속성, 그 뒤에 할당된 내용들은 속성값에 해당

CSS Selector(선택기)

스타일을 지정할 HTML 요소를 선택하는 데 사용

CSS Selector를 다음과 같이 5가지 범주로 나눌 수 있음

Simple selectors(간단한 선택기) : name, id, class를 기준으로 요소를 선택
Combinator selectors(조합기 선택기) : 특정 관계에 따라서 요소를 선택함
Pseudo-class selectors(의사 클래스 선택기) : 특정 상태에 따라 요소를 선택
Pseudo-elements selectors(의사 요소 선택기) : 요소의 일부를 선택하고 스타일을 지정
Attribute selectors(속성 선택기) : 특성 또는 속성 값을 기반으로 요소를 선택

CSS Element Selector(요소 선택기)

요소 이름을 기준으로 html 요소를 선택함

h1 {
   text-align: center;
   color: blue;
}

다음의 경우 페이지의 모든 h1 요소는 파란색 텍스트 색상으로 중앙정렬됨

CSS id Selector(id 선택기)

HTML 요소의 id 속성을 이용하여 특정요소를 선택함

요소의 id는 페이지 내에서 고유하므로 id 선택기는 하나의 고유한 요소를 선택하는 데 사용

특정 id를 가진 요소를 선택하려면 해시("#") 문자와 요소의 id를 차례로 입력

#name {
   text-align: blue;
   color: blue;
}

다음은 id를 name으로 가진 html 요소로 적용됨

주의! : 아이디의 이름은 숫자로 시작할 수 없음

CSS Class Selector(클래스 선택기)

특정 클래스 속성을 가진 html 요소를 선택

특정 클래스를 가진 요소를 선택하려면 마침표(" . ") 문자와 클래스 이름을 차례로 입력

.sport {
	text-align: center;
    color: blue;
}

다음과 같이 작성 시 sport 클래스인 모든 html 요소로 적용됨

p.sport {
    text-align: center;
    color: blue;
}

위의 예시의 경우 sport 클래스의 p 요소에 대해서만 적용할 수 있음

또한 html 요소는 둘 이상의 클래스를 참조할 수 있음

-> 명시한 2개의 스타일이 지정되도록 할 수 있음

주의! : 클래스 이름은 숫자로 시작할 수 없음

CSS Universal Selector(범용 선택기)

페이지의 모든 html 요소를 선택함

* {
  text-align: center;
  color: blue;
}

위의 예시처럼 작성 시 기술한 속성을 모든 html 요소에 적용함

CSS Grouping Selector(그룹화 선택기)

동일한 스타일 정의를 가진 모든 html 요소를 선택함

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

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

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

위의 코드와 같이 h1, h2, p 요소의 스타일 정의는 동일함

위의 코드를 다음과 같이 줄여서 적을 수 있음

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

선택기를 그룹화 하려면 각 선택기를 쉼표로 구분할 수 있음

코드량을 최소화 하기 위해서 선택기를 그룹화 하는 것이 좋음

(코드량이 많아지면 전체 소스에 대한 가독성이 떨어지기 때문)

CSS를 추가하는 방법

External CSS(외부 CSS)
Internal CSS(내부 CSS)
Inline CSS(인라인 CSS)

웹브라우져는 스타일 시트를 읽을 때 스타일 시트의 정보에 따라서 html 문서를 형식화함

외부 CSS(External CSS)

외부 스타일 시트를 사용하며 하나의 파일만 변경함으로서 전체 웹사이트의 모양을 변경할 수 있음

외부 스타일 시트를 사용하고 싶은 경우 <head> </head> 내부의 <link> 요소 내부에 있는 외부 스타일 시트 파일에 대한 참조가

포함되어야 함.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

다음과 같은 형식으로 외부 스타일 시트를 불러와서 사용할 수 있음

외부 스타일시트는 모든 텍스트 편집기에서 작성할 수 있으며 확장자는 .css로 저장해야함

외부 css파일에는 html 태그가 포함되서는 안됨

위의 코드에서 사용한 mystyle.css의 내용은 다음과 같음

body {
  background-color: lightblue;
}

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

주의! : 속성값과 단위사이에 공백이 있어서는 안됨

내부 CSS(Internal CSS)

하나의 단일 html 페이지에 고유한 스타일을 적용할 필요성이 있는 경우 사용

내부 스타일은 <head> </head> 섹션 내부의 <style> 요소 내에 정의된다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

인라인 CSS(Inline CSS)

특정한 하나의 요소에 고유한 스타일을 적용하고 싶은 경우 사용

인라인 스타일을 사용하려면 적용하고자 하는 요소에 style 속성을 추가하면 됨.

style 속성은 모든 css 속성을 포함할 수 있음

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

하지만, 인라인 CSS의 경우 내용과 디자인에 대한 부분이 혼합되어 나타나면서 스타일 시트의 장점이 사라지므로

이 방법은 가급적 사용하지 않는 것을 권장한다.

동일한 선택기에 대해 여러개의 스타일 시트가 존재하는 경우

다른 스타일 시트에서 동일한 요소에 대하여 일부 특성이 정의된 경우, 마지막 읽기 스타일 시트의 값이 사용된다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

다음과 같이 외부 스타일 시트 다음에 h1의 color 속성값이 정의된 경우 h1요소는 orange 색을 가진다.

즉, 가장 마지막에 읽힌 속성값이 사용된다는 점을 기억하자(같은 속성에 대해 다른 속성값으로 여러개가 나타난 경우)

계단식 순서

하나의 html 요소에 대해서 둘 이상의 스타일이 지정된 경우 어떤 스타일이 사용되는 가?

페이지의 모든 스타일은 다음의 규칙에 따라서 새로운 가상스타일 시트로 계단화 된다.(?)

인라인 스타일 (HTML 요소 내부)
외부 및 내부 스타일 시트 (헤드 섹션)
브라우저 기본값

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>

<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>

body {
  background-color: lightblue;
}

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

(첫번째 예제 코드에서 사용한 외부 CSS mystyle.css 파일 내용)

다음과 같이 위의 예제를 통해서 동일한 속성에 대해서 위의 우선순위에 따라 해당속성이 결정되어 적용되는 것을 확인할 수 있다.

CSS Comments(주석)

CSS에서의 주석사용법은 html과 다름

/* CSS에서는 다음과 같이 주석을 표시합니다. */

위의 방식은 다음과 같이 여러줄의 코드에 대해서도 적용하여서 사용할 수 있음

/*
다음과 같이 여러줄에 대해서도
주석을 적용하여서
사용할 수 있다.
*/

html과 주석을 표시하는 방법이 다르니 이 부분에 대해서 잘 기억하고 혼동하지 않도록 하자

CSS Colors(색상)

사전정의된 색상이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됨.

(여기서 각 색상값에 대한 내용은 뒤에서 다루는 것으로 하겠다.)

CSS 색상이름

CSS에서는 색상이름을 이용해서 색상을 지정할 수 있음. CSS, HTML은 총 140개의 표준색상 이름을 지원함.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--CSS 색상이름-->
    <h1 style="background-color:Tomato;">Tomato</h1>
    <h1 style="background-color:Orange;">Orange</h1>
    <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
    <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
    <h1 style="background-color:Gray;">Gray</h1>
    <h1 style="background-color:SlateBlue;">SlateBlue</h1>
    <h1 style="background-color:Violet;">Violet</h1>
    <h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

다음과 같이 색상에 대한 이름을 사용해서 색상을 지정할 수 있음

그리고 위의 예시 코드에서 볼 수 있듯이 "background-color" 속성을 이용해서 html 요소의 배경색을 지정할 수 있음.

위의 예시코드의 경우 <h1> 요소의 배경색을 background-color 속성을 이용해서 설정한 모습을 확인할 수 있음.

다음과 같이 vscode에서 color와 관련된 속성 설정 시 사용할 수 있는 색상과 그에 해당하는 이름을 리스트 형식으로 보여줘서

이를 편리하게 활용할 수 있다. 다양한 색상이름에 대해서 알아보는 데에도 유용하다.

CSS 텍스트 색상

"color" 속성을 사용해서 텍스트의 색상을 설정할 수 있음

<!--CSS 텍스트 색상-->
<h1 style="color:cornflowerblue">텍스트 색상 설정1</h1>
<p style="color:darkorange">텍스트 색상 설정2</p>
<p style="color:gold">텍스트 색상 설정3</p>

CSS 테두리 색상

"border" 속성을 사용해서 html 요소의 테두리 색상을 설정할 수 있음

<h1 style="border: 2px solid green">테두리 색상 설정1</h1>
<p style="border: 2px solid hotpink">테두리 색상 설정2</p>
<p style="border: 2px solid indigo">테두리 색상 설정3</p>
<h1 style="border: 5px solid green">테두리 색상 설정1(조금 더 두껍게)</h1>
<p style="border: 5px solid hotpink">테두리 색상 설정2(조금 더 두껍게)</p>
<p style="border: 5px solid indigo">테두리 색상 설정3(조금 더 두껍게)</p>

테두리의 두께와 색상을 설정하는 부분을 잘 보고 기억하도록 하자

CSS 색상값

CSS에서 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있다.

<p>모두 동일한 Tomato 색상:</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>동일한 Tomato 색상에 다른 투명도를 적용</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

서로 다른 표현방식이지만 모두 동일한 결과를 나타낼 수 있는 것을 확인할 수 있다.

CSS RGB 색상

3개의 R, G, B에 대한 각각의 코드값(0~255)으로 색상을 정의

이 각각의 R, G, B에 대한 코드값을 조절하여서 여러가지 색을 만들어낼 수 있음

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(20, 179, 113);">rgb(20, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 255);">rgb(238, 130, 255)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

추가적으로 위의 코드와 같이 R, G, B에 대한 각 코드값을 모두 동일한 값으로 설정하면 무채색 계열의 색이 된다.

RGBA값

RGBA값은 알파 매개변수를 이용해서 "RGB색상값 + 투명도"의 개념으로 확장한 것으로서

RGB코드와 함께 투명도에 대한 코드를 포함한다.

여기서 말하는 알파 매개변수는 0.0 ~ 1.0 사이의 수로서 0.0은 완전투명, 1.0은 완전불투명을 의미한다.

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

HEX(16진수) 색상값

16진수를 이용한 색상값은 "#RRGGBB"의 구조로서 각 R, G, B에 대한 색상값을 00~ff 사이의 두자리 16진수로 표현한 것이다.

표현방식이 다를뿐 전체적인 구조는 RGB방식과 크게 다르지 않다.

실제로 16진수 ff를 10진수로 변환해보면 그 결과는 RGB코드의 최대값인 255와 같다는 사실을 확인할 수 있다.

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#00ff00;">#00ff00</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

즉, #ff0000, #00ff00, #0000ff는 각각 Red, Green, Blue가 됨을 유추할 수 있을 것이다.

이를 확장해서 생각해보면 RGB코드 방식에서처럼

다음과 같이 16진수 색상값을 구성하는 각 RGB에 대한 2자리의 16진수 값이 서로 모두 같다면

해당값을 무채색 계열의 색상을 의미하게 된다.

CSS HSL 색상

HSL 색상은 색상을 색조(hue), 채도(saturation), 밝기(lightness)로서 표현한다.

색조는 0~360 사이의 색상환 각도를 말한다. 즉 0은 Red, 120은 Green, 240은 Blue를 의미한다.

(240을 넘어가면 보라색, 핑크색 순서로 넘어간다.)

채도는 백분율 값으로서 0%는 회색음영, 100% 풀컬러를 의미한다.

(즉, 채도값이 작을수록 무채색에 가까워지고 채도값이 커질수록 유채색에 가까워진다.)

밝기도 백분율 값으로서 0%는 검은색 100%는 흰색을 의미한다.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(120, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

채도는 색의 강도를 설명하는 개념으로서 100%는 순수한 색상이고 여기서 값이 작아질수록 회색음영이 더해져서 무채색에 가까워진다.

채도가 0%가 되면 완전히 회색이 되며 원 색상을 식별할 수 없게된다.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

밝기는 색상을 제공하는 빛의 양의 개념이다. 0%는 빛이 없음(검은색), 100%는 완전밝기(흰색)를 의미한다.

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

HSL 색상에서는 색조와 채도의 값을 모두 0으로 설정하고 여기서 밝기를 조절하여 여러가지 무채색계열의 색상을 얻는다.

HSLA 값

RGBA처럼 색상의 투명도를 지정하는 알파 매개변수를 사용하여 HSL의 값을 확장한 개념

HSL 인자순서에 알파 매개변수가 마지막에 위치한다.

RGBA에 적용되는 알파 매개변수와 동일한 개념이므로 알파 매개변수 값은

0.0(완전 투명)~1.0(완전 불투명) 사이의 수에 해당한다.

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

'Web Basic > CSS' 카테고리의 다른 글

Html Form에 CSS를 이용한 디자인 적용하기 (0)	2020.09.14
CSS Responsive (0)	2020.07.24
CSS 관련요약 - 2 (0)	2020.07.23

CSS 관련 요약 - 1

CSS

CSS Selector(선택기)

CSS Element Selector(요소 선택기)

CSS id Selector(id 선택기)

CSS Class Selector(클래스 선택기)

CSS Universal Selector(범용 선택기)

CSS Grouping Selector(그룹화 선택기)

CSS를 추가하는 방법

외부 CSS(External CSS)

내부 CSS(Internal CSS)

인라인 CSS(Inline CSS)

동일한 선택기에 대해 여러개의 스타일 시트가 존재하는 경우

계단식 순서

CSS Comments(주석)

CSS Colors(색상)

CSS 색상이름

CSS 텍스트 색상

CSS 테두리 색상

CSS 색상값

CSS RGB 색상

RGBA값

HEX(16진수) 색상값

CSS HSL 색상

HSLA 값

'Web Basic > CSS' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

CSS

CSS Selector(선택기)

CSS Element Selector(요소 선택기)

CSS id Selector(id 선택기)

CSS Class Selector(클래스 선택기)

CSS Universal Selector(범용 선택기)

CSS Grouping Selector(그룹화 선택기)

CSS를 추가하는 방법

외부 CSS(External CSS)

내부 CSS(Internal CSS)

인라인 CSS(Inline CSS)

동일한 선택기에 대해 여러개의 스타일 시트가 존재하는 경우

계단식 순서

CSS Comments(주석)

CSS Colors(색상)

CSS 색상이름

CSS 텍스트 색상

CSS 테두리 색상

CSS 색상값

CSS RGB 색상

RGBA값

HEX(16진수) 색상값

CSS HSL 색상

HSLA 값

'Web Basic > CSS' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

Html Form에 CSS를 이용한 디자인 적용하기

CSS Responsive

CSS 관련요약 - 2

티스토리툴바