[CSS] 2021.01.12. DAY_54 CSS 속성
2021. 1. 12. 19:39ㆍWeb_Front-end/CSS
◎ CSS 속성
속성부여
"속성명:값" 의 문법을 사용한다
[ 글자속성 ]
[ 글꼴변경 ]
font-family: 적용글꼴; font-family:적용글꼴, 적용글꼴, 적용글꼴,,,
[ 진하게 ]
font-weight: 값;
/* 값 : bold - 진하게 , normal - 일반 */
[ 색 ]
color: 색;
/* 색 : 색을뜻하는 영단어, RGB */
[ 이텔릭체 ]
font-style: italic
[ 밑줄 ]
text-decoration: 값;
/* 값 : none - 밑줄없음, underline - 밑줄, overline - 윗줄, line-through - 취소선 */
[ 크기 ]
font-size: 크기px;
/* 단위 : px(고정), %, em(가변) */
[ 정렬 ]
text-align: 정렬위치;
/* left, right, center */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selector사용</title>
<style type="text/css">
/* id selector 정의 */
/* #java {color: #0984e3}
#jdbc {color: #0984e3} */
#java, #jdbc {
color: #0984e3
}
/* class selector 정의 */
.f{ font-size:17px; font-weight:bold; text-decoration:underline; margin-bottom:10px}
.m{ font-weight:bold; text-decoration:overline; color:#6c5ce7}
</style>
</head>
<body>
<div id="java">Java</div>
<div>Oracle</div>
<div id="jdbc">JDBC</div>
<div>HTML</div>
<ul>
<li class="f">김포비</li>
<li class="m">김밍키</li>
<li class="f">민여경</li>
<li class="m">정승재</li>
<li class="m">홍길동</li>
<li class="f">이수경</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숨기기, 보여지기</title>
<style type="text/css">
div{display: block}
/* div{display: none} */
ul, ol{list-style: none}
</style>
</head>
<body>
<div>오늘은 화요일 입니다</div>
<ul>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>우리은행</li>
<li>농협</li>
<li>국민은행</li>
</ol>
</body>
</html>
'Web_Front-end > CSS' 카테고리의 다른 글
| [CSS] 2021.01.13. DAY_55. 그림자설정 (0) | 2021.01.13 |
|---|---|
| [CSS] 2021.01.13. DAY_55. 레이아웃 설정해보기 (0) | 2021.01.13 |
| [CSS] 2021.01.13. DAY_55. scrollbar, 디자인_위치구분, 좌표설정 (0) | 2021.01.13 |
| [CSS] 2021.01.13. DAY_55 여백설정, 선설정 (0) | 2021.01.13 |
| [CSS] 2021.01.12. DAY_54 CSS란? 사용방식(inline, embed, external file), selector종류 (0) | 2021.01.12 |