Publishing/CSS3

css의 기초 - css 배우기

oodada 2023. 11. 29. 10:10

CSS 기초

CSS란?

Cascading Style Sheets (CSS)는 HTML이나 XML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.

CSS는 HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

CSS의 장점

  • HTML의 내용과 스타일을 분리할 수 있다.
  • 스타일을 변경할 때 HTML을 수정할 필요가 없다.
  • 웹 페이지의 로딩 속도를 향상시킬 수 있다.
  • 스타일을 적용하는 방법이 다양하다.

CSS의 구문

https://www.w3schools.com/css/css_selectors.asp

선택자 {
    속성: 값;
}
  • 선택자(selector): HTML 요소를 선택한다.
  • 속성(property): 스타일을 지정한다.
  • 값(value): 속성의 스타일을 지정한다.

CSS 적용 방법

https://www.w3schools.com/css/css_howto.asp

인라인(inline) 방식

<p style="color: red;">Hello, world!</p>
  • HTML 요소의 style 속성에 CSS를 적용한다.
  • 스타일이 적용된 HTML 요소에만 적용된다.
  • 우선순위가 가장 높다.

내부 참조(embedded) 방식

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
  • <style> 태그를 사용하여 CSS를 적용한다.
  • <style> 태그는 <head> 태그 내부에 위치한다.
  • 스타일이 적용된 HTML 문서 전체에 적용된다.
  • 인라인 방식보다 우선순위가 낮다.

외부 참조(external) 방식

<head>
    <link rel="stylesheet" href="style.css" />
</head>
  • <link> 태그를 사용하여 CSS를 적용한다.
  • <link> 태그는 <head> 태그 내부에 위치한다.
  • 스타일이 적용된 HTML 문서 전체에 적용된다.
  • 인라인 방식보다 우선순위가 낮다.

선택자

선택자는 CSS 규칙이 적용될 HTML 요소를 선택한다.

https://www.w3schools.com/css/css_selectors.asp

전체 선택자

  • 모든 HTML 요소를 선택한다.
* {
    color: red;
}

태그 선택자

  • 특정 태그를 선택한다.
p {
    color: red;
}

클래스 선택자

  • 특정 클래스를 선택한다.
.red {
    color: red;
}
<p class="red">Hello, world!</p>

태그 + 클래스 선택자

  • 특정 태그의 특정 클래스를 선택한다.
  • 이 방식을 사용하면 태그 이름 변경 시 CSS도 함께 변경해야 하기 때문에 권장하지 않는다.
p.red {
    color: red;
}
<p class="red">Hello, world!</p>

아이디 선택자

  • 특정 아이디를 선택한다.
#red {
    color: red;
}
<p id="red">Hello, world!</p>

복합 선택자

  • 여러 선택자를 조합하여 선택한다.
.red.border {
    color: red;
    border: 1px solid black;
}
<p class="red border">Hello, world!</p>

CSS Combinators (조합자)

https://www.w3schools.com/css/css_combinators.asp

자손 선택자

  • 특정 요소의 자손 요소를 선택한다.
ul li {
    color: red;
}
<ul>
    <li>Hello</li>
    <li>winter</li>
    <li>fall</li>
</ul>

<p>Hello, world!</p>

자식 선택자

  • 특정 요소의 자식 요소를 선택한다.
  • 작업 시 자식이 자손으로 변경될 수 있으므로 자손 선택자를 사용하는 것이 좋다.
ul > li {
    color: red;
}
<ul>
    <li>Hello</li>
    <li>winter</li>
    <li>fall</li>
</ul>

<p>Hello, world!</p>

인접 형제 선택자

  • 특정 요소의 인접 형제 요소를 선택한다.
ul + p {
    color: red;
}
<ul>
    <li>Hello</li>
    <li>winter</li>
    <li>fall</li>
</ul>

<p>Hello, world!</p>

일반 형제 선택자

  • 특정 요소의 일반 형제 요소를 선택한다.
ul ~ p {
    color: red;
}
<ul>
    <li>Hello</li>
    <li>winter</li>
    <li>fall</li>
</ul>

<p>Hello, world!</p>

CSS Attribute Selectors (속성 선택자)

https://www.w3schools.com/css/css_attribute_selectors.asp

[type='text'] {
    color: red;
}
<input type="text" />

CSS Pseudo-classes (가상 클래스 선택자)

https://www.w3schools.com/css/css_pseudo_classes.asp

  • 특정 상태의 요소를 선택한다.
a:hover {
    color: red;
}
<a href="#">Hello, world!</a>

CSS Pseudo-elements (가상 요소 선택자)

https://www.w3schools.com/css/css_pseudo_elements.asp

  • 특정 요소의 특정 부분을 선택한다.
p:first-child {
    color: red;
}
p:nth-child(2) {
    color: red;
}
p:last-child {
    color: red;
}
<p>Hello</p>
<p>winter</p>
<p>fall</p>

css 우선 순위 규칙

https://www.w3schools.com/css/css_specificity.asp

  • css 우선 순위란 css가 적용될 때 어떤 css가 우선적으로 적용되는지를 결정하는 규칙이다.
  1. !important (10000점)
  2. 인라인 스타일 (1000점)
  3. 아이디 선택자 (100점)
  4. 클래스 선택자 (10점)
  5. 태그 선택자 (1점)
  6. 전체 선택자 (0점)
p {
    color: red !important;
}
.red {
    color: red;
}
#red {
    color: red;
}
<p class="red" id="red">Hello, world!</p>

속성

속성은 HTML 요소의 스타일을 지정한다.

layout 관련 속성

display: block;
display: inline;
display: inline-block;
display: none;

display: flex;

display: grid;

float: left;
float: right;
float: none;

박스

width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid black;
border-radius: 10px;

글꼴

font-family: 'Times New Roman', Times, serif;
font-size: 16px;
font-weight: bold;

텍스트

color: red;
text-align: center;
text-decoration: underline;
text-transform: uppercase;

배경

background-color: red;
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center;

기타

opacity: 0.5;
cursor: pointer;

box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
box-sizing: border-box;

단위

상대 단위

  • em: 상위 요소의 배수로 지정한다.
  • rem: 최상위 요소의 배수로 지정한다.
  • %: 상위 요소의 백분율로 지정한다.

절대 단위

  • px: 픽셀로 지정한다.

색상

키워드

  • red: 빨간색
  • blue: 파란색
  • green: 초록색

RGB

  • rgb(255, 0, 0): 빨간색
  • rgb(0, 0, 255): 파란색
  • rgb(0, 255, 0): 초록색

RGBA

  • rgba(255, 0, 0, 0.5): 빨간색, 투명도 50%
  • rgba(0, 0, 255, 0.5): 파란색, 투명도 50%
  • rgba(0, 255, 0, 0.5): 초록색, 투명도 50%

HEX

  • #ff0000: 빨간색
  • #0000ff: 파란색
  • #00ff00: 초록색
저작자표시 비영리 동일조건

'Publishing > CSS3' 카테고리의 다른 글

font, text 관련 속성 - css 배우기  (0) 2023.12.03
layout 관련 속성 - css 배우기  (0) 2023.12.01
네이밍 가이드(Naming Guide) - css 배우기  (0) 2023.11.26
dd  (0) 2020.10.20
웹폰트 만들기  (0) 2020.10.08

'Publishing/CSS3'의 다른글

  • 현재글css의 기초 - css 배우기

관련글

티스토리 친구하기

티스토리툴바