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 |