본문 바로가기
학원에서 배운 것/CSS

KDT 5th 웹개발자 입문 수업 4일차

by 쿠리의일상 2023. 1. 31.

✚ 복습 추가

가상 요소 선택자인 ::before/::after 등은 주로 HTML에 가상의 content를 넣어줘서 디자인 요소를 넣어줘서 사용하므로 content="" 속성이 따로 없다면 다른 스타일들을 적용하더라도 적용되지 않는다. 그러므로 가상 요소 선택자는 꼭 content를 넣어주고 사용하자.

 

CSS 속성

1. 박스 모델

웹페이지에 나타낼 수 있는 것은 글자와 상자로 나눌 수 있다.

즉, 요소가 화면에 출력되는 특성은 크게 인라인 요소/블록 요소로 나뉜다.

 

✔️ 인라인 요소 : 글자를 만들기 위한 요소들
✔️ 블록 요소 : 상자(레이아웃)을 만들기 위한 요소들

 

 

* width/height의 기본값은 요소에 이미 들어있는 속성의 값임

 

<span>span 요소</span>
  <div>div 요소</div>
  <span>span 요소</span>
  <span>span 요소</span>
  <div>div 요소</div>
  <div>div 요소</div>
  <span>span 요소</span>
  <span>span 요소</span>
  <span>span 요소</span>
  <div>div 요소</div>
  <div>div 요소</div>
  <div>div 요소</div>
  <br />
  HTML 컨텐츠 사이에 들어있는 <span>span 요소</span> 입니다! <br /><br /> <div>div 요소 안에 들어있는 <span>span 요소</span> 입니다!</div>
  <br />
  <span>span 요소 안에 들어있는 <div>div 요소</div> 입니다!</span>

1-1. 인라인 요소

<span> 본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정하는 용도, 요소가 수평으로 쌓임

포함한 컨텐츠(글자) 크기만큼 자동으로 width, height가 정해지므로 임의로 width와 height를 변경하려고 하면 반응하지 않는다.

 

margin은 위아래X/왼쪽오른쪽O만 적용

padding은 왼쪽오른쪽 적용되지만, padding의 위아래의 경우 배경 요소만 적용된다.

<div> 같은 블록 요소를 자식으로 둘 수 없고 같은 인라인 요소만 자식으로 둘 수 있음.

 

1-2. 블록 요소

<div> 본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정하는 용도지만 요소가 수직으로 쌓임

width의 경우 <body> 등의 부모 요소에서 상속되고 height의 경우 컨텐츠의 길이만큼 적용된다.

그래서 블록 요소는 width/height를 변경해줄 수 있으며, margin/padding 또한 적용된다.

다만 margin의 경우 위아래의 마진은 위아래 요소에 따라 겹칠 수도 있음...;

인라인 요소 뿐만 아니라 블록 요소 또한 자식으로 둘 수 있다.

 

inline width/height 불변 margin 위아래X, 왼쪽오른쪽O padding 위아래O, 왼쪽오른쪽O
block width/height 변경 가능 margin 위아래 겹침 현상, 왼쪽오른쪽O padding 위아래 배경만, 왼쪽오른쪽O

 

1-3. 인라인 블록 요소

블록 요소가 수직으로 쌓이는 문제를 해결하고자 나왔으며 디자인이 중요시 되면서 가로로 나열하고자 하는 경우가 많지만

span 태그는 인라인이라서 해당 구역을 꾸미기 어렵다.

그래서 인라인과 블록 요소의 특징을 합쳐서 만든 개념이 인라인 블록 요소인 것

 

*** 인라인 요소(<span>)에 display : inline-block; 으로 지정해주고 width와 height로 크기를 지정해서 사용

이는 디자인 요소가 필요하면서, 수평으로 쌓여야 하는 경우 사용해준다.

 

  inline block inline-block
기본 넓이 컨텐츠 만큼 부모의 넓이 컨텐츠 만큼
width, height 무시 적용 적용
가로 공간 차지(수평에 쌓이는가) 공유 독점 공유
margin 가로만 가로 세로 전부
다만 세로는 상쇄됨		 가로 세로 전부
padding 가로만
세로는 배경색만		 가로 세로 전부 가로 세로 전부

인라인 블록은 margin과 padding에 있어서 원래 가지고 있는 블록과 인라인 요소의 단점을 해결함

 

1-4. 속성 크기 단위

px 픽셀

% 상대적 백분율

em 요소의 글꼴 크기

rem 루트 요소(html)의 글꼴 크기

vw 뷰포트 가로 너비의 백분율

vh 뷰포트 세로 너비 백분율

 

calc() : 사용자가 원하는 크기 값을 계산하여 적용 ex. calc(1920px - 2vw);

숫자와 덧셈/뺄셈 연산자 사이에는 공백이 필요 (곱셈과 나눗셈은 필요없다지만 가급적 공백을 넣어주자)

 

1-5. line-height 

영역 요소 내부 컨텐츠 글자의 줄 높이

박스 모델이나 폰트의 크기 단위 적용 가능

 

세로 중앙 정렬을 위해 자주 사용됨 -> 컨텐츠가 1줄인 경우 컨테이너box의 height와 line height를 동일하게 해주기

다만 이 경우는 컨텐츠의 줄이 여러줄인 경우엔 원하지 않는 레이아웃이 될 수 있어서 켄텐츠가 한줄로 짧고 간단한 경우에 사용 

height : 200px; 과 line-height: 200px; 로 컨텐츠 내용을 세로 중앙 정렬 해주기

 

1-6. max-width/max-height & min-width/min-height

max-width/max-height : 요소가 커질 수 있는 최대 가로/세로 너비
min-width/min-height : 요소가 작아질 수 있는 최소 가로/세로 너비

최대/최소 너비 제한이 없는 게 기본값이지만 해당 속성을 지정해주면 브라우저가 너비를 계산

 

1-7. margin

요소의 외부 여백(공간)을 지정하는 단축 속성

0의 경우 외부 여백 없음, 음수도 사용이 가능

margin : auto; 는 가로세로 너비가 있는 요소(블록요소)의 가운데 정렬에 활용 가능

속기로는 margin -> top right bottom left 순서

 

 

✚ 단축 스니펫 Emmet 활용 https://velog.io/@goblin820/Emmet

 

HTML+CSS | 빠른 마크업을 위한 도구 에밋(Emmet)

에밋으로 생산성을 힘껏 높혀보도록 하겠습니다!

velog.io

태그명.클래스명{컨텐츠에 담아줄 문구}*개수 로 빠르게 클래스가 있는 태그를 만들어 줄 수 있다.

태그명#아이디명{컨텐츠에 담아줄 문구}*개수 동일하게 아이디가 있는 태그 생성

 

div>ul>li.item{$}*3+p 를 입력해주면,

  <div>
    <ul>
      <li class="item">item 1</li>
      <li class="item">item 2</li>
      <li class="item">item 3</li>
      <p></p>
    </ul>
  </div>

자식연산자(>) 와 인접 형제 연산자(+), 복수구성(*),

클래스(.), 아이디(#), 속성([ ]), 내용({ }), 순번($), 순번부여 시작숫자(@) 를 조합해서 작성

 

레이아웃 margin(m), padding(p), border(b), z-index(z), 폰트사이즈(fsz), 크기(em) ... 등의 스타일을 [ ] 안에 넣어줘서 속성을 지정해줄 수 있다. 참고 : https://docs.emmet.io/cheat-sheet/

 

Cheat Sheet

Download cheat sheet as printable PDF A5

docs.emmet.io

 

1-8. padding

요소의 내부 여백(공간)을 지정하는 단축 속성

padding : 0; 은 내부 여백이 없는 것이고, %를 사용해주면 부모 요소의 가로 너비에 대한 비율로 지정된다.

* padding을 늘리면 요소의 크기가 커진다.

1-9. margin의 수직 축소

각 block 컨텐츠 사이의 위아래에 margin이 서로 겹친다면, 이 값이 합산이 되는 것이 아니라

큰 쪽의 margin 값만 적용된다.

 

1-10. padding의 수직 공간의 특수 경우

인라인 컨텐츠에 padding을 위아래로 줬을 땐, 세로 공간에 배경색만 적용된다.

1-9와 1-10을 해결하기 위해선 display:inline-block;을 사용한다.

1-11. border

border: 선두께 선종류 선색상;

- border-width(선두께) : 정확한 단위로 지정

- border-style(선종류)

      none

      solid 실선

      dashed 파선

      dotted 점선

- boder-color(선색상)

      색상값이나 trasparent 투명 설정

 

- border-방향-[width/style/color] 형식도 가능 ex) border-top-width:10px;

 

1-12. border-radius

요소의 모서리를 둥글게 깎는 속성

border-radius : 0; 모서리 둥글게 없음

border-radius 의 순서는 topleft -> topright -> bottomright -> bottomleft 순서로 속기 사용이 가능

요소의 width의 50%를 지정해주면 사각형이 원이 된다.

width:100px; 일 때 border-radius:50px; 혹은 border-radius:50%;

 

1-13. box-sizing

요소의 크기 계산 기준을 지정

 

- content-box : 요소의 내용으로 크기 계산 (기본값, 거의 사용하지 않음)

- border-box : 요소의 내용 + padding + border 크기로 계산 -> 계산이 용이해짐

 

 

1-14. overflow

요소의 크기 이상으로 내용이 넘칠 때 보여지는 내용을 제어하는 속성

 

- visible : 넘친 내용을 그대로 보여줌

- hidden : 넘친 내용을 잘라냄

- scroll : 넘친 내용을 잘라내고, 잘리지 않아도 스크롤바가 무조건 생성 

- auto : 넘친 내용이 있는 경우만 잘라내고 스크롤바 생성

 

- overflow-x

- overflow-y 로 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 x, y축으로 제어해줄 수 있음

 

1-15. display

- block

- inline

- inline-block

 

- none : 화면에서 사라지게 할 때, HTML 요소가 사라진 것은 아님. css속성만 변경되어 공간(자리)이 사라짐

- flex

- grid

- table

 

1-16. opacity

- 1 : 불투명

- 0 : 투명

- 0 ~ 1 사이의 값으로 투명도 지정 가능

 

 

1-17. 요소를 숨기는 3가지 방법

1. opacity : 0 -> 모습만 숨겨서 속성은 남고 공간(자리)은 차지함

2. visibility : hidden -> 모습과 속성을 숨기고 공간은 차지

3. display : none -> 모습과 속성을 숨기고 공간도 사라짐

  <style>
    div {
      display: inline-block;
      width: 200px;
      height: 200px;
      cursor: pointer;
    }
    div.opacity {
      background-color: aqua;
    }
    div.opacity:hover {
      background-color: aqua;
      opacity: 0;
    }
    div.hidden {
      background-color: yellow;

    }
    div.hidden:hover {
      background-color: yellow;
      visibility: hidden;
    }
    div.none {
      background-color: red;
    }
    div.none:hover {
      background-color: red;
      display: none;
    }
    div.last {
      background-color: green;
    }
  </style>


<body>
  <div class="opacity">hover시 opacity</div>
  <div class="hidden">hover시 visibility hidden</div>
  <div class="none">hover시 display none</div>
  <div class="last">원본</div>
</body>

 

2. 글꼴, 문자

2-1. font-style : 글자의 기울기

- normal

- italic

 

2-2. font-weight : 글자 굵기

- normal (400)

- bold (700)

- 100

 

2-3. font-size

폰트의 크기

- 16px (기본값)

- em, rem

 

2-4. line-height

한 줄의 높이, 행간

- em, rem...

- 정수를 쓰면 배수로 지정, 2를 가장 많이 씀

- 블록 요소의 내용을 세로 정렬할 때 곧잘 사용됨

 

2-5. font-family : 글꼴1, "글 꼴 2", ... 글꼴계열(필수);

글꼴(서체) 설정

띄어쓰기 등 특수문자가 있는 글꼴 이름은 ""로 묶어줘야 함

- 글꼴 계열은 바탕체(serif), 고딕체(sans-serif), 고정너비 글꼴(monospace), 필기체(cursive), 장식 글꼴 계열(fantasy) 로 존재하며, 지정해준 글꼴이 없다면 글꼴계열을 적용하도록 함(글꼴 계열은 대표적인 것들이 있어 무조건 존재함)

 

2-6. color

글자의 색상

색상명, #헥스코드, rgb(, ,)

 

2-7. text-align

문자의 정렬 방식

- left

- right

- center

 

2-8. text-decoration

문자의 장식선

- none 장식 없음 (기본값)

- underline 밑줄

- line-through 취소선

 

2-9. text-indent

- 0 : 들여쓰기 없음 (기본값)

문자 첫 줄의 들여쓰기

 

 

3. 배경

3-1. background-color

요소의 배경 색상

- transparent : 투명 (기본값)

 

3-2. background-image

요소의 배경 이미지 삽입, background-color의 위에 존재한다.

 

- none : 이미지 없음 (기본값)

- url("경로")

 

3-3. background-repeat

요소의 배경 이미지 반복

- repeat 기본값, 수평 수직 반복

- repeat-x 수평 반복

- repeat-y 수직 반복

- no-repeat 반복 없음

 

3-4. background-position

요소의 배경 이미지 위치 지정

- 방향 : top bottom left right center 를 사용하여 위치를 지정하거나, (ex background-position:botton left;)

- 축 : x/y축을 단위 크기로 지정 (ex background-position: 100px 300px;)

 

3-5. background-size

요소의 배경 이미지 크기

- auto : 이미지의 실제 크기

 

- cover : 비율을 유지하여 요소의 더 넓은 너비에 맞춤

- container : 비율을 유지하여 더 짧은 너비에 맞춤

 

3-6. background-attachment

요소의 배경 이미지 스크롤 특성

- scroll : 이미지가 요소를 따라서 같이 스크롤 됨

- fixed : 이미지가 뷰포트에 고정, 스크롤 되지 않음**

 

 

to be continue...

4. 배치

5. 플렉스(정렬)

6. 전환

7. 변환

8. float

9. 애니메이션

10. 그리드

11. 다단

12. 필터

'학원에서 배운 것 > CSS' 카테고리의 다른 글

CSS Diner 문제 다 풀었다!!  (0) 2023.02.01
KDT 5th 웹개발자 입문 수업 5일차  (0) 2023.02.01
KDT 5th 웹개발자 입문 수업 3일차  (0) 2023.01.30
KDT 5th 웹개발자 입문 수업 2일차 -3  (0) 2023.01.27
FlexBox 정리  (0) 2022.12.14

관련글

티스토리툴바