[WEB] HTML & CSS

CSS 기본 박스 모델

텍스트영역(context), 텍스트영역제외한 박스의 내부영역(padding), 테두리(border), 외부영역(margin)이 존재한다.

  h1 {
    border: 2px gray solid;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-top: 0px;
    margin-bottom: 8px;
    }

이런식으로 각 영역을 제어한다.

HTML에 CSS를 적용시키는 방법

1. Inline Style Sheet

HTML 태그의 style 속성에 CSS 코드를 넣는 방법이다. 이 방법은 재사용이 불가능 하다는 단점이 있어 잘 사용하지 않는다.

2. Internal Style Sheet

HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법이다. 예를 들면 <style> 태그에 a에 대해 코드를 넣으면 문서 안의 모든 a의 색이 회색이 된다.

3. Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법이다. <link rel="stylesheet" href="./css/styles.css"> 이런식으로 파일을 참조하고 연결해서 사용한다.

styles.css

class사용해 색상 정의시 .을 붙인다. id 사용해 색상 정의시 #을 붙여서 사용한다.

태그, 클래스, ID로 한 텍스트에 색상을 정의하면 어떤게 우선으로 처리될까? ID가 우선순위로 색상을 지정하게 된다. 그다음이 CLASS, 마지막이 태그다. 그런데 이때 !IMPORTANT를 사용하게 되면 무엇이든간에 가장 우선순위로 처리하겠다는 뜻이 된다.