프론트엔드/CSS24 배경 속성 background-color: 요소의 배경 색상 transparent: 투명함(기본) 색상: 지정 가능한 색상 background-image: 요소의 배경 이미지 삽입 none: 이미지 없음 (기본) url("경로"): 이미지 경로 background-repeat: 요소의 배경 이미지 반복 repeat: 이미지를 수직, 수평 반복(기본) repeat-x: 이미지를 수평 반복 repeat-y: 이미지를 수직 반복 no-repeat: 반복 없음 background-position: 요소의 배경 이미지 위치 0% 0%: 0% ~ 100% 사이의 값(기본) 방향: top, bottom, left, right, center 방향 (예)top right 단위: px, em, rem 등 단위로 지정(x축 y축) b.. 2021. 4. 22. 문자와 관련된 속성 color: 글자의 색상 rgb(0,0,0): 검정색(기본) 색상: 기타 지정 가능한 색상 text-align: 문자의 정렬 방식 left: 왼쪽 정렬 (기본) right: 오른쪽 정렬 center: 가운데 정렬 justify: 양쪽 정렬 text-decoration: 문자의 장식(선) none: 장식 없음 (기본) underline: 밑줄 overline: 윗줄 line-through: 중앙 선 text-indent: 문자 첫 줄의 들여쓰기, 음수를 입력할 경우(-50) 내어쓰기 0: 들여쓰기 없음 (기본) 단위: px, em, rem 등 단위로 지정 %: 요소의 가로 너비에 대한 비율 2021. 4. 22. CSS 넘침 제어 overflow: 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성 visible: 넘친 내용을 그대로 보여줌(기본 값) hidden: 넘친 내용을 잘라냄 scroll: 넘친 내용을 잘라냄, 스크롤바 생성 auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 overflow: auto; 2021. 4. 18. CSS 크기 계산 box-sizing: 요소의 크기 계산 기준을 지정 content-box: 요소의 내용(content)으로 크기 계산 border-box: 요소의 내용 + padding + border로 크기 계산(따로 계산할 필요가 없음) box-sizing: border-box; 2021. 4. 18. CSS 색상 표현 색을 사용하는 모든 속성에 적용 가능한 색상 표현 색상 이름: 브라우저에서 제공하는 색상 이름 (red, tomato, royalblue) Hex 색상코드: 16진수 색상 (#000, #FFFFFF) RGB: 빛의 삼원색 (rgb(255, 255, 255)) RGBA: 빛의 삼원색 + 투명도 (rgba(0,0,0,0.5)) 투명도: 0~1까지 사용 2021. 4. 18. CSS 테두리 선 속성 border: 선-두께(border-width), 선-종류(border-style), 선-색상(border-color); -> 요소의 테두리 선을 지정하는 단축 속성 (요소의 크기가 커지는 특징) 기본값 border: medium none black; 예시 border: 10px solid orange border-width: 요소 테두리 선의 두께 medium: 중간 두께 thin: 얇은 두께 thick: 두꺼운 두께 단위: px, em, % 등 단위로 지정 (권장) 최대 4가지 값까지 입력 가능(border-width: 10px 20px 30px 40px;), 띄어쓰기로 구분 border-width: top,right,bottom,left; border-width: top,bottom left,rig.. 2021. 4. 18. 이전 1 2 3 4 다음
