CSS - 주요 속성

lsjoon·2022년 11월 29일

목록 보기

3/8

CSS 주요 속성

width, height

<p class = "paragraph"> 프로그래밍을 배워봐요! </p>
// css //
.paragraph { width: 500px; height: 500px; }

. width 속성
선택한 요소의 넓이를 설정
고정값(px), 가변값(%)
. height 속성
선택한 요소의 높이를 설정

font

글자에 대한 디자인적인 속성을 설정

<p class="paragraph"> 즐거운 웹프로그래밍! </p>
// css //
.paragraph {
	font-style: italic;					/ 글자 기울기 /
	font-weight: bold;					/ 글자 두께 /
    font-size: 50px; 					/ 글자크기 /
	font-family: Arial, sans-serif;		/ 글꼴 /
}

font-style
글자 스타일 ( normal, italic, oblique )
font-weight
100~900 사이의 숫자 입력
보통 (400), 굵게 (700)
font-vaiant
대소문자 변형 ( small-caps )
font-size
글자 크기
font-family
브라우저마다 지원하는 폰트가 다름
입력한 순서대로 우선순위 적용
sans-serif는 마지막에 작성하는 디폴트값

- font
size, family 값은 항상 있어야 함.
순서가 중요 ( ···, size, family 순)

text

글자들의 배치와 효과를 설정

color
텍스트의 색상을 설정
direction
텍스트가 쓰이는 방향을 설정
( ltr, rtl)
letter-spacing
텍스트 내에서 문자 사이의 간격을 설정
word-spacing
텍스트 내에서 단어 사이의 간격을 설정
text-indent
단락의 첫 줄의 들여쓰기 여부 설정
( px 단위 [ 음수 = 내어쓰기 ] )
text-align
텍스트의 수평 방향 정렬 설정
( left, right, center, justify )
text-decoration
텍스트에 여러가지 효과를 설정
( none, line-through, overline, underline )
text-transform
텍스트에 포함된 영문자에 대한 대소문자 설정
( uppercase: 강제 대문자, lowercase: 강제 소문자, capitalize:첫글자만 )
line-height
텍스트의 줄 간격 설정
text-shadow
텍스트에 그림자 효과 설정
white-space
HTML 요소 내의 여백 설정 - 공백, 들여쓰기, 줄바꿈
( normal, nowrap, pre, pre-wrap, preline )

border

<p class="paragraph"> 즐거운 웹프로그래밍! </p>
// css //
.paragraph {
	width: 500px; 					
	height: 500px;					
	border-style: solid;			
	border-width: 10px;				/ 테두리 굵기 /
    border-color: red;				/ 테두리 색상 /

>>> border: solid 10px red;
한 줄로 입력 (쉼표 X, 순서 상관 X)

}

특정 공간에 테두리를 만듦

. border-style
실선 : solid
점선 : dotted

background

<p class="paragraph"> 즐거운 웹프로그래밍! </p>
// css //
	background-color: yellow; 				
	background-image: url(이미지경로);
	background-repeat: no-repeat;
    background-position: left;

>>> background: yellow url(이미지경로) no-repeat left;
한 줄로 입력 (쉼표 x, 순서 상관 x)

배경 이미지 또는 색상을 넣고자 할 때

. background-repeat
x축으로 반복 : repeat-x
y축으로 반복 : repeat-y
반복하지 않음 : no-repeat
. background-position
공간 안에서 이미지의 좌표를 변경할 때.
top, bottom, center, left, right 등.