CSS 기본구조 및 id class 사용
HTML에 CSS를 적용하기 위해서는 해당 스타일을 지정해줄 태그를 선택후 적용하게된다.
그러기 위해서는 태그명, 또는 해당 태그 id 또는 class 를 지정 및 선택하여 스타일을 지정해 줄 수있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> CSS Basic </title>
<style type="text/css">
/* CSS기본구성
tagName or class or id{
propertyName: value;
propertyName: value;
}
*/
p { /* p태그 전체를 뜻한다*/
font-size: 14pt;
}
#p1 { /* # == id를 뜻한다.*/
font-size: 20pt;
color: red;
}
p.p2 { /* . == class를 뜻한다.*/
font-size: 24pt;
color: #0000ff;
}
</style>
</head>
<body>
<p> p tag 입니다</p>
<p id="p1"> p tag id는 p1 입니다.</p>
<h3 id="p1"> h3 tag id는 p1 입니다.</p> <!-- css 에서는 접근이 되지만 JavaScript에서는 id로 접근이 불가능 하기에 의미가 퇴색된다.-->
<p class="p2"> p tag class는 p2 입니다.</p>
<h3 class="p2"> h3 tag class는 p2 입니다.</p>
</body>
</html>CSS 문자크기
주로 사용하는 문자크기 단위는 em, %, px를 주로사용한다고 하며,
해당 단위는 주위하며 봐두면 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> char size </title>
<style type="text/css">
.cm {
font-size: 1cm;
}
.mm {
font-size: 1mm;
}
.inch {
font-size: 1in;
}
.pt {
font-size: 1pt;
}
.pc {
font-size: 1pc;
}
.px {
font-size: 24px;
color: red;
}
.em {
font-size: 1em;
color: red;
}
.per {
font-size: 200%;
color: red;
}
</style>
</head>
<body>
<p>p tag 글자크기 defalut입니다.</p>
<p class="mm">p tag 글자크기 단위는 1mm 입니다.</p>
<p class="pt">p tag 글자크기 단위는 1pt 입니다.</p>
<p class="pc">p tag 글자크기 단위는 1pc 입니다.</p>
<p class="em">p tag 글자크기 단위는 1em 입니다. 많이 사용합니다.</p>
<p class="px">p tag 글자크기 단위는 24px 입니다. 많이 사용합니다.</p>
<p class="per">p tag 글자크기 단위는 200% 입니다. 많이 사용합니다.</p>
<p class="cm">p tag 글자크기 단위는 1cm 입니다.</p>
<p class="inch">p tag 글자크기 단위는 1inch 입니다.</p>
</body>
</html>CSS 간격 조절 정렬
문자크기 단위를 그대로 사용할 수 있으며, 정렬 이나 띄워쓰기 간격, 문자 간격조절, 줄간격을 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> String spaceing align </title>
<style type="text/css">
#p1 {
text-align: right;
}
.p2 { /* 단어간격(띄워쓰기) 간격조절*/
word-spacing: 30px;
}
.p3 { /* 문자 간격조절 */
letter-spacing: 20px;
}
.p4 { /* 줄 간격조절*/
line-height: 1.7em;
}
</style>
</head>
<body>
<!-- 정렬 -->
<p align="left">p tag left</p>
<p align="center">p tag center</p>
<p align="right">p tag right</p>
<h3 style="text-align: center;">h3</h3>
<p id="p1">p tag id p1</p>
<p class="p2">p tag class p2</p>
<p class="p3">가나다라마</p>
<p class="p4">교외를 포함한 ‘파리 데파르트망(Department)’은 면적 2,845㎢, 인구 약
1,240만 명(2018)이다. 오랫동안 센 데파르트망의 수도였으나 1964년부터 파리만으로 독립 데파르트망이 되었다.
프랑스의 정치·경제·교통·학술·문화의 중심지일 뿐만 아니라 세계의 문화 중심지로, ‘꽃의 도시’라고 불리며 프랑스 사람들은
스스로 ‘빛의 도시’라고 부른다.</p>
</body>
</html>CSS JavaScript로 적용하기
자바스크맆트를 이용하여 CSS적용을 할 수있다.
버튼 클릭시, 마우스오버 등등 이벤트에 적용이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript CSS </title>
</head>
<body>
JavaScript 에서 CSS 적용하기
<div id="demo">Hello CSS World</div>
<button type="button" onclick="func()">적용</button>
<script type="text/javascript">
//버튼 이벤트 발생시 스타일 변경
function func() {
obj = document.getElementById("demo");
obj.style.color = "white"; // 글자 색상
obj.style.backgroundColor = "blue"; // 배경색상
obj.style.textAlign = "center"; // 글자 위치
obj.style.borderStyle = "double"; // 경계선
obj.style.borderColor = "#00ff00"; // 경계선 색상 설정
obj.style.fontFamily = "MS PGothic"; // 폰트 설정
obj.style.fontStyle = "italic"; // 스타일 설정
obj.style.fontSize = "2em";
}
</script>
</body>
</html>CSS <a>태그 설정
링크태그에 대한 CSS설정이다.
a { /* 라인이 들어가있는 a tag 라인 없애기 */
text-decoration: none;
}
a:link { /*클릭시 색상변화주기*/
color: #ff0000;
}
a:visited { /*방문한 링크 색상변경*/
color: #00ff00;
}
a:hover { /*마우스 오버레이시 색상변경*/
color: #ffff00;
background-color: #000;
}
a:active { /*클릭시 글자색상변경*/
color: rgb(255, 255, 255);
}'Language > CSS' 카테고리의 다른 글
| CSS 란? 작성방식 (0) | 2020.01.10 |
|---|