HTML/CSS/JS로 만드는 스타벅스 웹사이트

CSS 속성

CSS 속성(Properties)

Width, Height

요소의 가로/세로 너비

div {
	width: 100px;
    height: 100px;
}

• 기본 값 auto
  브라우저가 너비를 계산

max-width, max-height

요소가 커질 수 있는 최대 가로/세로 너비

• 기본 값
  none

min-width, min-height

요소가 작아질 수 있는 최소 가로/세로 너비

• 기본 값
  0

CSS 단위

• px
  픽셀

• %
  상대적 백분율

• em
  요소의 글꼴 크기

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

• vw, vh
  뷰포트 가로/세로 너비의 백분율

Margin

요소의 외부 여백(공간)을 지정하는 단축 속성
음수 값도 가능하다

• 기본 값
  0

• 단축 속성
  한번에 제어해준다

  • margin: top, right, bottom, left;
  • margin: top, bottom right, left;
  • margin: top right, left bottom;
  • margin: top right bottom left;

• 방향
  margin-'방향'
  margin-top, margin-bottom, margin-right, margin-left

• 음수 값
  값만큼 겹쳐지게 된다.

Padding

요소의 내부 여백을 지정하는 단축 속성
내부 여백이기 때문에 요소의 크기가 커진다.

• 기본 값
  0

• 단축 속성
  한번에 제어해준다

  • padding: top, right, bottom, left;
  • padding: top, bottom right, left;
  • padding: top right, left bottom;
  • padding: top right bottom left;

• 방향
  padding-'방향'
  padding-top, padding-bottom, padding-right, padding-left

Border / Color

테두리 선

요소의 테두리 선을 지정하는 단축 속성
요소의 크기가 늘어난다.

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

• border-width

  • 기본 값
    중간 두께이나 CSS 단위로 지정할 것

• border-style

  • 기본 값
    none
  • 실선
    solid
  • 파선
    dashed

• border-color

  • 기본 값
    black
  • 투명
    transparent

색상 표현

색을 사용하는 모든 속성에 적용 가능한 색상 표현

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

• Hex 색상코드
  16진수 색상
  ex) #000, #FFFFF

• RGB
  빛의 삼원색
  ex) rgb(255, 255, 255)

• RGBA
  빛의 삼원색 + 투명도
  ex) rgba(0, 0, 0, 0.5)

Border-radius

요소의 모서리를 둥글게 깍음

• 기본 값
  둥글게 없음

border-radius: value;

Box-sizing

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

• content-box
  요소의 내용으로 크기 계산

• border-box
  요소의 내용 + padding + border로 크기 계산
  padding이나 border로 요소가 커지는 속성을 사용할 시 크기를 다시 계산해야하는 경우를 방지하기 위한 속성

Overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

• visible(기본)
  넘치는 내용을 그대로 보여준다.

• hidden
  넘치는 부분 잘라낸다.

• scroll
  스크롤로 넘치는 내용을 볼 수 있게 한다.

• auto
  넘친 부분만 스크롤로 넘치는 내용을 볼 수 있게 한다.

Overflow-x, y

내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성도 있다.

Display

요소의 화면 출력(보여줌) 특성

• block
  상자 요소

• inline
  글자 요소

• inline-block
  글자+상자 요소

• flex
  1차원 레이아웃

• grid
  2차원 레이아웃

• none
  보여짐 특성 없음, 화면에서 사라짐

• 기타
  table, table-row, table-cell 등

Opacity

요소의 투명도 (0~1)

• 기본 값
  1

Font

글꼴

• font-size
  글자의 크기

  • 16px
    기본 크기

• font-weight
  글자의 두께
  100~900의 100단위의 숫자 9개

  • normal
    기본 값
  • bold
    두껍게

• font-style
  글자의 기울기

  • nomal
    기본 값
  • italic
    기울어짐

• line-height
  한 줄의 높이, 행간과 유사하다

  • normal
    1
  • 숫자
    요소의 글꼴 크기의 배수로 지정
  • 단위
    px, em, rm 등의 단위로 지정

• font-family
  글꼴 지정
  font-family: 글꼴1, "글꼴2", ...글꼴계열;
  글꼴의 후보를 보고 사용할 수 있는 것을 사용한다.

  • 글꼴 계열
    • serif 바탕체
    • sans-serif 고딕체
    • 등등

Text

• color
  글자의 색상

• text-align
  문자의 정렬 방식

  • left(기본) right center

• text-decoration
  문자의 장식(선)

  • none (기본)
  • underline
    밑줄
  • line-through
    중앙선

• text-indent
  문자 첫 줄의 들여/내어쓰기

  • 0 (기본)
  • 양수
    들여쓰기
  • 음수
    내어쓰기

Background

• background-color
  배경의 색상 지정

• background-image
  배경에 이미지 지정
  backgound-image: url("경로");

• background-size
  배경의 이미지의 크기를 지정
  요소의 크기 보다 이미지의 크기가 작으면 반복 출력되는 것이 기본

  • auto
    이미지의 실제 크기가 기본
  • 단위
  • cover
    비율 유지, 요소의 더 넓은 너비에 맞춤
  • contain
    비율 유지, 요소의더 짧은 너비에 맞춤

• backgound-repeat

  • repeat
    기본
  • repeat-x/y
    x/y축으로만 반복
  • no-repeat
    반복 없음

• backgound-position
  요소의 배경 이미지 위치

  • 방향
    top, bottom, right, left, center 방향 지정
  • 단위

• background-attachment
  요소의 배경 이미지 스크롤 특성

  • scroll
    기본
    이미지가 요소를 따라서 같이 스크롤
  • fixed
    이미지가 뷰포트에 고정, 스크롤 X