8일차 CSS 특성(1)

변승훈·2022년 4월 6일
CSS
0

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

목록 보기
9/37

1. CSS로 제어가 가능한 것들

  1. 박스 모델
  2. 글꼴, 문자
  3. 배경
  4. 배치
  5. 플렉스(정렬)
  6. 전환
  7. 변환
  8. 띄움
  9. 애니메이션
  10. 그리드
  11. 다단
  12. 필터

2. 속성(Properties)

HTML의 속성(Attribute)과 표현이 다르다는 것을 먼저 인지하자.

2-1. 너비 (width, height)

  1. width, height : 요소의 가로, 세로 너비
    기본 값 : auto

  2. max-width, max-height : 요소가 커질 수 있는 최대 가로,세로 너비.
    해당 값 보다 작아야 (해당 값 >= 쓸 값) 한다.
    기본 값 : none (최대 너비 제한 없음)

  3. min-width, min-height : 요소가 작아질 수 있는 최소 가로,세로 너비.
    해당 값 보다 커야 (해당 값 =< 쓸 값) 한다.
    기본 값 : 0 (최소 너비 제한 없음, 음수 사용 불가).

  4. 단위 : px, em, vw 등...

2-2. CSS 표현 단위

  • px : 픽셀
  • % : 상대적 백분율
  • em : 요소의 글꼴 크기
  • rem : 루트 요소(최상위 요소, html)의 글꼴 크기
  • vw : 뷰포트 가로 너비의 백분율 (입력 숫자 n/100)
  • vh : 뷰포트 세로 너비의 백분율 (입력 숫자 n/100)

2-3. margin

  1. margin : 요소의 외부 여백(공간)을 지정하는 단축 속성이다.

  2. 기본 값 : 0 (외부 여백 없음), ★ 음수사용 가능
    auto : 브라우저가 여백을 계산하며 가운데 정렬에 활용한다.
    단위 : px, em, vw 등...

  3. 단축 속성 : margin에 값을 넣는 갯수에 따라 변하는 위치가 달라진다.

  • margin 1px; => 1px : top, bottom, left, right
  • margin 1px 2px; => 1px : top, bottom / 2px : left, right (십자가 모양 생각)
  • margin 1px 2px 3px; => 1px : top / 2px : left, right / 3px : bottom (한자 三 모양 생각)
  • margin 1px 2px 3px; 4px; => 1px : top / 2px : right / 3px : bottom / 4px : left (시계방향으로 돌아감)
  • margin: auto; => block요소에 가로사이즈가 있는 상태에서만 사용이 가능하며 상하를 제외한 좌우의 기준으로 가운데 정렬이 된다.
  1. margin의 개별 속성들
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  1. margin 중첩(중복)현상

블록 요소는 한 줄에 한 개 밖에 올 수 없다.

<div></div>
<div></div>
<div></div>
<div></div>
  div {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 20px;
  }


magin 값이 20px 하나이므로 상하좌우 전부 적용이 되어야 한다.
하지만 결과물을 보면 좌, 우는 적용이 되었는데 상, 하에 적용이 제대로 되지 않는 현상을 발견할 수 있다.

다른 예시로 다음과 같은 코드를 통해 확인할 수 있다.

<div class="parent">
  <div class="child"></div>
</div>
  .parent {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: blanchedalmond;
    margin-top : 20px;
  }

여기에서는 부모가 자식요소의 margin-top을 뺐어간 것을 확인할 수가 있다.

이러한 예시들로 확인할 수 있는 이런 현상을 margin 중첨(중복) 현상이라고 한다.

margin 중첩(중복)현상은 좌, 우에서 발생하지 않고 "상, 하"에서만 발생한다.

  1. 부모-자식
    1-1) 부모의 margin-top과 자식의 margin-top이 만나면(겹친다면) 중첩이 생긴다.
    1-2) 부모의 margin-bottom과 자식의 margin-bottom이 만나면 중첩이 생긴다.

  2. 이전형제 / 다음형제 끼리 만나면
    2-1) 이전 형제의 margin-bottom과 다음 형제의 margin-top이 만나면 중첩이 생긴다.
    2-2) 이전 형제의 margin-top과 다음 형제의 margin-bottom이 만나면 중첩이 생긴다.

2-4. padding

  1. padding : 요소의 내부 여백(공간)을 지정하는 단축 속성이다.

  2. 기본 값 : 0 (내부 여백 없음)
    % : 부모 요소의 가로 너비에 대한 비율로 지정
    단위 : px, em, vw 등...

  3. 요소의 내부의 여백이 추가되는 것이기 때문에 여벽이 추가 된 만큼 요소의 크기가 커진다.

  4. 단축 속성 : padding 값을 넣는 갯수에 따라 변하는 위치가 달라진다.
    margin과 똑같다!

  • padding 1px; => 1px : top, bottom, left, right
  • padding 1px 2px; => 1px : top, bottom / 2px : left, right (십자가 모양 생각)
  • padding 1px 2px 3px; => 1px : top / 2px : left, right / 3px : bottom (한자 三 모양 생각)
  • padding 1px 2px 3px; 4px; => 1px : top / 2px : right / 3px : bottom / 4px : left (시계방향으로 돌아감)
  1. padding 개별 속성들
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

2-5. border

  1. 요소의 테두리 선을 지정하는 단축 속성이다.

  2. 작성 순서 -> border: 선-두께 선-종류 선-색상;

  • border : 요소의 크기가 커진다.
  • border-width : 선-두께
    기본 값 : medium
    margin, padding과 같은 단축 속성을 가지고 있다.
    단위 : pm, em, % 등
  • border-style : 선-종류
    기본 값 : none(선의 종류가 없어서 출력이 안된다.)
    종류 : solid(실선), dashed(파선 - - - -) 등...
    margin, padding과 같은 단축 속성을 가지고 있다.
  • border-color : 선-색상
    기본 값 : black
    투명색 : transparent

  1. border-radius : 요소의 모서리를 둥글게 깎음
    기본 값 : 0 (둥글게 없음)

    (그림 출처 : https://heropy.blog/)
    반지름 00px로 깎는다는 개념, 1번 방향부터 시계방향으로 적용된다.
    단위 : px, em, vw 등

  2. 기타 속성들

  • border-방향
    방향 : top, bottom, left, right
    border-방향 : 두께 종류 색상

  • border-방향-속성
    속성 : width(두께), style(종류), color(색상)

2-6. 색상 표현

  1. 색상 이름 : 브라우저에서 제공하는 색상 이름
    ex) red, tomato, royalblue

  2. Hex 색상코드 : 16진수 색상(Hexadecimal Colors)
    ex) #000, #FFFFFF

  3. RGB : 빛의 삼원색
    ex) rgb(255, 255, 255)

  4. RGBA : 빛의 삼원색 + 투명도
    ex) rgba(0, 0, 0, 0.5), 마지막은 투명도, 0~1 : 투명~불투명

2-7. box-sizing

  1. box-sizing : 요소의 크기 계산 기준을 지정한다.

  2. box-sizing: content-box; => 기본 값, 요소의 내용(content)으로 크기 계산
    border-box : 요소의 내용 + padding + border로 크기 계산 => 요소의 내용 값으로 적용(width)

2-8. overflow

  1. overflow : 요소의 크기 이상으로 내용이 넘쳐 있을 때, 보여짐을 제어하는 단축 속성

  2. visible: 기본 값, 넘친 내용을 그대로 보여줌
    overflow: hidden; => 넘친 내용을 잘라냄
    overflow: scroll; => 넘친 내용을 잘라냄, 스크롤바(x축, y축) 생성
    overflow: auto; => 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
    +) white-space: nowrap; => 글자가 옆으로 길어진다. (옆의 공간이 뚫려있으면 계속 옆으로 늘어난다)
    text-overflow: ellipsis => 글자가 넘쳤을 때 ... 처리를 해줌(말 줄임표 처리), text-overflow: ellipsis를 사용하려면 위의 white-space와 overflow를 같이 써줘야 한다.

  3. overflow의 개별 속성들
    overflow-x, overflow-y

2-9. display

  1. display : 요소의 화면 출력(보여짐) 특성

  2. 각 요소에 이미 지정되어 있는 값

    block : 상자(레이아웃)요소
    ex) 인라인 요소(a, span 태그)에 가로 너비를 지정하기 위해 display: block을 사용한다.
    inline : 글자 요소
    ex) 블록 요소(div 태그)를 인라인요소의 특성 사용을 위해 display: inline을 사용한다.
    inline-block : 글자 + 상자 요소

  3. 따로 지정해서 사용하는 값

    flex : 플렉스 박스(1차원 레이아웃)
    grid : 그리드(2차원 레이아웃)
    none: 보여짐 특성 없음, 화면에서 사라짐

2-10. opacity(투명도)

  1. opacity : 요소 투명도

  2. opacity: 1; => 기본 값, 불투명
    opacity: 0~1; => 0부터 1 사이의 소수점 숫자, 숫자를 조절해 투명도 조절이 가능하다.
    소수점 작성 시 앞에 0을 생략해서 사용이 가능하다. ex) .5, .07
    0 : 투명

2-11. 글꼴

  • font-style : 글자의 기울기
    기본 값 : normal(기울기 없음)
    italic : 이텔릭 체
  • font-weight : 글자의 두께(가중치)
    기본 값 : normal, 400 기본 두께
    bold, 700 : 두껍게
  • font-size : 글자의 크기
    기본 값 : 16px
    단위 : px, em, rem 등
  • line-height : 한 줄의 높이, 행간과 유사
    기본 값 : normal(브라우저의 기본 정의를 사용)
    숫자(요소의 글꼴 크기의 배수로 지정) - 사용 권장 ex) 1.4, 2
    단위 : px, em, rem 등
  • font-family: 글꼴1, "글꼴2",...글꼴계열;
    글꼴1,2 : 글꼴(서체)지정
    띄어쓰기 등 특수문자가 포함된 글꼴의 이름은 큰 따옴표로 묶어야 한다.
    글꼴 여러개를 사용하여 후보로 넣을 수 있다. (못 쓸수 있는 환경이 나올수 있기 때문이다.)
    글꼴계열은 필수로 작성해야 한다!

2-12. 문자

  1. color : 글자의 색상
    기본 값 : rgb(0, 0, 0)
    ★ 단일로만 사용! 키워드가 앞에 붙는 개념이 아니다!

  2. text-align : 문자의 정렬 방식
    기본 값 : left (왼쪽 정렬)
    right(오른쪽 정렬), center(가운데 정렬)

  3. text-decoration : 문자의 장식(선)
    기본 값 : none (장식 없음)
    underline(밑줄), line-through(중앙 선)

  4. text-indent : 문자 첫 줄의 들여쓰기
    기본 값 : 들여쓰기 없음
    음수 사용 가능! 반대는 내어쓰기(outdent)
    단위 : px, em, rem 등

  5. white-space: nowrap => 글자가 옆으로 길어진다. (옆의 공간이 뚫려있으면 계속 옆으로 늘어난다)

  6. overflow: hidden => 글자가 넘쳤을 때 안보이게 자른다.

  7. text-overflow: ellipsis => 글자가 넘쳤을 때 ... 처리를 해줌(말 줄임표 처리)
    => text-overflow: ellipsis를 사용하려면 위의 white-space와 overflow를 같이 써줘야 한다.

  8. word-break: keep-all; :단어 줄바꿈
    CJK(중국,일본,한국어)를 단어단위로 줄바꿈을 하고 싶을 때 사용한다.
    overflow-wrap: break-word; => 말을 쭉 이어서하면 단어를 자를수 없으므로 영역에서 자르게 해준다

+) letter-spacing : 자간
+) word-spacing : 단어 사이의 간격

2-13. 배경

  1. background-color : 요소의 배경 색상
    기본 값 : transparent(투명함)
    색상 : 지정 가능한 색상

  2. background-image : 요소의 배경 이미지 삽입
    기본 값 : none(이미지 없음)
    url("경로") : 이미지 경로

  3. background-repeat : 요소의 배경 이미지 반복
    기본 값 : repeat(이미지를 수직, 수평 반복)
    repeat-x : 이미지를 수평 반복
    repeat-y : 이미지를 수직 반복
    no-repeat : 반복 없음

  4. background-position : 요소의 배경 이미지 위치
    기본 값 : 0% 0%(0%~100%)사이 값
    방향 : top, bottom, left, right, center 방향 (방향1, 방향2)
    단위 : px, em, rem 등 (x축, y축)

  5. backgeound-size : 요소의 배경 이미지 크기
    기본 값 : auto(이미지의 실제 크기)
    cover : 비율을 유지, 요소의 더 넓은 너비(가로, 세로)에 맞춤
    contain : 비율을 유지, 요소의 더 짧은 너비(가로, 세로)에 맞춤
    단위 : px, em, rem 등

  1. background-attachment : 요소의 배경 이미지 스크롤 특성
    기본 값 : scroll(이미지가 요소를 따라서 같이 스크롤)
    fixed : 이미지가 뷰포트에 고정, 스크롤할 때 같이 내려가고 올라가지 않는다.
profile
변승훈
잘 할 수 있는 개발자가 되기 위하여
이전 포스트

7일차 (2) CSS 개요

다음 포스트

9일차 CSS 배치(position), 정렬(flex), 전환, 변환

0개의 댓글