비전공자 개발일기

CSS 본문

HTML _CSS

CSS

HiroDaegu 2021. 7. 27. 20:10
728x90
SMALL

CSS 속성(Properties)

  • 박스 모델
  • 글꼴 & 문자
  • 배경
  • 배치
  • 플렉스(정렬)
  • 전환
  • 변환
  • 띄움
  • 애니메이션
  • 그리드
  • 다단
  • 필터

1. 박스 모델( 내부  &  외부 여백, 가로 & 세로 등)

 

  • width / height : 요소의 가로 / 세로 너비
    1. 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산)
    2. 단위: px, em, vw 등
    3. span(인라인 요소)  vs div(블록 요소)
  span(인라인 요소) div(블록 요소)
가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남
세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬
  •  max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비
    1. 기본값: none(최대 너비 제한 없음)
    2. 단위: px, em, vw 등
  • min-width / min-height: 요소가 작아질 수 있는 최소 가로 / 세로 너비
    1. 기본값: 0(최소 너비 제한 없음)
    2. 단위: px, em, vw 등
  • margin: 요소의 외부 여백(공간)을 지정하는 단축 속성
    1. 기본값: 0
    2. margin = auto; (브라우저가 여백을 계산, 가로<세로> 너비가 있는 요소의 가운데 정렬에 활용)
    3. 단위: px, em, vw 등 
    4. 음수 가능
  • padding: 요소의 내부 여백(공간)을 지정하는 단축 속성
    1. 기본값: 0
    2. 단위: px, em, vw 등
    3. padding = n%(부모 요소의 가로 너비에 대한 비율로 지정)
    4. 요소의 크기가 커짐
  • border: 요소의 테두리 선을 지정하는 단축 속성
    1. 요소의 크기가 커짐
    2. border = border-width　border-style　border-color; 　:띄어쓰기1) border-width: 요소 테두리 선의 두께, px, em, vw 등의 단위, 개별 속성 & 단축속성2) border-style: 요소 테두리 선의 종류, px, em, vw 등의 단위, 개별 속성 & 단축속성                              3) border-color: 요소 테두리 선의 색상, 검정색(기본값), 색상(입력값), transparent(투명), 단축속성       4) 기타 속성: border-방향 / border-방향-속성
  • border-radius: 요소의 모서리를 둥글게 깎음
    1. 기본값: 0(둥글기 없음)
    2. 단위: px, em, vw 등
    3. 좌상, 우상, 우하, 좌하
  • box-sizing: 요소의 크기 계산 기준을 지정
    1. 기본값: content-box(요소의 내용으로 크기 계산)
    2. 입력값: border-box(요소의 내용 + padding + border로 크기 계산)
  • overflow: 요소의 크기 이상으로 내용이 넘첬을 때, 보여짐을 제어하는 단축속성
    1. 기본값: visible(넘친 내용을 그대로 보여줌)
    2. 입력값: hidden(넘친 내용을 잘라냄)
    3. 입력값: auto(넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성)
    4. 입력값: scroll(넘친 내용과 관계없이 x축, y축 스크롤바 생성)
    5. overflow-x, overflow-y          
  • display: 요소의 화면 출력(보여짐) 특성
    1. 기본값: block(상자<레이아웃>요소)
    2. 기본값: inline(글자 요소)
    3. 입력값: flex(플렉스 박스<1차원 레이아웃; 수평 또는 수직>)
    4. 입력값: gird(그리드<2차원 레이아웃>)
    5. 입력값: none(보여짐 특성 없음, 화면에서 사라짐)
    6. 기타(table, table-row, table-cell ... )
  • opacity: 요소 투명도
    • 기본값: 1(불투명)
    • 입력값: 0 ~ 1 사이의 소수점 숫자

※ 단축 속성

  • 속성: top, right, bottom, left
  • 속성: top, bottom　left, right
  • 속성: top　left, right　bottom
  • 속성: top　right　bottom　left

※ 개별 속성

  • 속성-top
  • 속성-right
  • 속성-bottom
  • 속성-left

※ 표현단위

px 픽셀
% 상대적 백분율
em 요소의 글꼴 크기
rem 루트 요소(HTML)의 글꼴 크기
vw  뷰포트 가로 너비의 백분율
vh 뷰포트 세로 너비의 백분율

 

※ 색상 표현

색상 이름 브라우저에서 제공하는 색상 이름 red, tomato, blue ...
Hex 색상코드 16진수 색상 #000, #FFF
RGB 빛의 삼원색 rgb(255,255,255)
RGBA 빛의 삼원색 + 투명도 rgba(0,0,0,0.5)

2. 글꼴

  • font- style: 글자의 기울기
    1. 기본값: none(기울기 없음)
    2. 입력값: italic(이텔릭체)
  • font-weight: 글자의 두께
    1. 기본값: normal or 400 (기본 두께)
    2. 입력값: bold or 700 (두껍게)
    3. 100 ~ 900 -> 100단위 숫자 9개, normal(400)과 bold(700) 이외 두께
  • font-size: 글자의 크기
    1. 기본값: 16px
    2. px, em, rem 등 단위로 지정
  • line-height: 한 줄의 높이(행간과 유사)
    1. 기본값: normal(브라우저의 기본 정의를 사용)
    2. 입력값: 숫자(요소의 글꼴 크기의 배수로 지정)
    3. px, em, rem 등 단위로 지정
  • font-family: 글꼴(서체) 지정
    1. 글꼴1, "글꼴2"(띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰따옴표로 묶어야함), ... 글꼴계열;
    2. 글꼴계열: serif(바탕체 계열), sans-serif(고딕체 계열), manospace(고정너비<가로폭이 동등> 글꼴 계열), cursive(필기체), fantasy(장식 글꼴 계열) 등

3. 문자

  • color: 글자의 색상
    1. 기본값: rgb(0,0,0)<검정색>
    2. 입력값: 색상(기타 지정 가능한 색상)
  • text-align: 문자의 정렬방식
    1. 기본값: left
    2. 입력값: right, center, justify(양쪽 정렬)
  • text-decoration: 문자의 장식(선)
    1. 기본값: none(장식 없음)
    2. 입력값: underline(밑줄)
    3. 입력값: overline(윗줄)
    4. 입력값: line-through(중앙선)
  • text-indent: 문자 첫 줄의 들여쓰기
    1. 기본값: 0(들여쓰기 없음)
    2. px, em, rem 등의 단위로 지정
    3. 음수 가능(내어쓰기)

4. 배경

  • background-color: 요소의 배경 색상
    1. 기본값: transparent(투명함)
    2. 입력값: 색상(지정 가능한 색상)
  • background-image: 요소의 배경 이미지 삽입
    1. 기본값: none(이미지 없음)
    2. 입력값: url("경로")
  • background-repeat: 요소의 배경 이미지 반복
    1. 기본값: repeat(이미지를 수직, 수평 반복)
    2. 입력값: repeat-x(이미지를 수평 반복)
    3. 입력값: repeat-y(이미지를 수직 반복)
    4. 입력값: no-repeat(이미지 반복 없음)
  • background-position: 요소의 배경 이미지 위치
    1. 입력값: 방향(top, bottom, left, right, center)
    2. px, em, rem 등의 단위로 지정
  • background-size: 요소의 배경 이미지 크기
    1. 기본값: auto(이미지의 실제 크기)
    2. px, em, rem 등의 단위로 지정
    3. 입력값: cover(비율을 유지, 요소의 더 넓은 너비에 맞춤)
    4. 입력값: contain(비율을 유지, 요소의 더 짧은 너비에 맞춤)
  • background-attachment: 요소의 배경 이미지 스크롤
    1. 기본값: scroll(이미지가 요소를 따라서 같이 스크롤)
    2. 입력값: fixed(이미지가 뷰포트에 고정, 스크롤 NO)

5. 배치

  • position: 요소의 위치 지정 기준
    1. 기본값: static(기준 없음)
    2. 입력값: relative(요소 자신<처음 위치>을 기준, 배치 전 자리는 비어 있음)
    3. 입력값: absolute(위치 상 부모 요소를 기준)
    4. 입력값: fixed(뷰포트<브라우저>를 기준>
    5. 속성: top, bottom, left, right, z-index
    6. 음수 사용 가능※ relative의 경우, 배치를 위한 용도가 아님(위치 상 부모 요소의 역할을 위한 선언)
    7. 요소의 각 방향별 거리 지정(top, bottom, left, right)
      • 기본값: auto(브라우저가 계산)
      • px, em, rem 등의 단위로 지정

※ 요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

  1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(static 제외)
  2.  1의 조건이 같은 경우, z-index 속성의 수ㅅ자 값이 높을 수록 위에 쌓임
  3.  1과 2의 조건까지 같은 경우, HTML의 다음 구조일수록 위에 쌓임
  • z-index: 요소의 쌓임 정도를 지정
    1. 기본값: auto(부모 요소와 동일한 쌓임 정도)
    2. 입력값: 숫자(숫자가 높을수록 위에 쌓임)
  • 요소의 display가 변경됨 = position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 블록으로 변경됨

6. 플렉스(정렬): 1차원 레이아웃(수직 & 수평 정렬)

  • display: Flex container의 화면 출력(보여짐)
    1. 입력값: flex(블록 요소와 같이 flex container 정의)
    2. 입력값: inline-flex(인라인 요소와 같이 flex container 정의)
    3. display: flex or inline-flex; -> flex container로 만들 수 있음
  • flex-direction: 주 축을 설정 => 수평
    1. 기본값: row(행축/ 좌 -> 우)
    2. 입력값: row-reverse(행축 / 우 -> 좌)
  • flex-wrap: flex items 묶음(줄 바꿈) 여부
    1. 기본값: nowrap(묶음<줄바꿈> 없음)
    2. 입력값: wrap(여러 줄로 묶음)
  • justify-content: 주 축의 정렬 방법 => 수평 정렬
    1. 기본값: flex-start(flex items를 시작점으로 정렬)
    2. 입력값: flex-end(flex items를 끝점으로 정렬)
    3. 입력값: center(flex items를 가운데 정렬)
  • align-content: 교차 축의 여러 줄 정렬 방법  => 수직 정렬
    1. 기본값: stretch(flex items를 시작점으로 정렬)
    2. 입력값: flex-start(flex items를 시작점으로 정렬)
    3. 입력값: flex-end(flex items를 끝점으로 정렬)
    4. 입력값: center(flex items를 가운데 정렬)
  • align-items: 교차 축의 한 줄 정렬 방법 => 수직 정렬
    1. 기본값: stretch(flex items를 시작점으로 정렬)
    2. 입력값: flex-start(flex items를 시작점으로 정렬)
    3. 입력값: flex-end(flex items를 끝점으로 정렬)
    4. 입력값: center(flex items를 가운데 정렬)
  • order: flex items의 순서
    1. 기본값: 0(순서 없음)
    2. 입력값: 숫자(숫자가 작을수록 먼저)
  • flex-grow: flex items의 증가 너비 비율
    1. 기본값: 0(증가 비율 없음)
    2. 입력값: 숫자(증가 비율)
  • flex-shrink: flex items의 감소 너비 비율
    1. 기본값: 1(flex container 너비에 따라 감소 비율 적용)
    2. 입력값: 숫자(감소 비율)
  • felx-basis: flex items의 공간 배분 전 기본 너비
    1. 기본값: auto(요소의 content 너비)
    2. px, em, rem 등의 단위로 지정

7. 전환

  • transition: 요소의 전환(시작과 끝)효과를 지정하는 단축 속성
    • (방법) transition: transition-property transition-duraition(필수) transition-timing-function transition-delay;
      • transition-property: 전환 효과를 사용할 속성 이름을 지정
        1. 기본값: all(모든 속성에 적용)
        2. 입력값: 속성이름(전환 효과를 사용할 속성 이름)
      • transition-duraition: 전환 효과의 지속시간을 지정
        1. 기본값: 0s(전환 효과 없음)
        2. 입력값: 시간(지속시간 <단위: s>을 지정)
      • transition-timing-function: 전환 효과의 타이밍(Easing)함수를 지정
        1. 기본값: ease(느리게 -> 빠르게 -> 느리게)
        2. 입력값: linear(일정하게)
        3. 입력값: ease-in(느리게 -> 빠르게)
        4. 입력값: ease-out(빠르게 -> 느리게)
        5. 입력값: ease-in-out(느리게 -> 빠르게 -> 느리게)
        6. 참고 사이트

https://easings.net/ko  

https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function 

https://greensock.com/docs/v2/Easing

                 

  • transition-delay: 전환 효과가 몇 초 뒤에 시작할 지 대기 시간을 지정
    1. 기본값: 0s(대기 시간 없음)
    2. 입력값: 시간(대기시간<단위: s>을 지정)

8. 변환

  • transform: 요소의 변환 효과
    1. transform: 변환함수1 변환함수2 변환함수3 ...
    2. (방법) transform: 원근법 이동 크기 회전 기울임;
  • perspective(속성): 하위 요소를 관찰하는 원근 거리를 지정
  적용대상 기준점 설정
perspective: 600px(속성) 관찰 대상의 부모 perspective-origin
transform: perspective(600px) ... (함수) 관찰 대상 trasnform-origin
  • backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김 여부
    1. 기본값: visible(뒷면 보임)
    2. 입력값: hidden(뒷면 숨김)
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

CSS - SCSS  (0) 2021.08.01
CSS - BootStrap  (0) 2021.07.31
CSS  (0) 2021.07.26
HTML  (0) 2021.07.25
HTML_CSS_BASIC  (0) 2021.07.19
'HTML _CSS' Related Articles more