CSS의 기본

SEOKJAE·2022년 6월 7일
CSS

CSS

목록 보기
1/1

CSS 란?

:Cascading Style Sheets의 줄임말로써 HTML 문서 꾸며주기를 하는데 쓰여집니다.

선택자

  • 계층 선택자 → 보다 세부적으로 하기위해.

계층 기준으로 되는것, 선택으로 되는것

1. 자손 선택자 : ‘_’ 띄어쓰기(div 태그 li 선택) →궁극적으로 li를 바꾸고자함.

2. 자식 선택자 > (ul >li) li를 선택.

3. 근접후행 +

4. 후행 ~

선택자의 기본 구조

선택자의 가중치

상대단위 em과 rem

  • em과 rem 공통점
    : CSS의 font-size 속성값에 비례.

  • 차이점
    : em = 해당 단위가 사용되는 요소의 font-size의 속성값이 기준이 된다.
    (ex. 부모가 10px 자식이 5em 자식은 50px)

    : rem = 최상위 요소의 font-size의 속성값이 기준이 된다. 즉 HTML의 최상위 요소는 <html>이므로 <html>의 font-size가 기준이 된다
    (ex. default 상태일때 2rem = 32px)

공간분할태그

공간을 효과적으로 사용하기 위해 분할해주는 태그

1. <div>

2. → 문단 <p>

3. → 문장 <span>

display

  • display:block
    :웹 페이지의 가로공간을 모두 차지하는 속성.
  • width, height 값 설정 가능.
  • 기본값이 무조건 한 줄을 차지하는 요소
    width, height 설정이 가능하다.
    content와 무관

display:inline

  • 컨텐츠(내용)가 끝나는 지점까지 너비를 가지는 속성
  • 내가 담은 컨텐츠까지만 크기로 가지는 요소
    width, height 설정 불가능
    이미 내가 넣은 컨텐츠 = 크기

display:none

  • 해당 html요소를 보이지 않게 지정

Box

Box Model

- Content 내용
- 안 여백 Padding
- Border 경계선
 - 밖 여백 Margin

Box sizing

1)content-box : content

500px p : 40px => 580px2) border-box : border 안 (c+p+b)

500px p : 40px => 500px (c 420)

Border-radius

border-위/아래-좌/우 -radius
profile
SEOKJAE
널널한 개발자

0개의 댓글