[CSS] CSS란? CCS기초, CSS적용하는 방법 (inline, internal, external)

CSS? ( Cascading Style Sheet )

HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어.

즉, HTML로 문서가 단순히 집을 만드는 과정이라면, CSS는 HTML 문서의 인테리어, 페인팅하는 작업이라고 생각하면 된다.

문자의 컬러, 종류, 형태 지정, 배경화면 설정, 이미지 지정, 테두리 넣기 등등.. 각종 tag에 이미지 형태 라인 형태로 설정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 
style 주석  
*/

/* internal 방식 */
h3{  /* 태그명 */
	background-color: blue;  /* document에 있는 모든 h3태그의 배경은 blue로 된다. */
}

#p1{   /*#   id가 p1인 경우 */
	color: red;
}

.cls{ /*. class가 cls인 경우 */
	color: #00ff00;
}
</style>
</head>
<body>

<p style="font-size: 10pt">p tag</p>
<!-- 
inline 방식 
태그 안에 직접 작성
 -->
<p id='p1'>p 태그 입니다 id=p1 </p> 
<h3 id='p1'>h3 태그 입니다 id=p1 </h3> <!-- css는 id중복이 되어도 적용된다  (이런 식으로 잘 사용 안함) -->
<p class='cls'>p 태그 입니다 class=cls</p>
<h3 class='cls'>h3 태그입니다 class=cls</h3>

 
</body>
</html>

p tag

p 태그 입니다 id=p1

h3 태그 입니다 id=p1

p 태그 입니다 class=cls

h3 태그입니다 class=cls

CSS 적용하는 방법

태그명 접근

"태그명"{

}

html에 있는 모든 tag가 적용된다.

id 접근

#"id"{

}

"id"에 해당하는 id에 값이 적용된다.

class 접근

."class"{

}

"class"에 해당하는 class에 값이 적용된다.

inline 방식

<p style="font-size: 10pt">p tag</p>

태그 안에 직접 작성

Internal 방식

<head>
	<style type="text/css">
    p{
		....
    }
    
    #id{
    	....
    }
    
    .cls{
		....
	}
    <style>
</head>

<head> 태그 안에서 직접 <style> 태그를 사용해서 <style> 태그 안에 css문법을 사용하는 방식

external 방식

<head>
	<link rel='stylesheet' href='city.css'>
</head>

<head>태그 안에서 <link> 태그를 사용해서 외부 css파일을 불러와서 적용하는 방식이다.

속성 값 참고 : http://tcpschool.com/html-tag-attrs/link-rel

저작자표시

'프로그래밍 언어 > CSS' 카테고리의 다른 글

[CSS] header 영역 / main 영역 / footer 영역 (div 태그를 이용해서 나눠보기) (0)	2021.06.10
[CSS] div 태그를 이용해서 프레임 나누기 (0)	2021.06.10
[CSS] 링크 꾸미기 (link 속성/ a:link, a:visited, a:hover, a:active) (0)	2021.06.10
[CSS] CSS text 속성 (color, text-align, text-transform, direction...) (0)	2021.06.09