CSS의 배경
background-attachment
위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
fixed
background-size
배경 이미지 크기를 설정
px, %를 사용
크기를 하나만 지정하게 될 시에는 가로크기를 기준으로 비율을 유지한 채 크기를 설정하게 됨
cover
배경 이미지의 가로, 세로 모두 요소보다 크다는 조건하에 가능한 크기
가능한 이미지를 작게 설정
이미지의 가로, 세로 비율은 유지
배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음
contain
배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크기
가능한 이미지를 크게 설정
이미지의 가로, 세로 비율은 유지
배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
background
배경 속성을 한번에 적용
background:url(파일위치) 반복여부 위치 사이즈 ...
박스모델(Box Model)
모든 HTML 요소는 박스 모양으로 구성
박스 모델이라고 부름
박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함
내용(content)
텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
패딩(padding)
내용과 테두리 사이의 간격(안쪽 여백)
padding-top, padding-right, padding-bottom, padding-left
padding : 모든 패딩 속성을 한꺼번에 설정, 위부터 시작해서 시계방향으로 설정
padding: a b c d;
위 a, 오른쪽 b, 아래 c, 왼쪽 d
padding: a b c;
위 a, 아래 c, 양 옆 b
padding: a b;
위 아래 a, 양 옆 b
padding: a;
모든 방향 다 a
테두리(border)
내용(content)과 패딩(padding) 주변을 감싸는 테두리
border-style : 테두리를 다양한 모양으로 설정
border-color : 테두리의 색상을 설정
border-width : 테두리의 두께를 설정
border : 모든 테두리의 속성을 한꺼번에 설정
마진(margin)
테두리와 이웃하는 요소 사이의 간격
마진은 눈에 보이지 않음
세로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택
박스사이징(box-sizing)
width, height값에 padding이나 border 영역은 포함되지 않음
만약 width가 100%로 설정된 요소의 경우 padding이나 border 속성을
추가할 수 없음
box-sizing:content-box;
기존 계산법, width와 height에 둘을 포함 X
box-sizing:border-box;
width와 height에 padding, border를 포함
둥근 테두리 만들기
border-radius : top-left-x top-right-x bottom-right-x bottom-left-x /
top-left-y top-right-y bottom-right-y bottom-left-y
대각선 위치의 값이 같을 때
border-radius : top-left-x top-right-x / top-left-y top-right-y
전부다 같을때
border-radius : xy
테이블 테두리 설정(border-collapse)
테이블 셀들간의 공백을 어떻게 처리할지를 결정하는 속성
separate(기본, 셀들을 분리), collapse(셀들 사이를 합쳐서 공백을 없앰)
CSS display
웹 페이지의 레이아웃을 결정하는 속성
block : 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지
inline : 새로운 라인에서 시작되지 않고 앞의 요소에 이어서 배치
inline-block : block과 inline 속성을 모두 사용
width, height 적용
padding, margin을 적용
line-height를 적용
요소를 가로로 나열
none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐
CSS 폼
폼 요소의 스타일을 설정
입력부분들
선택자 : focus 폼 요소가 포커싱 되어있을 때의 스타일을 설정
outline:none; -> 포커싱 되었을 때 테두리 없애주기
버튼
cursor:pointer; -> 마우스를 올렸을 때 커서 모양을 설정(손모양)
textarea
resize:none; -> textarea의 크기를 사용자가 조정하지 못하도록 설정함
'Front-end > CSS' 카테고리의 다른 글
| [CSS 06] 벤더 프리픽스(vender prefix), 애니메이션 (0) | 2022.02.19 |
|---|---|
| [CSS 05] 플렉서블 레이아웃, 미디어 쿼리 (0) | 2022.02.19 |
| [CSS 04] Position, 조상요소 (0) | 2022.02.19 |
| CSS 02 (0) | 2022.01.23 |
| CSS 01 (0) | 2022.01.23 |