CSS 배경 속성

배경 속성

	배경 속성
background-color	배경 색상
background-image	배경 이미지
background-size	배경 이미지 크기
background-repeat	배경 이미지 반복 형태
background-attachment	배경 이미지 부착 형태
background-position	배경 이미지 위치
background	모든 배경 속성 입력

background-repeat 속성

	background-repeat 속성
repeat	이미지 반복
no-repeat	이미지 반복 안 함
repeat-x	X축 방향으로 이미지 반복
repeat-y	Y축 방향으로 이미지 반복

background-attachment 속성

• 배경 이미지를 화면에 고정하는 속성

  	background-attachment 속성
  fixed	배경 이미지를 화면에 고정, 스크롤 시 이미지가 따라옴
  scroll	스크롤 시 배경 이미지는 따라오지 않음

background-position 속성

• 배경 이미지의 위치를 지정하는 속성

  	background-position 속성
  bottom	배경 이미지 아래쪽에 배치
  center	배경 이미지 중앙에 배치
  left	배경 이미지 왼쪽에 배치
  right	배경 이미지 오른쪽에 배치
  top	배경 이미지 위쪽에 배치
  X축	X축 위치 지정
  X축 Y축	X축 위치, Y축 위치 지정

background 속성

• 배경을 꾸미는 여러 값을 한 번이 지정하는 단축 속성

/* color image position/size repeat 순서 */
{ background: bisque url('../medias/Chrysanthemum.png') top/70% no-repeat; }

CSS 박스 속성

박스 속성

박스 모델

• 웹 페이지의 레이아웃을 구성할 때가 가장 중요

  	박스 목록
  content	텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
  width	내용 영역의 너비
  height	내용 영역의 높이
  padding	내용과 테두리 사이 간격, 눈에 보이지 않음
  border	내용과 패딩 주변을 감싸는 테두리
  margin	테두리와 이웃하는 요소 사이 간격, 눈에 보이지 않음

HTML 태그는 사각형 박스 형태

• 박스 크기, 배경색, 여백, 옆 박스와의 거리 등 제어 가능

테두리 속성

	테두리 속성
border-width	테두리 두께
border-style	테두리 스타일
border-color	테두리 색상
border-radius	테두리 각
border	모든 테두리 속성 입력

display 속성

display 속성

	display 속성
none	태그를 화면에서 숨기기
block	태그를 블록 형식으로
inline	태그를 인라인 형식으로
inline-block	태그를 인라인-블록 형식으로

키워드 비교

visibility 속성

• HTML 태그를 출력할 것인지 숨길 것인지 지정

  	visibility 속성
  visible	태그가 보임
  hidden	태그가 보이지는 않지만, 출력 공간은 할당함

• display:none과 visibility:hidden의 차이점

  	차이점
  display:none	공간 자체를 없앰
  visibility:hidden	공간은 있으나 태그가 보이지 않음

  
  새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅