-
css-22.04.04HTML 2022. 4. 4. 17:29728x90
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <style> fieldset{ background:yellow; } label{ display: inline-block; /* 인라인 상태를 마치 블록의 상태처럼 해주면 사이즈 조정이 가능해진다. */ width: 100px; } #b { /* 아이디는 #으로 접근 */ display: inline-block; } </style>
yellow가 먼저지만 뒤에 써주면 외부css가 변한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> fieldset{ background:yellow; } label{ display: inline-block; /* 인라인 상태를 마치 블록의 상태처럼 해주면 사이즈 조정이 가능해진다. */ width: 100px; } #b { /* 아이디는 #으로 접근 */ display: inline-block; } </style> <link rel="stylesheet" href="../css/outStyle.css">
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> /*요소(태그) 선택자*/ p { color:orange; } /*id 선책자*/ #a{ color:red; } /*class 선택자*/ .b{ border:solid blue 2px; } /*전체선택자*/ *{ border: dotted gray; } /*속성 선택자*/ p[title="국화"]{ /*border: 7px inset pink; 축약기법으로 순서 상관없음!*/ /*각 변의 스타일 등을 지정- 시계방향, top기준 -시계방향, top기준 -4변 top, right, bottom, left -3변 top, left-right, bottom -2변 top-bottom, left-right */ border-color: gold green red blue; border-style: solid dotted dashed inset; border-width: 5px 7px 4px 9px; } </style> </head> <body> <p title="무궁화" id="a">11</p> <p title="프리지아" class="b">22</p> <p title="국화" class="b">33</p> <p title="코스모스" class="b">44</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> * { margin: 10px; } #d1 * { border: solid blue; color: gray; } #d1>* { >:자식 border: solid red; color: green; } #p3+div { color: gold; } #p3~p { border: outset gold; } </style> </head> <body> <div id="d1"> <p>id가 d1인 div의 자식요소</p> <div> <p>id가 d1인 div의 후손요소</p> <div>id가 d1인 div의 후손요소</div> </div> </div> <div> <p id="p3">형제1</p> <div>형제2</div> <p>형제3</p> <p>형제4</p> <p>형제5</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> a { text-decoration: none; } a:link { color: red; } a:visited { color: orange; } a:hover { color: gray; font-size: 1.2em; text-decoration: underline; } a:active { color: white; background-color: black; } .p1:nth-child(odd) { child는 인덱스 1번부터 시작하며 odd는 홀수이다. background-color: green; } .p1:nth-child(even) { even는 짝수이다. background-color: red; } .p1:last-child { background-color: yellow; } .p1:nth-child(2) { background-color: pink; } </style> </head> <body> <pre> pseudo class 의사클래스, 가상클래스 상태나 구조에 의한 선택방법 상태 - :link, :visited, :hover, :active .. 구조 - :nth-child(n), nth-child(odd/even) </pre> <div> <a href="http://www.w3schools.com">W3Schools</a> <a href="http://www.ddit.or.kr">대덕인재개발원</a> <a href="http://www.cgv.co.kr">CGV</a> <a href="http://www.pizzahut.com">피자헛</a> </div> <div> <p class="p1">디즈니+</p> <p class="p1">넷플릭스</p> <p class="p1">디즈니+</p> <p class="p1">넷플릭스</p> <p class="p1">디즈니+</p> <p class="p1">넷플릭스</p> <p class="p1">디즈니+</p> <p class="p1">넷플릭스</p> </div> </body> </html>
a:hover
728x90'HTML' 카테고리의 다른 글
마진과 패딩-22.04.05 (0) 2022.04.05 css2-22.04.05 (0) 2022.04.05 input2-22.04.04 (0) 2022.04.04 audio,video,form양식,input,한글깨짐-22.04.04 (0) 2022.04.04 span, div-22.04.04 (0) 2022.04.04