<html>
<head></head>
<body>
<h1>바닐라코딩</h1>
<ul>
<li id="first">HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<p>함께 열심히 공부해보시죠!</p>
<p>같이 해요</p>
<p class = thick> 굵은 글씨체</p>
<span id="box"> 박스박스</span>
<h2> 이것도 적용</h2>
<ul id="nav">
<li>child</li>
<p>이것은 적용 안됨?</p>
</ul>
<ul id="list">
<li>border CSS는 네모 칸을 만들어줌</li>
<li>child
<ul>
<li>CSS의 > 연산자는 직속 자식 요소들만 적용. 손자는 적용 X</li>
</ul>
</li>
</ul>
<li>li태그는 앞에 점 표시</li>
<ul>
<li>보통</li>
<li>ul 태그 안에</li>
<li>li 태그를 넣어서</li>
<li>순서없는 리스트를 만든다</li>
</ul>
</body>
</html>
<img src="이미지 주소" alt="cat">
<h5>서브 헤드라인</h5>h1, h2, #box {
font family: Arial, Helevetica, sans-serif;
color : red;
}
li{
color: blue;
font-size: 20px;
}
#first{
color: green;
font-size: 50px;
}
.thick{
font-weight: bold;
}
#nav li{
background: blue;
}
#list > li{
border: 1px solid black;
}
*{
color : orange;
}
img[alt="cat"]{
border: 2px solid black;
}
반드시 기억해야 하는 CSS 선택자 30가지
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
반드시 기억해야 하는 CSS 선택자 30개
여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던
code.tutsplus.com
CSS는 대소문자 구별한다.
* 선택자는 지정되지 않은 요소들을 전부 선택한다.
< = <, > = >
header, section, aside, footer{
margin: 10px;
}header,
section,
aside,
footer{
margin: 10px;
}위 두개의 코드는 같은 코드이다.
처음에는 다른 코드인 줄 알고 section, aside에 주석처리를 해보거나 내가 모르는 CSS선택자가 있나 등등 여러가지 시도를 해보았다. 어떻게 하면 다른사람들도 알아보기 쉬운 깔끔한 코드로 작성할 수 있을까 고민하는 계기가 되었다.
'바닐라코딩 사전학습 > CSS' 카테고리의 다른 글
| CSS 레이아웃 (0) | 2021.11.24 |
|---|---|
| CSS 기본 문법, 링크 (0) | 2021.11.19 |