규칙 1. -- 로 시작 2. 연결은 -로 해야한다. 3. 사용은 var('이름') 하기

button:active { background-color: tomato; } button:hover { background-color: yellow; } input:focus { background-color: green; } a{ border-radius: 10px; padding:5px; background-color: yellowgreen; } a:visited { color: tomato; } a:hover { color: violet; } a:hover { color: blue; } form{ border: 1px solid salmon; display:flex; flex-direction:column; padding:20px; } form:focus-within{ border-color:se..

자손 자손들 div span{ } 직계자손만 div > span{} 형제 바로 옆에 div + span {} 건녀편 형제도 선택 div ~ span{} property, optional optional :required property 그것들만 [placeholder="name"] 포함하는 (include 같은 개념) [placeholder~="name"] 기타 span:first-child, last-child span:nth-child(3) span:nth-child(odd, even) span:nth-child(2n+1) 시작하는 a[href^="www"] 끝나는 a[href$=".org"] name 포함하면 선택됨

메인은 주황색 박스이다 주황색 박스에 아래에 코드를 주면 센터로 잡힌다 main{ background-color: #F4DDB2; border: 1px solid black; width:35vw; height:35vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }