[CSS] CSS Styles이란?


Study/Javascript, Jquery, CSS  2020. 1. 12. 22:46

안녕하세요. 명월입니다.


이 글은 CSS Styles에 관한 글입니다.


웹 문서에서 html 태그에 대해서는 설명한 적이 있습니다.

링크 - [HTML] Html의 태그 구조

CSS는 간단하게 설명하면 html의 태그로 웹 문서를 작성하면 css style로 문서의 스타일을 꾸미는 것입니다.

<!DOCTYPE html>
<html>
  <head><title>문서예제</title></head>
  <body>	
    <h1>개발기획서</h1>	
    <h2>목차</h2>
    <ol>
      <li><a>개요</a></li>
      <li><a>개발내용</a></li>
      <li><a>개발기간</a></li>
      <li><a>개발인원</a></li>
    </ol>
    <hr>
    <div>
      <h3>개요</h3>
      <div>이 문서는 그냥 만들었습니다.</div>
    </div>
    <div>
      <h3>개발내용</h3>
      <div>아이언 맨을 만들기 위한 전략 수립</div>
    </div>
    <div>
      <h3>개발기간</h3>
      <div>하루면 충분함</div>
    </div>
    <div>
      <h3>개발내용</h3>
      <div>나 혼자면 충분하다</div>
    </div>
  </body>	
</html>

위 태그는 html 태그로만 만든 웹 문서입니다. 우리가 웹 서핑하면서 하는 웹 문서들과는 차이가 많이 있네요. 네이버나 다음만 봐도 위와 같이 표시되지 않고 보기도 편하고 여러 정보를 찾기 좋게 구성되어 있습니다.

그래서 위 태그 문서에 css style를 해서 웹 문서를 꾸미는 것입니다.

/* h1 태그 스타일*/
h1 {
  color:green;
  text-align:center;	
}
/* h2 태그 스타일 */
h2 {
  padding-left : 20px;
  border-bottom : 3px solid #000;	
}
/* li 태그 스타일 */	
li {
  background-color:green;
  border-bottom : 1px solid #000;
  font-size : 20px;
  height:30px;
  padding-top:10px;	
}
/* li 태그의 바로 하위 파생 태그 a 태그 스타일 */
li > a {
  text-decoration:none;
  color:white;	
}
/* body 태그의 바로 하위 파생 태그 div 태그 스타일 */
body > div {
  border:1px solid red;
  margin:2px;	
}
/* body 태그의 바로 하위 파생 태그 div 의 하위 파생 태그 div 스타일 */
body > div div {
  height:100px;	
}

해더 부분에 위와 같은 소스를 style로 추가하던가 css파일을 따로 만들어서 link로 걸어서 html 태그에 style이 적용되게 합니다.

위 태그의 selector를 먼저 이해를 해야 스타일의 적용하는 방법을 알게 됩니다만, selector는 다음 포스트에서 자세히 설명하겠습니다.

간단하게, h1과 h2는 태그명입니다. 태그는 「<h1></h1>」이런식으로 표현됩니다. 「li>a」의 경우는 「<li><a></a></li>」의 a태그를 지정하는 것입니다.「<li><div><a></a></div></li>」의 경우는 대상이 되지 않습니다.

「div div」의 경우는 div의 파생 div이기는 합니다만 바로 밑 태그가 아닌 「<div><div></div></div>」의 하위 div의 경우도 포함이 되지만 「<div><a><div></div></a></div>」의 경우도 포함이 됩니다.

다음 포스팅에서 selector에서 자세히 설명하겠습니다.


해더에는 다음과 같이 추가할 수 있습니다.

<link rel="stylesheet" type="text/css" href="style.css" />

혹은 직접 style를 추가할 수도 있습니다.

<style>
div {
  color:green;
}
</style>

위의 style를 적용한 결과입니다. 뭐 네이버나 다음처럼 화려하게 style이 작성된 것은 아닙니다만 무언가 style이 적용되었습니다.

css도 selector와 style등 분리해서 살펴봐야 할 부분이 많이 있습니다.


CSS selector

링크 - 작성중


CSS style

링크 - 작성중