CSS Property

📓 font-family

요소를 구성하는 텍스트의 글꼴을 정의한다.
속성값은 복수로 지정할 수 있으며, 차례대로 우선 지정된다.
우선 지정된 글꼴이 지원되지 않을 경우 2번째 속성값을 지정한다.

* {
    font-family: 글꼴명1, 글꼴명2, 글꼴명3;
}

📓 font-weight

폰트가 표시되는 굵기를 지정하는 속성이다.
100 ~ 900 사이의 굵기 단계 표시하는 수치값, nomal, bold 등의 키워드로 선언 가능하다.

📓 font-style

폰트의 표시 형태를 지정하는 속성이다.
폰트의 기본 형태로 표시하는 nomal, 기울임꼴로 표시하는 italic 등이 있다.

<style>
<p> Hello World </p>
    p { font-size: 2rem; }  
    /* p가 16px 이라면 2rem을 적용했을 때 실제로 표시되는 크기는 32px이다. */

<p> Hello <span> World </span> </p>
    span { font-size: 3em; }   
    /* p (상위태그)가 16px 이라면 span 태그가 실제로 표시되는 크기는 48px이다. */ 
</style>

📓 font-size

수치와 단위를 지정해 글자의 크기를 정의한다.

단위	의미
px(픽셀)	모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem	html 태그의 font-size에 대응하는 상대적인 크기
em	부모태그(상위태그)의font-size에 대응하는 상대적인 크기

📓 text-align

블록 내 텍스트의 정렬 방식을 정의한다.
미리 정의된 키워드 값을 지정한다.

속성값	의미
left or right	왼쪽 or 오른쪽 정렬
center	가운데 정렬
justify	양 끝 정렬(마지막 줄은 제외)

📓 color

text의 색상을 정의한다.
다양한 방법으로 색상 지정 가능하다.

속성값 유형	방법	예시
키워드	미리 정의된 색상별 키워드 사용	color: red;
RGB 색상코드	# + 여섯자리 16진수 값 형태로 지정	color: #FF0000;
RGB 함수	Red, Green, Blue의 수준을 각각 정의해 지정	color: rgb(100%, 0%, 0%);

📓 display

요소의 블록 레벨, 인라인 여부를 변경 처리 가능하다.
요소를 배치할 레이아웃을 결정할 때도 사용될 수 있다.

block : 요소 전후 줄바꿈이 들어가 한 줄 영역을 다 차지하는 속성이다.
inline : 콘텐츠가 없으면 화면에 표시되지 않으며 width, height 속성 지정을 무시한다.
inline-block : inline 처럼 줄바꿈 없이 나란히 배치되며, width, height 속성 지정이 가능해진다.
대표적으로 inline-block element로는 button, input, select 태그 등이 있다.
none : 크기를 차지하지 않으며 화면에 요소를 표시하지 않는다.

📓 border/background

border : 요소의 테두리를 만드는 속성이다.
요소의 테두리의 style과 width, 그리고 color을 지정할 수 있다.

background : 콘텐츠의 배경을 정의한다.
단축 속성 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

//border
<style>
    p {
        border-width: 2px;
        border-style: solid;
        border-color: black;
    }
    /* 위와 아래의 예시는 같은 코드를 뜻한다.  */
    p {
        border: 2px solid black;
    }
</style>
//background
<style>
        div {
            box-sizing: border-box;
            width: 500px; height: 500px;
            border: 1px solid black;
            background-color: aquamarine;
            background-image: url(https://pbs.twimg.com/media/FMXtbRjUcAQSllc.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    /* 위와 아래의 예시는 같은 코드를 뜻한다.  */
        div {
            box-sizing: border-box;
            width: 500px; height: 500px;
            border: 1px solid black;
            background: url(https://pbs.twimg.com/media/FMXtbRjUcAQSllc.jpg) aqua no-repeat center /contain;
        }
</style>

background-size 값을 포함하려면 
background-size 값 앞에 background-position 값을 작성해야하며 
/(슬래시)를 이용해 구분해주어야 한다. 

단축 속성
서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성이다.
이를 사용하면 간결하고 읽기 좋은 스타일 시트를 작성할 수 있다.
속성값을 하나씩 지정하는 것이 아닌 축약해 한 번에 작성할 수 있는 방법이다.