CSS 속성

Develop My Life·2020년 5월 18일

CSS TIL

CSS

목록 보기

2/12

CSS 속성

CSS의 속성은 250여가지가 있다. 그렇기에 이를 모두 다 공부하고 있기에는 한계가 있다. 그래서 통계를 통해 속성 사용의 빈도 수를 알아보고 가장 많이 쓰이는 속성을 공부하는 것이 좋다.

font-size 속성

단위 : px, em, rem
- px : 절대적
- em, rem : 상대적
결론적으로 rem을 사용하면 된다. 그 이유는 rem은 사용자가 폰트 크기를 조정할 수 있게 하기 때문이다.

font-size 예시

<html>
  <head>
    <style>
      #f1{
        font-size : 1rem;
      }
      #f2{
        font-size : 16px;
      }
    </style>
  </head>
  <body>
    <p id = "f1">hello</p>
    <p id = "f2">world</p>
  </body>
</html>

color 속성

색상을 설정하는 속성으로 3가지 설정 방법이 있다.

color의 이름으로 설정하기
color의 rgb로 설정하기
color의 hex로 설정하기

color 예시

<html>
  <head>
    <style>
      #f1{
        font-size : 1rem;
        color : red; //빨강색
      }
      #f2{
        font-size : 20px;
        color : rgb(0,255,0); //녹색
      }
      #f3{
        font-size : 1rem;
        color : #0000FF; //파란색
      }
    </style>
  </head>
  <body>
    <p id = "f1">hello</p>
    <p id = "f2">world</p>
    <p id ="f3">font</p>
  </body>
</html>

text-align 속성

정렬을 설정하는 속성이다.

right, center, left
justify : 양쪽을 균등하게 정렬

text-align 예시

<html>
  <head>
    <style>
      #f1{
        font-size : 1rem;
        color : red;
        text-align: right; //오른쪽 정렬
      }
      #f2{
        font-size : 20px;
        color : rgb(0,255,0);
        text-align: justify; //양쪽 균등
      }

    </style>
  </head>
  <body>
    <p id = "f1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus lectus tristique nulla hendrerit laoreet. Nam egestas justo eu nisl viverra tincidunt. Praesent non sodales quam. Nam ipsum tortor, luctus eget iaculis id, sodales tristique purus. Morbi vel velit diam. In hac habitasse platea dictumst. Morbi dictum scelerisque rhoncus. Vivamus ultrices orci sed iaculis vestibulum. Ut laoreet feugiat pulvinar. Nunc sit amet blandit ligula, quis egestas mauris. Sed id venenatis lacus.</p>
    <p id = "f2">Maecenas viverra sed lorem non rutrum. Pellentesque porttitor luctus felis ut semper. Integer quis efficitur nisl, at aliquet nunc. Pellentesque convallis semper augue ut laoreet. Sed quis tellus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Etiam id nibh fermentum, dictum dolor a, ultrices nunc.</p>
  </body>
</html>

font 속성

font-family : 글꼴
- , 콤마 사용은 글꼴이 없을 때에 다음 글꼴을 사용한다는 의미
- 글꼴이름에 띄어쓰기가 있다면 " "로 묶어주기
- serif : 글장식 있음
- san-serif : 글장식 없음
- monospace : 고정폭
font-weight : 굵기 설정
line-height : 줄간격
- 기본 값 : 1.2
font에 순서에 따라 쓰면 한번에 설정 가능
- font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

font 예제

<html>
  <head>
    <style>
      #f1{
        font-size : 1rem;
        color : red;
        text-align: justify;
        font-family: arial, verdana, "Helvetica Neue", serif, monospace;
        font-weight: bold;
        line-height: 1.2;
      }
      #f2{
        text-align: justify; //양쪽 균등
        font : bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
      }

    </style>
  </head>
  <body>
    <p id = "f1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus lectus tristique nulla hendrerit laoreet. Nam egestas justo eu nisl viverra tincidunt. Praesent non sodales quam. Nam ipsum tortor, luctus eget iaculis id, sodales tristique purus. Morbi vel velit diam. In hac habitasse platea dictumst. Morbi dictum scelerisque rhoncus. Vivamus ultrices orci sed iaculis vestibulum. Ut laoreet feugiat pulvinar. Nunc sit amet blandit ligula, quis egestas mauris. Sed id venenatis lacus.</p>
    <p id = "f2">Maecenas viverra sed lorem non rutrum. Pellentesque porttitor luctus felis ut semper. Integer quis efficitur nisl, at aliquet nunc. Pellentesque convallis semper augue ut laoreet. Sed quis tellus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Etiam id nibh fermentum, dictum dolor a, ultrices nunc.</p>
  </body>
</html>