전체 글

CSS 강의 2024.08.23

CSS 강의

2024. 8. 23. 17:11

Overview

CSS는 Cascading Style Sheets를 의미한다

. Cascading : 계단식

. Style : 멋을 내다

. Sheets : 종이 한 장

=> 계단식으로 스타일을 정의하는 문서

웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)

CSS 기본 문법

선택자 {
  속성명: 속성값;
}

선택자: 어떤 요소에 스타일 을 적용할지에 대한 정보
{중괄호}: 선택한 요 소에 적 용할 스 타 일 을 정의하는 영역
속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상, 크기 등)
속성값 : 어떻게 정의하고 싶은지에 대한 정보

p {
  color: red;
}

선택자 : p 태 그에 스타일을 적용하겠다.
{중괄호} : 이 안에, p 태그에 대한 스타일을 정의하겠다.
속성명 color를 정의하겠다. 이건 글자색을 의미한다.
속성값 : red로 정의하겠다. 빨간색 글자를 원한다.

선택자

선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 먼저 CSS에서 스타일이 어떤 방식으로 정의 되는지 알아봅시다.

선택자의 종류는 아래와 같습니다.

전체 선택자

* {
  color:red;
}

태그 선택자

body {
    /*body css code*/
    background-color:green;
}

header {
    /*header css code*/
    background-color:black;
    color:white;
}

클래스 선택자

<p class="name">
  dev2820
</p>

.name {
    /*name class css*/
    color:green;
}

아이디 선택자

<h1 id="title">
  제목
</h1>

#title {
    /*title id css*/
    color:red;
}

속성 선택자

<a href="http://www.google.com">google</a>
<input type="password">

a[href="https://www.google.com"] {
    /*href 속성값이 http://www.google.com 인 a 태그*/
    text-decoration:none;
    color: green;
}
input[type="password"] {
    /*input*/
    border-radius:4px;
}
a[href] {
    /*href 속성을 지닌 모든 a 태그*/
}
a[href*="https://"] {
    /*href 속성값이 https://로 시작하는 a 태그*/
}
img[src$=".png"] {
    /*src 속성값이 .png로 끝나는 img 태그*/
}
[class *= "it"]{
   /* 클래스 값에 'it'가 포함되는 요소를 선택하기 */
} 

[class ^= "it"]{ 
   /* 클래스 값에 'it'로 시작하는 요소를 선택하기 */
 } 

[class $= "it"]{ 
   /* 클래스 값에 'it'로 끝나는 요소를 선택하기 */
}

의사 클래스(Pseudo class) 선택자

<a href="google.com">google</a>
<a href="https://google.com">google</a>
<div>hover me</div>
<input value="focus"></input>
<button>active</button>

a:link {
    /*방문하지 않은 a 태그*/
    color:red;
}
a:visited {
    /*방문한 a 태그*/
    color:blue;
}
div:hover {
    /*커서가 올라가 있는 div 요소*/
    color:gold;
}
input:focus {
    /*포커싱 되어있는 input 태그*/
  /*tab 또는 click으로 input에 focus를 주면 확인할 수 있습니다.*/
    background-color:green;
}
button:active {
    /*활성화한 button 태그*/
    background-color:red;
}

구조 선택자

<html>
  위는 안채워진 p태그, 아래는 채워진 p태그
  <p></p>
  <p>abcde</p>
</html>

:root {
  background-color:green;
  
}
p {
  border:2px solid black;
}
p:empty {
  border:2px solid blue;
}

부정 선택자

<h1 class="title">a</h1>
<h1>b</h1>

h1:not(.title) {
  color:red;
}

그룹 선택자

hl, p, div{ color: blue; }

자식 결합자

<ul class="list">
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <ul>
      <li class="d">d</li>
    </ul>
</ul>

ul.list > li {
     /*ul 태그 자식 요소인 모든 li를 선택*/
    color:green;
}

형제 결합자

hl ~ p{ /* h1 요소의 뒤에 오는 형제 중 모든 p요소를 선택하기 */ } 
hl + p{ /* h1 요소의 벓 뒤에 오는 형제 p요소를 선택하기 */ }

복합 선택자

div#title.box.big {

}

위 css는 <div id="title" class="box big">를 가리킵니다. 이렇게 tag, id, class선택자는 여러개를 함께 사용할 수 있습니다.

선택자 우선 순위(*암기)

!important 선언 > 인라인 CSS > ID 선택자 > class 선택자 = 의사 클래스 > tag 선택자 = 가상 요소 > 브라우저 기본 CSS(default css)

참고 : https://velog.io/@dev2820/CSS-CSS-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%95%EB%A6%AC

React에서 CSS 적용

Inline style 사용

/* App.js */
import "./App.css";

function App() {
  return (
    <div>
      <p style={{ backgroundColor: "red", marginTop: "10px" }}>
        글자를 파랗게 만들어줘
      </p>
    </div>
  );
}

export default App;

※ 주의: 속성 키명은 react가 js 라이브러리여서 - 를 쓰면 -(빼기) 연산자로 받아들이므로 camelCase를 이용한다.

CSS 파일을 통한 stylesheet 사용

/* App.css */
p {
  background-color: red !important;
  margin-top: 10px;
}

/* App.js */
import "./App.css";

function App() {
    return (
        <div>
            <p> 글자를 파랗게 만들어줘 </p>
        </div>
    );
}

export default App;

style 변수 사용

/* App.js */

function App() {
  const style = {
    marginTop: "10px",
    backgroundColor: "red",
  };

  return (
    <div>
      <p style={style}>글자를 파랗게 만들어줘</p>
    </div>
  );
}

export default App;

텍스트 꾸미기 속성

font-family: 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순 위 를 지정할 수 있다.

* { 
  font-family: Times, monospace, serif;
}

font-size: 글자 크기, 아래는 단위

px: 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기

rem: <html> 태그의 font-size에 대응하는 상대적인 크기

em: 부모태그(상위태그)의 font-size에 대응하는 상태적인 크기

span{ font-size: 16px; } 
span{ font-size: 2rem; } 
span{ font-size: 1.5em; }

See the Pen font-size by Peace Kwak (@Peace-Kwak) on CodePen.

text-align : 글자의 정렬을 정의한다.

left / right : 왼쪽 또는 오른쪽 정렬한다.

center : 가운데 정렬한다.

justify : 양끝 정렬한다.

p { text-align: right; }

color: 색 정의

span{ color: red; } 
span{ color: #FF0000; } 
span{ color: rgb(100%, 0%, 0%); }

block, inline

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.(*암기)

ex) div, p, h1

인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.

ex) span, a

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

div{ display: inline; }
a{ display: block; }

display 속성 값

inline : 인라인으로 처리한다.

block: 블록 레벨로 처리한다.

inline-block 인라인으로 배치라되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다. width, height를 설정할 수 있음

none : 디스플레이하지 않는다.

border

span{ border: 2px solid green; }

border-color: color 정의 방식과 동일

border-width: thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위

border-style: none, solid, dotted, dashed 등

See the Pen text-align:border by Peace Kwak (@Peace-Kwak) on CodePen.

Box Model

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리, 모양 등)을 결정할 수있다.

하나의 박스는 네 개의 영역으로 구성된다.

contents, padding, border, margin 영역을 살펴보면 아래와 같다.

See the Pen contents, padding, border, margin by Peace Kwak (@Peace-Kwak) on CodePen.

상하좌우 여백을 개별 정의 할 수 있다.

div{
  width: 100px; height: 100px; 
  padding: 10px; 
  border: 5px solid red; 
  margin: 20px; 
  padding-top: 10px; 
  padding-right: 20px; 
  padding-bottom: 30px; 
  padding-left: 40px;
  margin-top: 40px; 
  margin-right: 30px; 
  margin-bottom: 20px; 
  margin-left: 10px;
}

span{ 
  display: inline-block; 
  width: 100px; height: 100px; 
  margin: 10px 20px 30px 40px;
}

box-sizing: 박스의 크기 기준 정의

content-box: 기본값, 너비와 높이가 콘텐츠 영역만 포함한다.

border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.

See the Pen Untitled by Peace Kwak (@Peace-Kwak) on CodePen.

backgroud

background-color: 배경 색을 정의한다.

background-image: 배경 이미지를 정의한다.

background-position: 벼경 이미지의 초기 위치를 정의한다.

background-size: 배경 이미지의 크기 정의한다. cover: 찌그러지지 않고 잘려서 최대 사이즈, contain : 찌그러지지 않으며 잘리지 않는 최대 사이즈

background-repeat: 배경 이미지의 반복을 정의한다.

See the Pen backgroud by Peace Kwak (@Peace-Kwak) on CodePen.

div{ 
  box-sizing: border-box; 
  width: 500px; height:500px;
  border: 1px solid red; 
  background-image: url(./my-cat.jpeg)
  background-repeat: no-repeat; 
  background-position: left top;
  background-size: 300px 300px
}

float

none: 기본값, 원래 상태

left: 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함

right: 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함

See the Pen float by Peace Kwak (@Peace-Kwak) on CodePen.

clear

clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.

none: 기본값, 아래로 이동되지 않음을 나타내는 키워드

left: float이 left인 요소의 아래로 내려가겠다.

right: float이 right인 요소의 아래로 내려가겠다.

both: float이 left 및 right인 요소의 아래로 내려가겠다.

See the Pen clear by Peace Kwak (@Peace-Kwak) on CodePen.

position

position은 문서 상에 요소를 배치하는 방법을 정의한다.

position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식

position 속성 5가지

static : 기본값, 요소를 일반적인 문서 흐름에 다라 배치한다.

relative: 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다.

absolute: 일반적인 문서 흐름에서 제거하고, 가장 가까운 postion 지정 요소에 대해 상대적으로 오프셋을 적용한다.

fixed: 일반적인 문서 흐름에서 제거하고 지정한 위치에 고정된다.

sticky: 일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋을 적용한다.

position:relative

See the Pen position by Peace Kwak (@Peace-Kwak) on CodePen.

position:absolute

See the Pen position:absolute by Peace Kwak (@Peace-Kwak) on CodePen.

flexbox

floexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.

floxbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만 다룬다는 특성 때문이다.

행방향(세로)가 주축이다.

See the Pen flexbox by Peace Kwak (@Peace-Kwak) on CodePen.

flex-direction

flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

row: 기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일

row-reverse: 주축은 행이고 방향은 콘텐츠의 방향과 반대

column: 주축은 열이고 방향은 콘텐츠의 방향과 동일

column-reverse: 주축은 열이고 방향은 콘텐츠의 방향과 반대

flexbox 연계

justify-content : 주죽 배치 방법

align-items: 교차축 배치 방법

align-self: 교차축 개별요소 배치 방법

flex-wrap: 줄 바꿈 여부

See the Pen justify-content by Peace Kwak (@Peace-Kwak) on CodePen.

inherit, initial, unset

상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.

상속 된다 : color, font-family, font-size, font-weight, text-align, cursor 등 (*암기)

상속 안 된다 : background-color, background-image, background-repeat, border, display 등 (*암기)

참고 : https://www.w3.org/TR/CSS21/propidx.html

inherit: 상위 요소로부터 해당 속성의 값을 받아 사용한다.

initial: 해당 속성의 브라우저 기본값을 요소에 적용한다.

unset: 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용된다.

inherit 사용 예제

See the Pen inherit by Peace Kwak (@Peace-Kwak) on CodePen.

initial, unset 사용 예제

See the Pen initial by Peace Kwak (@Peace-Kwak) on CodePen.

z-index

요소의 쌓임 순서를 정의할 수있다. 정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다. => 위치 지정 요소란, postion 속성이 정의되어 있는 요소를 말한다.

See the Pen z-index by Peace Kwak (@Peace-Kwak) on CodePen.

word-break

CSS 속성 은 텍스트가 콘텐츠 상자를 넘어갈 때마다 줄 바꿈을 표시할지 여부를 설정합니다.

단어를 기준으로 개행되지 않고 단어가 잘리도록 개행되면 문제가 됩니다.

word-break로 이를 해결할 수 있습니다.

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

HTMLCSSResult

	div { width : 400px; border : 1px solid black; }
	div { width : 400px; border : 1px solid black; word-break: keep-all; }

https://codepen.io/Peace-Kwak/pen/NWZzdYz

저작자표시

PREV 1 2 3 4 ···51 NEXT

CamelAct