[ Web & Mark UP ] CSS 문법 정리
∑ CSS 문법 정리.
목 차
1. 표현 방법
2. 선택자 (Selector)
3. CSS 속성 값들
4. CSS 속성 전환
1. CSS 표현 방법.
전 글에서도 언급했듯이, CSS에는 여러가지 표현 방법들이 있습니다.
이 방법들의 공통점은 <head> 태그 내에 모두 위치한다는 것 입니다.
1. HTML 소스 내에 직접 코딩하는 방법
2. 파일로 링크를 거는 방법.
3. import 시키는 방법
등등....
<!doctype html>
<html>
<head>
<style type = "text/css">
@import url("import.css")
p { color: red; }
</style>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>
- 소스 내에 style 태그로 직접 코딩하는 방법
<style type = "text/css">
p { color: red; }
</style>
- import하는 방법 : style 태그 내에 파일 링크를 걸어서 파일의 내용을 가져올 때 사용
<style type = "text/css">
@import url("import.css")
</style>
- 링크는 다른 곳에 위치한 파일을 가져올 때 사용합니다.
다른 웹서버상에 있는 CSS를 가져오는 경우에 유용합니다.
<link rel="stylesheet" type="text/css" href="test.css">
2. CSS 선택자 ( Selector )
- 선택자는 특정 HTML 태그를 선택할 때 사용하는 지시자입니다.
- 선택자를 활용하면,
모든 태그
혹은 특정 P태그, 특정 Class를 가진 모든 태그, 자식 태그 등 거의 대부분의 태그를 선택하는 것이 가능합니다.
위의 코드 예시처럼 p를 그대로 사용하면 모든 p태그를 선택하는 것이 됩니다.
※ 선택자의 종류.
1. 전체 선택자.
2. 태그 선택자.
3. id 선택자.
4. class 선택자
5. 자식 선택자
6. 인접 선택자
7. 속성 선택자
8. 가상 클래스 선택자
9. 수도 클래스 선택자
10. 종속 선택자.
1.전체 선택은 *를 사용합니다.
<style type = "text/css">
* { color : green; }
</style>
3. id를 선택하려면 #을 사용하고,
4. class 선택하려면 .을 사용합니다.
<style type = "text/css">
#teatext { color : blue; }
.coffeetext { color : red; }
</style></head>
<body>
<p id = "teatext">건강에 좋은 차</p>
<p class="coffeetext">커피향 가득한 방향제</p>
</body>
5. 자식 선택자는 '>'를 이용해서 해당 태그 안에 있는 태그를 찾습니다.
<head>
<style type = "text/css">
li > p { color : blue; }
</style>
</head>
<body>
<ul>
<li><p>7월의 여행지</p></li>
<li><p>8월의 여행지</p></li>
</ul>
<p>내년의 여행지</p>
</body>
6. 인접 선택자인 + 는 현재 요소 바로 다음 요소를 선택합니다.
<head>
<style type = "text/css">
h1 + p { color : red; }
</style></head>
<body>
<h1>주의 사항</h1>
<p>해당 사항은 비밀 유지의무가 있습니다.</p>
<p>문의사항은 아래로 연락주시기 바랍니다.</p>
</body>
7. 태그에 속성을 선택자로 사용할 수 있습니다. Class 속성이 있는 h1 태그만 선택됩니다.
<head>
<style type="text/css">
h1[class] { color : blue; }
</style>
</head>
<body>
<h1 class="logo">대한민국</h1>
<p>역사</p>
<h1>정치</h1>
<p>문화</p>
</body>
8. 가상 클래스는 링크를 나타내는 a 태그에 스타일을 부여합니다.
9. 수도 클래스 선택자는 특정 태그에 구체적인 조건을 설정합니다.
- before 와 after가 조금 특이한데요.
해당 요소의 앞과 뒤에 content를 삽입하는 것입니다.
<head>
<style type="text/css">
.box:before { content : "항목 리스트" ; color : red ;}
.box:after { content : "항목을 선택해주세요." ; color : green ;}
p:first-letter { font-size : 150% ; }
p { border-bottom:1px solid #000 ;}
p:last-child { border : none ;}
</style>
</head>
<body>
<div class="box">
<p>회사</p>
<p>제품</p>
<p>서비스</p>
</div>
10. 종속 선택자는 태그와 id / class 선택자가 결합된 형태입니다.
클래스가 more인 p 태그 내에 링크 (a) 색상을 변경합니다.
클래스가 box인 모든 태그 내에 있는 li 요소에 margin을 적용합니다.
<style type="text/css">
p.more a { color : red ; }
.box li {margin-left : 30px; }
</style></head>
<body>
<ul class="box">
<li><a href="#">파일</a></li>
<li><a href="#">도구</a></li>
<li><a href="#">기능</a></li>
</ul>
<p class="more"><a href="#">더보기</a></p>
</body>
3. CSS 속성 값들.
＠ font와 color 속성
- color 값은 RGB 값 ( 1자리 또는 2자리의 16진수) 혹은 영문으로 표현 가능합니다.
<head>
<style type="text/css">
h1 { font-family : "굴림", Gulim;
font-size : 25px;
font-weight : bold;
font-style : italic;
line-height : 100%;
color : #808080;
background-color: green;
}
h2 {
font: "굴림", Gulim bold italic 25px;
color : #080808;
background-color: gray;
}
</style>
</head>
<body>
<h1>블로그 포스트</h1>
<h2>지식과 세상</h2>
<p>지식의 공유</p>
</body>
＠ 문단 Paragraph
- 문단을 나타내는 p 태그에는 정렬 등의 속성이 있습니다.
p { text-align : justify ;}
＠ 배경 Background : 배경과 관련한 속성.
＠ 2차원 변형
- 2차원 변형은 박스를 회전하거나 확대 축소, 이동, 변형 등을 할 수 있습니다.
＠ 레이아웃
- 레이아웃과 관련된 속성은 대표적으로 float, position 등이 있습니다.
- float은 이전 글부터 계속 말해온 블럭과 인라인 요소들을 적절히 배치하는데 많이 사용되는 요소로
기본적으로 알고 있어야 합니다.
<head>
<style type="text/css">
h1.left {float:left;background:#000;padding:5px; color:#fff;}
p{text-align:justify;}
p span{float:right;border:3px solid orange;}
</style>
</head>
<body>
<h1>세상만사</h1>
<p>세상에는 정말 많은 일들이 일어난다. <span>기묘한 이야기</span> 하지만 중요한 것은 나 자신임을 잊지 말아야 한다. </p>
<h1 class="left">세상만사</h1>
<p>세상에는 정말 많은 일들이 일어난다. <span>기묘한 이야기</span> 하지만 중요한 것은 나 자신임을 잊지 말아야 한다. </p>
</body>
<head>
<style type="text/css">
li{list-style-type:none;}
h1{font:bold 42px "굴림", Gulim; background:#ccc;padding:10px 90px;letter-spacing:3px;}
.intro{padding:10px;font-size:120%;}
.gallery li{float:left;width:140px;text-align:center;}
h2{width:100px;height:90px;color:#fff;}
.col1 h2{background:#c00;}
.col2 h2{background:#248;}
.col3 h2{background:#f90;}
.col4 h2{background:#880;}
.gallery li p{padding:10px;text-align:justify;}
</style>
</head>
<body>
<h1>제목</h1>
<div id="container">
<p class="intro">사람들 아마 자신에게 <strong>자신감을 북돋워 주는</strong>
표정 있는 꽃들을 선호할 것이다. </p>
<ul class="gallery">
<li class="col1"><h2>Left1</h2>
<p>비는 27일까지 전국으로 확대되면서 경북권에 호우가 내릴 것으로 예보됐다.</p>
</li>
<li class="col2"><h2>Left2</h2>
<p>특히 25~27일 사이 전국 대부분 지역에서 돌풍과 천둥.번개를 동반한 매우 강한 비가 오는 곳이 있으므로 비 피해 없도록 각별히 유의해야 한다.</p>
</li>
<li class="col3"><h2>Left3</h2>
<p>특히 25~27일 사이 전국 대부분 지역에서 돌풍과 천둥.번개를 동반한 매우 강한 비가 오는 곳이 있으므로 비 피해 없도록 각별히 유의해야 한다.</p>
</li>
<li class="col4"><h2>Left4</h2>
<p>경북북부내륙에는 26일 새벽~오전 사이에 시간당 20~40mm의 강한 비가 쏟아지겠다.</p>
</li>
</ul>
</div><!-- container -->
</body>
4. CSS 속성 전환.
- transition은 배경, 컬러, 높이 , 폭, 변형 등의 속성에 애니메이션 효과를 부여할 수 있습니다.
형식은 아래 처럼 속성, 초단위 시간, 속도 변화 기능을 나열합니다.
timingfunction 의 종류로는
linear (등속)
ease (느리게 시작, 빨라졌다 다시 느려짐) - 기본 동작
ease-in (점점 빨라짐)
ease-out (점점 느려짐)
ease-in-out (처음과 끝이 느림)
cubic-bezier (값을 입력하여 가감속)
transition : property duration timingfunction;
//폭을 1.2 초동안 등속도로 늘립니다.
transition: width 1.2s linear;'3D Web Developer > Web & MarkUp' 카테고리의 다른 글
| [ Web & MarkUP ] CSS 선택자들. (2) | 2024.10.27 |
|---|---|
| [ Web & Mark UP ] HTML 필수 태그 정리해보기 - [ 2 ] (0) | 2024.10.27 |
| [ Web & Mark UP ] CSS 기본 정리. (1) | 2024.10.23 |
| [ Web & Mark UP ] HTML 필수 태그 정리해보기 - [1] (5) | 2024.10.22 |
| [ Web & Mark UP ] HTML 기초 문법 미리보기. (0) | 2024.10.22 |