HTML&CSS-2(CSS정의와 적용 및 작성방법)

1 분 소요

CSS(Cascading Style Sheets)

HTML이 웹페이지의 뼈대라면, CSS는 옷입니다. 이 뼈대를 바탕으로 더 예쁘게 꾸며줄 수도 있고 페이지를 더 다양하게 표현할 수 있도록 도와주는 역할을 합니다. CSS를 HTML에 적용하는 방법은 총 3가지가 있습니다.

인라인 스타일
태그에 직접 style을 써서 적용하는 방법. 빠르게 적용할 수 있어서 좋지만 유지보수에는 단점이 있다. class를 넣어 전체적으로 CSS를 넣는것 등이 불가하다!
style 태그
HTML의 <head> 내에 <style>과 </style> 사이 내에 CSS코드를 작성하는 방식. 이 방법 역시 하나의 HTML파일 내에서 작성 가능하지만, 내용이 많아졌을 때 유지보수의 어려움이 있다.
CSS파일 작성 후 HTML에 연결 CSS파일을 따로 만들어서 HTML에 연결해서 사용하는 방식. <link href="index.css" rel="stylesheet" type="text/css" /> 의 방식으로 HTML내에 링크 태그를 넣어 연결해줘야 적용이 가능하다. 파일이 달라서 귀찮을 수도 있지만, 유지보수하기에는 가장 적합한 방식이고 현재 가장 많이 사용하는 방법이다.
- href : href 속성은 파일의 경로를 작성합니다.
- type : link태그로 연결되는 파일이 어떤 것인지 알려줍니다. CSS로 연결하기 위해서는 “text/css”로 작성합니다.
- rel : rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. CSS파일을 링크할 때는 항상 “stylesheet”로 작성합니다.

적합한 선택자를 지정해서 어떤 디자인을 적용할 지 작성합니다. tag, class, id 등을 지정해서 작성가능하며, 동시에 여러개를 지정해서 작성도 가능합니다.

ex)

p {
  color: red;
}
.className {
  font-size: 12px;
}
#id {
  font-weight: bold;
}

h1,
h2 {
  color: blue;
  font-family: arial;
}

이상 CSS가 무엇인지 CSS의 작성방법은 어떤 것이 있는지 알아봤습니다. 보다 자세한 내용은 다음 글에서 기록하도록 하겠습니다!