html과 자주 같이 언급되는 css! 이번 시간에는 css에 대한 궁금증을 해결해보겠습니다. css란 무엇일까요?
choirim.tistory.com/category/HTML - CSS를 공부하기 전 알아야 할 HTML
HTML은 웹페이지를 구성하는 가장 기본적인 언어였습니다. HTML를 이용해 웹페이지를 만든 사람들은 그 페이지가 디자인적으로도 예쁘길 바랬습니다. 그걸 만족시켜주는 것이 바로 CSS입니다.
밑의 html 문서를 웹 페이지에 띄운다고 가정해보겠습니다.
<h1> css란 무엇인가 </h1>
<ul>
<li> css의 개념 </li>
</ul>
<p> css는 과연 무엇일까요.</p> result
css란 무엇인가
- css의 개념
css란 과연 무엇일까요.
그런데 제목을 빨간색으로 바꾸고 싶어 졌습니다. 그때 css를 이용하면 됩니다.
ex)
h1 {
color:red;
}
먼저 css를 적용하고 싶은 html 요소를 지정합니다.(h1) 이것을 선택자(selector)라고 합니다.
다음 중괄호를 열고 닫아준 후 적용할 스타일을 중괄호( {} ) 안에 넣습니다. (color : red ; ) 여기서 color는 css의 속성(property)이며 red는 css의 값(value)이라고 부릅니다. 하나의 속성과 값을 지정해준 후에는 세미콜론을 붙여줍니다( ; ).
여기서 css를 html에 적용하는 방법에는 세가지가 있습니다.
1. 인라인 스타일 (inline style) - html 요소 내부에 스타일 속성을 사용해 적용하는 방법 (이 방법은 한번 적용한 속성을 바꾸기가 어려워 잘 사용하지 않습니다. )
<h1 style="color:red"> CSS란 무엇인가 </h1>
2. 내부 스타일 시트(Internal style sheet) - html문서 헤드 태그( <head></head> ) 태그 안에 스타일 태그(<style></style>)를 이용해 그 안에 지정하고 싶은 스타일 속성을 넣는 방법
<head>
<style>
h1 {
color:red;
}
</style>
</head>
<body>
<h1> CSS란 무엇인가</h1>
</body>
3. 외부 스타일 시트(External style sheet) - 외부에서 .css 확장자를 사용해 css 파일을 따로 만든 후 html에 외부 css파일을 불러오는 방법입니다. <head></head> 안에 link태그를 이용해 외부 파일을 불러옵니다. <link rel="stylesheet" href="css/style.css"> 일반적으로 이 방법을 가장 많이 사용합니다.
<head>
<link rel="stylesheet" href="css/style.css">
</head>
이 css를 html문서에 적용하면 원하는대로 제목이 빨간색으로 변합니다.
result
css란 무엇인가
- css의 개념
css는 과연 무엇일까요.
이렇게 css는 디자인적으로 부족했던 html문서를 조금 더 아름답게 만들어주는 역할을 합니다.
'CSS' 카테고리의 다른 글
| [CSS] 포지션 속성 (position property) (0) | 2021.01.01 |
|---|---|
| [CSS] 디스플레이 속성 (display property) (0) | 2021.01.01 |
| [CSS] 박스 모델 (Box Model) (0) | 2020.12.30 |
| [CSS] 적용 우선 순위 (0) | 2020.12.30 |
| [CSS] 선택자(Selector) (0) | 2020.12.28 |
