CSS 기초 문법 정리

css 기초 문법을 활용하기 이전에 html 기초 문법 정리를 한번 보고 오시는 것을 추천드립니다. 

 

Style 속성

---

html의 태그에 CSS를 적용하려면 style이라는 속성을 사용합니다. 

태그 안에 css를 적용하는 방법 말고, 좀 더 편하게 css를 사용하는 방법들도 존재합니다. 그건 CSS 핵심 문법에서 다뤘으니 확인해보세요.

<div style="...">
   ...
</div>

 

CSS코드를 추가할 때는 CSS속성: CSS속성값 형태로 적습니다. 

<div style="color: #272928">
   ...
</div>

 

여러 개의 CSS속성을 사용할 때는 세미콜론으로 구분합니다. 

<div style="color: #272928; background-color: #eeeeee">
   ...
</div>

 

CSS기본 속성 사용법 예시

---

 

배경색

background-color: #272928

 

글자색

color: #ffffff

 

글꼴

font-family: Poppins, 'Noto Sans KR', sans-serif

구글폰트에서 구할 수 있고, 우선 적용할 글꼴부터 차례로 적어 주면 된다.

 

글자 크기 

font-size: 16px

 

글자 굵기

font-weight: 400

100에서 900까지 100단위로 늘어난다.

 

너비

width: 560px

페이지나 단락의 너비를 지정한다.

 

안쪽 여백

padding: 10px 20px
세로 10, 가로 20

 

바깥 여백

margin: 10px 20px
세로 10, 가로 20

 

바깥 여백(자동)

margin: 10px auto
세로 10, 가로 auto(auto는 margin의 가로에서만 동작한다.)

 

줄간격

font-size: 16px;
line-height: 1.5; /* 16px * 1.5 = 24px */

상대적인 값으로, font-size가 16px이라면 line-height: 1.5 은 16px * 1.5 = 24px 으로 조정된다.

 

텍스트 꾸미기

 

  <a href="https://codeit.kr">
    링크
  </a>
  <br>
  <a class="none" href="https://codeit.kr">
    밑줄 없는 링크
  </a>
  <br>
  <span class="underline">
    밑줄
  </span>
  <br>
  <span class="line-through">
    취소선
  </span>

  .none {
    text-decoration: none;
  }

  .underline {
    text-decoration: underline;
  }

  .line-through {
    text-decoration: line-through;
  }