티스토리 뷰

Language/CSS

1. CSS

공부하는 승승 2021. 6. 28. 04:33

 "CSS"

 웹페이지를 조금 더 아름답게 꾸미기 위해서?

 

 CSS를 사용하기 전에는 HTML에서 <font>라는 태그를 사용했었지만 한계가 있었다. 그래서 HTML을 사용하는 것이 아닌 새로운 언어가 등장하게 되었는데 그것이 바로 CSS이다. CSS가 등장함에 따라 이전에는 스타일이 변경 될 경우 일일이 수정해야했던 번거로움이 줄었으며, 웹페이지의 내용과 스타일을 분리하여 웹페이지 속 정보를 읽기 용이해졌다.

 

 

 

1. 사용방법

 <style> 태그의 사이에 있는 내용을 CSS문법에 맞춰서 사용하면되는데 세가지 방법이 있다.

<style="">
<style></style>
.css

 

 첫 번째 방법은 HTML의 속성으로 쓰는 것이고 두 번째 방법은 <style>태그를 html 문서 내에 쓰는 것이다. 그리고 html 문서에서 떼어내어 CSS 파일을 따로 만드는 방법이 세 번째 방법이다. 첫 번째 방법은 스타일 수정 시 번거로우며, CSS의 장점(한번에 수정가능 함)을 발휘할 수 없기 때문에 두 번째 또는 세 번째 방식을 주로 이용한다.

 

<style="">

<h1 style = "color:blue"></h1>

<style></style>

<html>
	<head>
	<style>
		h1{
    	color:blue;
	      }
	</style>
    </head>
    <body>
    </body>
</html>

.css

h1 {
	color:blue;
    }

 

2. <style>

a {color: blue;}

  • a { } - declaration, 선언, 효과
  • color - Property, 속성
  • blue - Value, 속성값

 

 

3. class와 id 선택자

<style>속성을 모든 부분이 아닌 특정 부분에만 적용을 시키고 싶을 때 사용한다.

 

a 태그 선택자(가장 포괄적)
.클래스명(.box    <- <class="box"> ) 클래스 선택자
#아이디(#box      <- <div id="box"> ) id 선택자(가장 디테일함, 중복불가, 하나의 객체에만 적용) 
<style>
	.box{
		border: 2px solid black;
	    }
</style>
<style>
	#box{
		border: 2px solid black;
	    }
</style>

'Language > CSS' 카테고리의 다른 글

CSS) 속성값(property value) 단위  (0) 2022.01.25
CSS) 선택자(Selector)  (0) 2022.01.18
CSS ) 시작  (0) 2022.01.18
3. HTML & CSS 실습(프로젝트?)  (0) 2021.07.07
2. CSS 박스모델  (0) 2021.06.29
댓글