1. CSS - Style 속성

1. [CSS 글꼴과 문자]

   1. [실습]

      1. font-family : 글자를 위해 사용하길 원하는 글꼴을 의미합니다
      2. font-size : 글자의 사이즈를 변경해주는 것을 말합니다

      # CSS
      html {
        font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
        font-family: placeholder: /* 구글 폰트로부터 얻은 마지막 결과가 있어야합니다 */
      }
      

   2. [실습2]

      1. HTML body안에 문자를 포함하는 요소 h1, li, p를 위해 글자 크기를 설정하겠다는 의미입니다
      2. text-align : 글자 위치 이동을 말합니다
      3. line-height : 줄의 높이를 얼마나 설정할 것인가를 말합니다
      4. letter-spacing : 자간을 얼마나 설정할 것인가를 말합니다[글자 간 간격]

      # CSS
      h1 {
        font-size: 60px;
        text-align: center;
      }
      
      p, li {
        font-size: 16px;
        line-height: 2;
        letter-spacing: 1px;
      }
      

2. [CSS 박스모델]

   1. content : 페이지의 공간을 차지하고 있는 각각의 블록들을 말합니다(width, height가 차지하는 공간)
   2. padding : 요소의 네 방향 안쪽 여백 영역을 설정해주는 것을 말합니다(top, right, bottom, left)
      1. [사용법]
         1. 한 개의 값은 모든 4면의 여백을 설정함을 말합니다 ⇒ padding : 10px;
         2. 두개의 값을 지정하면 첫번째는 위와 아래, 두번째는 왼쪽과 오른쪽 여백을 설정합니다 ⇒ padding : 10px 20px;
         3. 세 개의 값을 지정하면 첫번째는 위, 두번째는 왼쪽과 오른쪽, 세 번째는 아래 여백을 설정합니다 ⇒ padding : 10px 20px 30px;
         4. 네개의 값을 지정하면 각각 위, 오른쪽, 아래, 왼쪽 여백을 지정해준다는 의미 입니다 ⇒ padding : 10px 20px 30px 40px;
      2. [속성]
         1. top : 위 여백을 지정
         2. right : 오른쪽 여백을 지정
         3. bottom : 아래 여백을 지정
         4. left : 왼쪽 여백을 지정
   3. border : 요소의 테두리를 설정해줍니다(width, style, color)
      1. [속성]
         1. color : 테두리 색상
         2. style : 테두리 스타일
         3. width : 테두리 넓이
   4. margin : 요소의 네 방향 바깥 여백 영역을 설정해주는 것을 말합니다(top, right, bottom, left)
      1. [사용법]
         1. 한 개의 값은 모든 4면의 여백을 설정함을 말합니다 ⇒ margin : 10px;
         2. 두개의 값을 지정하면 첫번째는 위와 아래, 두번째는 왼쪽과 오른쪽 여백을 설정합니다 ⇒ margin : 10px 20px;
         3. 세 개의 값을 지정하면 첫번째는 위, 두번째는 왼쪽과 오른쪽, 세 번째는 아래 여백을 설정합니다 ⇒ margin : 10px 20px 30px;
         4. 네개의 값을 지정하면 각각 위, 오른쪽, 아래, 왼쪽 여백을 지정해준다는 의미 입니다 ⇒ margin : 10px 20px 30px 40px;
      2. [속성]
         1. top : 위 여백을 지정
         2. right : 오른쪽 여백을 지정
         3. bottom : 아래 여백을 지정
         4. left : 왼쪽 여백을 지정