728x90
# css명령어 display속성
block 상자요소
inline 글자요소
none 보여짐특성없음, 화면에서 사라짐
[ex]
-HTML
<span>A</span>
<span class="s1">B</span>
<span>C</span>
-CSS
span{
background-color:skyblue;
}
.s1{ display:inline ; }
# 순서없는목록 <ul><li>
# 순서있는목록 <ol><li>
[ex]
<ul>
<li>
동물
<ol>
<li>기린</li>
<li>토끼</li>
</ol>
</li>
<li>
꽃
<ol type="A">
<li>장미</li>
<li>튤립</li>
</ol>
</li>
</ul>
# 스타일의종류
1 내부스타일
2 외부스타일
3 인라인스타일
4 @import스타일
[ex] 내부스타일
<head>
<style type="text/css">
h1{
border:1px solid navy;
background-color:orange;
}
</style>
</head>
<body>
<h1>AAA</h1>
</body>
HTML --> xxx.html
CSS --> xxx.css
JS --> xxx.js
[ex] 외부스타일
-style1.css
h1{
border:1px solid navy;
background-color:orange;
}
-test.html
<head>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<h1>AAA</h1>
</body>
[ex] 인라인스타일
<h1 style="border:1px solid navy;background-color:orange;">AAA</h1>
[ex] @import스타일
-style1.css
h1{ border:1px solid navy; }
-style2.css
@import url("./style1.css");
h1{ background-color:orange; }
-test.html
<head>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<h1>AAA</h1>
</body>
# CSS 주요선택자 selector
태그선택자,클래스선택자,id선택자 ,그룹선택자
하위선택자 ,자식선택자 ,인접형제선택자,형제선택자
속성선택자
가상클래스선택자
[ex]
-HTML
<div class="a b c">aaa</div>
<div class="a b ">bbb</div>
<div class="a">ccc</div>
-CSS
.a{ color:Red; }
.b{ background-color:#5CD1E5; }
.c{ border:2px solid navy; }
[ex] 그룹선택자
-HTML
<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
-CSS
h1,h4 { color:red; }
[ex]
-HTML
<div class="a">
<div>aa</div>
<h1><div>bb</div></h1>
<div>cc</div>
</div>
<div>dd</div>
<div>ee</div>
-CSS
.a div { color:red; } --> 자손 aa bb cc 빨간색
.a > div { color:red; } --> 자식 aa cc 빨간색
.a + div { color:red; } --> 인접형제 dd 빨간색
.a ~ div { color:red; } --> 형제모두 dd ee 빨간색
https://youtu.be/5zhHmCcaRqM?list=PLDE8MlAqcTnCmzkhIJMN51iX9-45vph-s
728x90
'Web > CSS' 카테고리의 다른 글
| 코딩할 때 보려고 정리하는 셀렉터 (0) | 2023.10.13 |
|---|