<!-- 내장 방식 -->
<!-- html의 style tag 내부에다가 직접 작성한다. -->
<!-- 개발 환경에서 html css js 는 구별해서 정리하는게 좋기 때문에
  css 를 html 에 내장해서 관리하는 것은 권장하지 않는다. -->

<style>
      div {
        color: red;
        padding: 20px;
      }
</style>

<!-- 인라인 방식 -->
<!-- html의 전역속성인 style 속성에 직접 스타일을 작성한다. -->
<!-- 이는 우선순위가 매우 높다. 따라서 유지보수 면에서 힘들어 질 수 있다. -->

<div style="color: red; padding: 20px;"></div>

<!-- 링크 방식 -->
<!-- 외부 CSS 문서를 가져와서 연결하는 방식 -->

<link rel="stylesheet" href="./css/main.css" />

import와 달리 병렬 방식이다.

<!-- 임포트 방식 -->
<!-- CSS 의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 -->

in html
<link rel="stylesheet" href="./css/main.css" />

in css
@import url("./box.css");

이러한 방식을 직렬 로 연결되었다 라고 한다.
그 의미는 
mins.css 가 실제로 해석되기 전까지는 box.css 는 연결이 지연된다는 의미이다.
장점이자 단점이다. 의도적으로 이용할 수 있다.