CSS - HTML에 적용 방법

CSS 효과를 HTML에 적용 하는 방법

 - inline 방식

  *장점 : HTML에 직접 입력하기 때문에 가시적이다.

  *단점 : HTML은 정보를 전달하는 언어이기 때문에 CSS를 직접 입력하면 코드가 복잡함.

 

 -HTML 내부에 Style 태그 방식 

  *장점 : inline 방식에 비해 코드의 복잡하지 않다.

  *단점 : 유지보수의 어려움 있다.

  *id를 선택할 때는 #을 사용한다.

  *class를 선택할 때는 .(마침표)를 사용한다.

 

 -HTML 외부에 Style 지정 방식

  *장점 : 유지보수의 용이하다. code가 간결하다.

  *단점 : 파일을 따로 관리

  *외부파일에서도 id는 #을, class는 .(마침표)를 사용하여 선택한다.

  *link 태그를 사용한다.

  *href는 파일경로를 입력해야 한다.

  *아래사진 순서대로 HTML파일, CSS파일, 그리고 결과물이다.

HTML 파일

 

CSS 파일

결과

#CSS#생활코딩#codestates#link#style#inline