패스트캠퍼스 환급챌린지 13일차 미션 (2월 13일) : 프론트엔드개발 강의 후기

오늘의 목표

ch.08 끝까지 들어보자아!!

 

우당탕탕

오늘은 감기에 회사까지 출근하니까 몸이 너무 힘드네

그래도 회사 갔다오니까 시간이 너무 빠르게 간다아

후다닥 강의를 들어봅시다요

-

14.배경 

15.16.17 배치

 

기본적으로 css에서는 대부분의 시각적인 눈에 보이는 것들을 다룬다.

아래는 내가 보려고 정리하는 내용들이다.

 

배경 

background

-

background-color

배경 관련 CSS 속성 중 가장 많이 사용되는 것은 아마도 배경색을 지정할 때 사용하는 background-color일 거다.

기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있음

일반적으로 배경색은 웹 접근성(accessibility)을 준수하기 위해서 글자색과의 명암비를 고려해서 결정을 하는데요. 시력이 안 좋으신 분들도 텍스트를 인식하는데 어려움이 없도록 하기 위함

또한 배경 이미지를 사용하더라도 클라이언트에서 이미지를 로딩할 수 없는 상황을 대비하여 가급적 배경색도 지정해주기를 권장!!

 

background-image

두 번째로 살펴볼 속성은 베경 이미지를 지정할 때 사용하는 background-image

기본값은 none, 즉 없음이며 이미지의 위치를 상대 경로 또는 절대 경로를 통해서 나타낼 수 있음

속성값을 명시할 때는 url() 함수를 사용하며, 경로에 공백나올 것을 대비하여 쌍따옴표로 묶어주는 것이 안전함

 

background-repeat

background-repeat 속성은 배경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정한다.

기본값은 repeat인데 배경 이미지를 가로와 세로 모든 방향으로 반복을 해줌

repeat-x는 가로 방향으로만 repeat-y는 세로 방향으로만 배경 이미지를 반복함

no-repeat는 반복을 원하지 않을 때 사용함

 

background-position

background-position 속성은 배경 이미지가 주어진 영역에서 어디에 위치할지를 결정한다.

이 속성은 background-repeat 속성을 no-repeat로 설정해놓고 사용하는 게 일반적

배경 이미지가 반복된다면 위치를 지정하는 게 큰 의미가 없어지기 때문이다.

 

기본값은 배경 이미지를 좌측 상단에 위치시켜 주는 0% 0%이며 절대/상대 단위를 사용하여 좌측 상단으로 부터 얼마나 떨어져야하는지를 지정할 수 있음

보통 top, bottom, left, right, center와 같은 방향 키워드가 많이 사용됨

 

background-size

background-size 속성은 배경 이미지의 크기를 결정한다.

기본값은 auto인데 배경 이미지의 실제 크기를 사용

절대/상대 단위를 사용해서 특정값을 지정해줄 수 있으며, 주어진 영역에 따라 이미지의 크기를 자동으로 조절해주는 키워드도 있음

cover 키워드는 배경 이미지가 짤리더라도 주어진 영역을 완전히 덮을 수 있도록 이미지를 크기를 맞춰준다.

contain 키워드는 빈 공간이 생기더라도 배경 이미지가 주어진 영역에 안에 모두 들어올 수 있도록 이미지의 크기를 맞춰준다.

 

background-attachment 

background-attachment 속성은 스크롤 시 배경 이미지가 주어진 영역과 함께 따라갈지 그대로 있을지를 결정한다.

scroll 키워드를 사용하면 배경 이미지가 주어진 영역과 함께 스크롤되고, fixed 키워드를 사용하면 배경 이미지가 주어진 영역이 스크롤되더라도 고정된다.

 

 

깨알**단축어로 보통 bgc 를 입력하면 background-color 가 나옴ㅎㅎ

 

배치

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다.

많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됨

 

1) position: static

<main>
  <div>첫 번째 요소</div>
  <div>두 번째 요소</div>
  <div>세 번째 요소</div>
</main>

2) position: relative

div:nth-of-type(2) {
  position: relative;  top: 28px;  left: 48px;  background: cyan;
  opacity: 0.8;
}

3) position: absolute

main {
  position: relative;  width: 300px;
  height: 400px;
  background: tomato;
}

4) position: fixed

div:nth-of-type(2) {
  position: fixed;  bottom: 8px;  right: 16px;  background: cyan;
  opacity: 0.8;
}

5) position: sticky

ex.

main {
  width: 300px;
  height: 120px;  overflow: auto;  background: tomato;
}

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]