: 적용방식
- 구문 -> 스타일 속성 종류 : 스타일 속성값;
- 스타일 적용시 하위 요소들에게도 적용이 된다.
- style 테그는 head테그 내부에 배치한다.
:: style 속성으로 적용
- 모든테그는 style 속성을 가지고 있다.
<span style="color: red; font-size: 20px;">한국스마트</span>
<span style="color: blue;">정보교육원</span>
<span style="color: blue;">
<strong>안녕하세요.</strong>
</span><결과>
:: 선택자 활용
- 선택자로 테그를 선택 후 스타일을 적용 시킬 수 있다.
- 선택자는 styl테그에서 서술 할 수 있다.
- css 외부 파일에서 선택자로 활용할 수 있다.
- style 테그는 head테그 내부에 배치한다.
<style type="text/css">
/*
주석처리 방식
구문 > 선택자 {스타일속성종류 : 스타일속성 값;}
*/
input{
color: red;
border: 5px solid #000;
}
</style>
<input type="text">
<input type="text"><결과>
1) 테그명 선택자
- 테그명을 선택할 수 있다.
<style type="text/css">
body{
background: #efefef;
}
</style><style type="text/css">
[href]{
color: red;
}
</style>
<a href="https://naver.com">네이버</a>
<a>클릭 a 테그</a><결과>
3) 아이디 선택자
- 모든 테그는 아이디라는 속성을 가질 수 있다.
- 아이디의 속성값은 페이지 내에서 유일값을 가져야 한다.
- 선택자에서는 아이디 속성의 값으로 선택을 할 수 있다.
- #아이디값으로 선택자에서 활용한다.
<style type="text/css">
#list-red{
color: red;
}
</style>
<u1>
<li>목록1</li>
<li id="list-red">목록2</li>
<li id="list-red">목록2</li>
<li>목록3</li>
</u1><결과>
4) 클래스 선택자
- 모든 테그는 클래스 속성을 가질 수 있다.
- 클래스 속성값은 여러개 지정 할 수 있다.
- .클래스 속성 값으로 선택자에서 확용된다.
<style type="text/css">
.text-color{
color: red;
}
.text-size{
font-size: 40px;
}
</style>
<div class="text-color text-size">한국스마트</div>
<div class="text-color text-size">정보</div>
<div class="text-color">교육원</div><결과>
5) 외부파일 연결
- head 테그 내부에 link 테그 속성인 href에 외부 경로 삽입하여 연결한다.
html 파일
<div id="container">
안녕하세요.
</div>
css파일
body{
background-color: #000;
color: #fff;
}
#container{
color: red;
}
: 선택자 복합활용
* 최 상단의 style테그에 의해 모든 테그들이 복합적용 된다.
1) 상하관계 표현
- 선택자들의 사이에 공백을 넣어 상하관계를 표현할 수 있다.
<Style type="text/css">
ul li{
font-size: 20px;
}
ul .list1{
color: red;
}
#ul1 .list1{
font-size: 40px;
}
</style>
<ul id="ul1">
<li>안녕하세요.</li>
<li class="list1">안녕하세요.</li>
</ul>
<ul id="ul2">
<li>안녕하세요.</li>
<li class="list1">안녕하세요.</li>
</ul><결과>
2) or 조건(다중선택) 선택자
- 선택자 사이에 ',' 를 서술하여 선택자를 다중으로 선택할 수 있다.
<style type="text/css">
#ul3 .list1, #ul4 .list1{
font-size: 50px;
}
</style>
<ul id="ul3">
<li>안녕하세요.</li>
<li class="list1">안녕하세요.</li>
</ul>
<ul id="ul4">
<li>안녕하세요.</li>
<li class="list1">안녕하세요.</li>
</ul><결과>
3) and 조건 선택자
- ',' 공백을 두지 않고 선택자를 붙여 서술을 하게 되면 2조건이 맞는 테그를 선택한다.
<style type="text/css">
#ul5 .list1{
color: blue;
}
#ul5 .list1[title]{
font-size: 80px;
}
</style>
<ul id="ul5">
<li>안녕하세요.</li>
<li class="list1" title="타이틀">안녕하세요.</li>
<li class="list1">안녕하세요.</li>
</ul><결과>
4) 선택자 복합활용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자 복합활용 예제</title>
<style type="text/css">
.border-wrap .border-list li{
color: #999;
border-bottom: 1px solid #000;
padding: 2px;
}
.border-wrap h4{
margin: 0;
margin-bottom: 5px;
}
.border-list .list{
font-weight: bold;
}
#free .list{
color: blue;
}
</style>
</head>
<body>
<h1>선택자 복합활용 예제</h1>
<div id="notice" class="border-wrap">
<h4>공지사항</h4>
<ul class="border-list">
<li class="list">공지사항1</li>
<li>공지사항2</li>
<li>공지사항3</li>
</ul>
</div>
<div id="free" class="border-wrap">
<h4>자유게시판</h4>
<ul class="border-list">
<li class="list">공지사항1</li>
<li>공지사항2</li>
<li>공지사항3</li>
</ul>
</div>
</body>
</html><결과>
: 스타일속성 종류
1) font
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
#font01{
/* 폰트사이즈 단위는 주로 px, em */
font-size: 12px;
/*
폰트 종류
크롬 : 맑은고딕
익스플로러 : 굴림
*/
font-family: Malgun Gothic, dotum, gulim, sans-serif;
/* 폰트 스타일 지정 */
font-style: italic;
/* 폰트 굵기 */
font-weight: bold;
}
/* 웹폰트 적용하기 */
#font02{
font-family: 'Nanum Pen Script', cursive;
}
</style>
<div id="font01">안녕하세요.</div>
<div id="font02">안녕하세요2.</div>* 웹폰트 가져오고싶을땐
무료웹폰트 검색해서 링크나 export에 있는걸 가져와서 쓰면됨
ex) 구글 웹폰트
@import 에있는 태그 복사해와서
스타일태그 밑에 붙여넣기 해주면 된다.
<결과>
2) text
<style>
#text01 {
/*
텍스트 정렬
선택된 대상의 하위 인라인 요소를 정렬한다.
*/
text-align: center;
}
#text02 a{
/* 텍스트 표기옵션 */
text-decoration: none;
/* 밑줄없애기 */
}
#text02 span{
text-decoration: overline;
}
</style>
<div id="text01">
<span>안녕하세요.</span>
<input type="text">
</div>
<div id="text02">
<a href="#">상단</a>
<span>안녕하세요.</span>
</div><결과>
3) color
<style>
#color01{
/* 웹 색상표 */
color: #ff8000;
}
#color02{
/* rgb */
color: rgb(239,101,104,0.5);
/* 맨마지막 0.5는 투명도 */
}
</style>
<div id="color01">안녕하세요.</div>
<div id="color02">안녕하세요.</div><결과>
'개발자 수강노트 > html／css' 카테고리의 다른 글
| 수강노트 - CSS 기본 (2) (0) | 2022.07.31 |
|---|---|
| 수강노트 - HTML 기본 (0) | 2022.07.31 |
댓글