안녕하세요. 명월입니다.
이 글은 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
링크 - 작성중
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
[CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type (2) | 2020.01.15 |
---|---|
[CSS] 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자) (0) | 2020.01.15 |
[CSS] 속성 선택자 (0) | 2020.01.15 |
[CSS] Selector(선택자) (0) | 2020.01.13 |
[HTML] Open graph (오픈 그래피, og 태그) (0) | 2020.01.12 |
[HTML] 메타 태그(SEO 최적화 포함) (0) | 2020.01.12 |
[HTML] Html의 태그 구조 (1) | 2020.01.09 |
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events) (0) | 2016.03.30 |