CSS를 HTML에 적용시키기

Intro..
페이지를 만들기 시작하기 전에 CSS와 HTML연결도 할줄 몰라서 검색 해 보았고 그저 한 줄 복사해서 붙여넣기로 바로 문제는 해결했는데 궁금해 할 새도 없이 빠르게 문제가 해결되어서 머릿속에는 남지 않았을것이라는 생각이 들었다. 그런 계기로 간단한 내용이지만 되새기면서 작성하도록 한다.

HTML에 CSS를 적용시키는 방법은 총 세가지가 있다. 각 방법은 장단점이 있으므로 상황에 맞게 사용하는 것을 추천한다고 했다.

1. Inline Style Sheet

   HTML 태그의 style 속성에 CSS 코드를 넣는 방법

   • 예시

     <p style="color: blue">Lorem ipsum dolor.</p>

     p자체가 선택자가 되고 속성과 값만 css코드에 들어가게 됨 단점 : 스타일링에 한계가 있고 코드 재사용이 불가
     

2. Internal Style Sheet

   HTML 문서 안의 안에 CSS 코드를 넣는 방법

   안에 CSS 코드를 넣는다
   • 예시

     <style>
       h1 {
         color: blue;
       }
     </style>

     이렇게 하게 되면 모든 h1 요소의 글자가 파란색이 됨 장점 : 문서 안의 여러 요소 한번에 스타일 가능 단점 : 다른 html문서에는 적용할 수 없음html 문서 안에 바로 작성하기 때문
     

3. Linking Style Sheet

   별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

   css파일 확장자는 style.css 이다.

   • 예시 <style.css>

     h1 {
       color: red;
     }

     문서에 코드 추가 ```html ``` 장점 : 따로 파일을 만들고 연결만 해 주면 됨 다른 HTML문서에도 동일한 스타일 적용 가능

   정리
   세가지 방법이 있지만 가장 좋은 것은 마지막 방법인 따로 CSS파일을 만들어두는 것. 하지만 그 CSS도 다른 파일에 적용 할 수 있도록 코드를 잘 정리해서 짜야할것같다는 생각을 개인적으로 했다.