[CSS] 가장 많이 사용되는 주요 속성

width, height

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

width 속성

• 선택한 요소의 넓이를 설정
• 고정값(px), 가변값(%)

height 속성

• 선택한 요소의 높이를 설정
• 고정값(px), 가변값(%)

 

font

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

font-family

• 브라우저마다 지원하는 폰트가 다름
• 입력한 순서대로 우선순위 적용
• 여러개를 입력하는 이유 ? --> 만약 브라우저가 앞에 쓴 글꼴을 지원하지 않는다면, 차선책으로 다음 글꼴
• sans-serif는 마지막에 작성하는 디폴트 값 --> 모든 브라우저가 지원하는 글꼴

font-weight

• 100~900 사이의 숫자를 입력할 수도 있음

 

border

<p class="paragraph"> 즐거운 웹프로그래밍! </p>
 
.paragraph {
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 10px;
    border-color: red;
    /* border: solid 10px red; */
}

border-style

• 실선 : solid
• 점선 : dotted
• 주석과 같이 한 줄에 이어 쓸 수도 있음.
• 이 때, 쉼표는 작성하지 않고 띄어쓰기만 함.

 

background

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

background-repeat

• x축으로 반복 : repeat-x
• y축으로 반복 : repeat-y
• 반복하지 않음 : no-repeat

background-position

• 공간 안에서 이미지의 좌표를 변경할 때
• top, bottom, center, left, right 등