[CSS] CSS정의/style태그 선언 방식/style tag에서 tag 접근 방법

2021. 6. 9. 14:34

CSS(Cascading Style Sheet)란?

html을 이쁘게 꾸며주는 역할을 한다.

tag의 형태를 속성(attribute)의 속성값(property)으로 꾸며준다.

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

CSS 선언방식

inline : 태그 선언과 동시에 태그 안에 직접 적어주는 방식

예시

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

internal : heed태그 안에 style태그를 선언해 주는 방식

예시

<head>
<style type="text/css">
p {   
	background-color:blue;
	font-size:20pt
}
</style>
</head>
<body>

<p>p tag</p>

</body>

External : heed태그 안에 외부파일 불러오는 방식

예시

<head>

<link rel="stylesheet" href="city.css">

</head>

style tag에서 tag 접근 방법

* : 전체 tag 접근한다.

태그명 : 동일한 태그명 전체 접근한다.

#id명 : id로 접근 , 하나에만 적용할 땐 id를 사용한다.

.class명 : class로 접근, 여러개에 적용할 땐 class를 사용한다.

태그명#id명 : 해당 태그의 class로 접근한다.

태그명.class명 : 해당 태그의 class로 접근한다.

예시 : style태그 한 블록씩 실행해 가면서 확인 해보시는 걸 추천합니다!

<head>

<style type="text/css">

*{
	color: red;
}
p{
	font-size: 15px;
}
#pid{
	background-color: gray;
}
.class{
	background-color: black;
}
p#pid{
	padding-left: 20px;
}
p.class{
	padding: 5px;
}

</style>
</head>
<body>

<h1>h1 tag</h1>
<p>p tag</p>
<p id="pid">p tag id = pid</p>
<p class="class">p tag class = class</p>
<pre class="class">pre tag class = class</pre>

</body>

실행화면

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

[CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0)	2021.06.09
[CSS] a:link/a:visited/a:hover/a:active (0)	2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법 (0)	2021.06.09
[CSS] text속성 (0)	2021.06.09
[CSS] font 속성 (0)	2021.06.09

choice blog