CSS 개념 정리

vvon_joon·2023년 3월 1일
CSS프론트엔드
0

기본 문법

style 속성

<div style="...">
  ...
</div>
  • 태그에 CSS를 적용하려면 style 속성을 사용
  • 위와 같이 HTML의 태그에 직접 적용 가능하나, 주로 CSS 파일(.css) 별도로 만들어 적용

CSS 속성 및 CSS 속성값

  • CSS 속성: CSS 속성값 형태로 작성
<div style="color: #272928">
  ...
</div>
<!-- 속성이 여러 개 -->
<div style="color: #272928; background-color: #eeeeee">
  ...
</div>
  • 속성이 여러 개이면 세미콜론(;)으로 구분

규칙

선택자 {
  속성: 속성값;
  속성: 속성값;
}
  • CSS 속성을 각 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용할 것

선택자

태그 이름

/* h3 태그의 글자 크기를 24px로 설정 */
h3 {
  font-size: 24px;
}
  • h1 , div 등의 태그에 해당하는 모든 요소에 스타일을 적용

아이디(id)

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>
/* 아이디 이름이 hallasan인 태그에 글자색을 넣음 */
#hallasan {
  color: #f56513;
}
  • 맨 앞에 #을 붙여서 #아이디_이름과 같은 문법으로 사용
  • 아이디는 한 페이지 내에서 중복으로 쓸 수 없음

클래스(class)

<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>
/* 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 적용 */
.place {
  font-size: 16px;
  font-weight: 400;
}
  • 아이디는 중복해서 쓸 수 없지만, 클래스는 가능
  • 맨 앞에 .를 붙여 .클래스_이름 형태로 사용

기본 단위

색상

색상 코드

#FFFF00
  • 색상을 16진수로 표현한 값

RGB

rgb(255, 255, 0)
  • 빨강, 초록, 파랑 값을 10진수로 써서 색상을 나타냄
  • 0~255의 정수

RGBA

rgba(255, 255, 0, 0.5)
  • RGB에 알파 값을 추가
  • 0~1의 소수
  • 1에 가까울수록 불투명, 0에 가까울수록 투명

절대적 크기

픽셀(px)

  • 크기의 절대적인 단위
  • 화면을 표시하는 기준이 되는 크기

상대적 크기

퍼센트

<div id="parent">
  높이: 320px
  <div id="child">
    높이: 160px
  </div>
</div>
/* 부모 태그 height의 절반 값 */
#parent {
  height: 320px;
}

#child {
  height: 50%;
}
  • %를 이용
  • 부모 태그의 크기에 상대적으로 지정

em

  • 부모 태그의 font-size 크기
<div id="parent">
  크기: 16px
  <div id="child">
    크기: 64px
  </div>
</div>
#parent {
  font-size: 16px;
}
/* 16px * 4 = 64px */
#child {
  font-size: 4em;
}

rem

  • root em
  • <html> 태그의 font-size 크기
<html>
  <body>
        크기: 18px
        <div id="other">
          크기: 32px
        </div>
  </body>
</html>
html {
  font-size: 16px;
}

body {
  font-size: 18px;
}
/* 16px * 2 = 32px */
#other {
  font-size: 2rem;
}

속성

텍스트

글자색

  • color 속성
<span class="red">빨강</span>
<span class="orange">주황</span>
<span class="yellow">노랑</span>
.red {
  color: #F23030;
}

.orange {
  color: #F28705;
}

.yellow {
  color: #F2CB05;
}

글꼴

  • font-family 속성
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
  <p id="with-poppins">Poppins 있는 Noto Sans KR</p>
  <p id="without-poppins">Poppins 없는 Noto Sans KR</p>
</body>
</html>
/* 영문은 Poppins 글꼴 적용, 한글은 Noto Sans KR 적용 */
#with-poppins {
  font-family: Poppins, "Noto Sans KR", sans-serif;
}

#without-poppins {
  font-family: "Noto Sans KR", sans-serif;
}
  • 우선적으로 적용할 글꼴 이름부터 쉼표(,)로 이어 차례대로 작성
  • 웹 브라우저가 차례대로 확인하면서 적용 가능한 글꼴을 적용
  • 글꼴 이름에 공백이 있으면 따옴표(')로 감쌈

글짜 크기

font-size: 16px

글짜 굵기

  • font-weight 속성
<span class="bold">굵게</span>
<span class="regular">중간</span>
<span class="light">얇게</span>
.bold {
  font-weight: 600;
}

.regular {
  font-weight: 400; 
}

.light {
  font-weight: 200;
}
  • 100 ~ 900에서 100 단위로 올라감
  • 중간값은 400

줄 높이

  • line-height 속성
<p class="loose">
  넓게<br>
  넓게<br>
  넓게
</p>
<p class="regular">
  보통<br>
  보통<br>
  보통
</p>
<p class="tight">
  좁게<br>
  좁게<br>
  좁게
</p>
.loose {
  font-size: 16px;
  line-height: 1.7; /* 16px * 1.7 = 27.2px */
}

.regular {
  font-size: 16px;
  line-height: 1.5; /* 16px * 1.5 = 24px */
}

.tight {
  font-size: 16px;
  line-height: 1; /* 16px * 1 = 16px */
}
  • 줄과 줄 사이의 간격을 조절
  • 단위 없이, 글자 크기에 상대적인 값

텍스트 꾸미기

  • text-decoration 속성
<a href="https://codeit.kr">
  링크
</a>
<br>
<a class="none" href="https://codeit.kr">
  밑줄 없는 링크
</a>
<br>
<span class="underline">
  밑줄
</span>
<br>
<span class="line-through">
  취소선
</span>
.none {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}
  • none : <a> 태그에 기본으로 있는 밑줄을 제거
  • underline : 밑줄
  • line-through : 취소선

배경

배경색

  • background-color 속성
background-color: #272928

배경 이미지

  • background-image 속성
background-image: url('a.png')
  • url(...)을 이용해 배경 이미지를 넣음
background-image: /* 위에서부터 a, b, c가 깔림 */
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');
  • 배경 이미지 여러 개를 넣을 수 있음

배경 위치

  • background-position 속성
background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 */
background-position: center;
  • 기본값은 left top

배경의 반복

  • background-repeat 속성
background-repeat: repeat; /* 반복하기 */
background-repeat: no-repeat; /* 반복 안 함 */
  • 기본값은 repeat

배경 크기

  • background-size 속성
background-size: 40px 30px; /* 가로 40px 세로 30px */
background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
  • 직접 가로 및 세로 크기 지정 가능
  • cover : 비율을 유지하면서 영역에 꽉 차게
  • contain : 영역 안에서 최대한 크게

그라디언트

  • linear-gradient()
background-image: linear-gradient(#000000, #ffffff);
  • 기본적으로 시작 색상, 종료 색상을 사용
background-image:
  linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  • 방향 기본값은 180도(위에서 아래)
  • 방향을 바꾸려면 맨 앞에 각도 넣기, 단위는 deg

그림자

  • box-shadow 속성
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/
  • 가로, 세로, 흐린 정도(blur), 퍼지는 정도(spread), 색상 순서

불투명도

  • opacity 속성
opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */
  • 요소 전체의 불투명도를 조절
  • 0 ~ 1의 소수 값, 단위 없음

너비

width: 560px

높이

height: 380px

Padding

  • 안쪽 여백
/* 상하좌우 8px */
padding: 8px
/* 상하 16px, 좌우 8px */
padding: 16px 8px
/* 상 16px, 좌우 8px, 하 24px */
padding: 16px 8px 24px
/* 상 16px, 우 8px, 좌 24px, 하 10px */
padding: 16px 8px 24px 10px
  • 숫자 순서는 0시부터 시계 방향

Margin

  • 바깥쪽 여백
/* 상하좌우 8px */
margin: 8px
/* 상하 16px, 좌우 8px */
margin: 16px 8px
/* 상하 16px, 좌우 자동 */
width: 520px
margin: 16px auto
  • auto는 자동으로 채워주고, margin의 좌우에서만 동작
  • 요소의 width 속성이 정해져있을 때만 auto 사용 가능
/* 상 16px, 좌우 8px, 하 24px */
margin: 16px 8px 24px
/* 상 16px, 우 8px, 하 24px, 좌 10px */
margin: 16px 8px 24px 10px
  • 마찬가지로 순서는 시계 방향

박스 모델(Box Model)

Box Model

  • HTML/CSS에서 요소는 기본적으로 박스 형태
  • Content, Padding, Border, Margin으로 구성
  • 요소의 크기는 content를 포함해 border까지

border 속성

/* 굵기, 테두리 종류, 색상 */
border: 2px solid #ededed;

border-radius 속성

  • 박스 모델의 모서리를 둥글게 만들 때 사용
  • border 속성 없이도 사용 가능
/* 16px만큼 둥글게 */
border-radius: 16px
/* 타원 형태 */
border-radius: 16px
/* 알약 형태 */
border-radius: 9999px

box-sizing 속성

#box {
  margin: 20px;
  padding: 30px;
  width: 100px;	/* content 영역의 너비 */
}
  • #box 요소의 너비 = 100 + 30 + 30 = 160(px)
#box {
  margin: 20px;
  padding: 30px;
  width: 100px;	/* content 영역의 너비: 40 */
  box-sizing: border-box;
}
  • 직관적으로 크기를 지정
  • box-sizing 속성을 border-box로 지정하면 #box 요소의 너비 = 100(px)
  • 기본값: content-box

overflow 속성

  • 박스의 크기를 지정했을 때 안에 있는 내용이 삐져나오는 현상
  • overflow 속성을 통해 이를 방지
/* 넘치는 것 감추기 */
overflow: hidden;
/* 넘치면 스크롤 */
overflow: auto;
/* 넘치든말든 스크롤 */
overflow: scroll;

Margin 상쇄(Margin Collapsing)

  • 일반적으로 서로 이웃한 태그의 세로 margin은 겹쳐서 나타남
  • 부모-자식 관계 태그에서도 margin을 겹쳐서 적용
    - 다만, 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 margin을 겹치지 않음
<div id="a">a</div>
<div id="b">b</div>
#a {
  margin: 30px;
}
#b {
  margin: 20px;
}
  • #b의 margin이 #a의 margin에 완전히 겹쳐 둘 사이의 margin은 30px
<div id="a">
  a
</div>
<div id="b">
  <div id="c">
    c
  </div>
  b
</div>
#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}
  • #b의 margin이 #c에 완젼히 겹쳐 둘 사이의 margin은 40px
  • #a의 margin이 #b에 완전히 겹쳐 둘 사이의 margin은 40px

Display

  • 웹 페이지의 레이아웃을 결정하는 CSS의 속성

블록(Block)

  • block : 위에서 아래로 차례대로 배치되는 display 속성
  • 크기를 지정 가능
  • <h1> , <h2> , ... , <h6> , <p> , <div>

인라인(Inline)

  • inline : 글을 쓰는 방향으로 줄이 바뀌는 display 속성
  • 크기를 지정할 수 없음
    - 다만 이미지와 같이 외부 데이터를 보여주는 태그는 인라인이지만, 크기를 지정 가능
  • <a> , <br> , <img> , <span>

인라인 블록(Inline-block)

  • inline-block : 인라인처럼 배치되지만 블록처럼 크기를 갖는 display 속성

float 속성

  • float : 요소를 페이지의 왼쪽 혹은 오른쪽에 삽화처럼 배치하고, 그 주변에 인라인 요소를 배치할 수 있는 display 속성
블록인라인 블록인라인
기본 크기좌우로 꽉 참content에 딱 맞게content에 딱 맞게
배치위에서 아래로글 쓰는 방향글 쓰는 방향
width & height있음있음없음
margin & padding있음있음인라인 진행 방향(가로)만 사용 가능
profile
vvon_joon
김찬호 화이팅
이전 포스트

HTML 개념 정리

다음 포스트

2023 하계 모각코 계획

0개의 댓글