css 입문
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/01_selector_basic.css">
</head>
<body>
<h1>css3 선택자 기본</h1>
<h2>css3 선택자 기본</h2>
</body>
</html>
css
/* 주석 단축키 : ctrl + / */
/* 코딩 용어 : /(슬래쉬), \(역슬랴쉬), ;(세미콜론) */
/* 사용법 :
태그선택자 {
속성:값;
}
*/
h1 {
/* 글자색 */
color:burlywood;
/* 바탕색 */
background-color: blue;
}
결과
css2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/02_default_wildcard.css">
</head>
<body>
<h1>제목 글자 태그</h1>
<p>안녕하세요 홍길동입니다.</p>
</body>
</html>
css
/* (wildcard) * : 전체 선택자 */
/* 사용법 :
*{
속성:값;
}
*/
*{
color: red;
}
h1 {
color: aqua;
background-color: blue;
}
결과
css3
html
<body>
<!-- 머리말 -->
<div id="header">
<h1>머리말 태그</h1>
</div>
<!-- 본문 -->
<div id="wrap">
<div id="content">
<h1>본문 태그</h1>
</div>
</div>
</body>
css
/* id 선택자 : 기본선택자 */
/* 코딩용어 : #(샵) */
/* 사용법)
#id 선택자 {
속성:값;
}
*/
#header {
width: 800px;
background: red;
}
#wrap {
width: 800px;
}
#content {
width: 300px;
background: green;
}
결과
'HTML > Css' 카테고리의 다른 글
| [CSS] position (0) | 2023.08.11 |
|---|---|
| [CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span (0) | 2023.08.09 |
| [CSS] box collapse schedule (0) | 2023.08.08 |
| [CSS] box, border, padding, margin, width (0) | 2023.08.07 |
| [CSS] 폰트, 밑줄, 글자 속성, 정렬 (0) | 2023.08.04 |