-
[CSS] Cascading Style SheetsVScode/CSS 2022. 9. 8. 14:37
-Tag 안에서 지정되면 옵션을 포함, 다양한 "옵션과 꾸밈요소"를 별도의 시트에 작성 후 name, id 등으로 연결 적용하는 스타일 정의 구분
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>First.html</title> <style type="text/css"> #div2{ width:300px; height:200px; background:green; margin:20px; } /* width: 가로크기, height 세로크기, background: 배경색, margin: 바깥여백-다른 태그와의 간격 */ /* style sheet에서의 주석은 /**/로 표기함 */ #div3{ width:500px; height:200px; background:magenta; margin:20px; } </style> </head> <body> <!-- 스타일을 지정하는 방법 #1: 태그 안에 style 속성을 추가하고 그 값으로 각 스타일들을 한번에 지정함 --> <div style="width:150px; height: 150px; background:#0A4EFA;"></div> <!-- 스타일 속성으로 width height 등과 같은 내용을 표시할 때는 (:)과 함께 반드시 px 단위를 붙여야 함 --> <!-- 다른 스타일과 다르게 width와 height는 태그의 별도 속성으로도 스타일 속성으로도 표기가 가능함 --> <img src="images/naver.png"width="100"height="100"border="3"/></br> <img src="images/naver.png"style="width: 100px; height: 100px; border: 3px dashed red"/></br> <!-- 스타일을 지정하는 방법 #2: 적용할 태그에 id 또는 class를 지정하고 그 이름 이용하여 별도의 공간에 스타일을 지정함 --> <div id="div2"></div> <div id="div3"></div> <div id="div2"></div> <!-- 아이디 이름으로 스타일을 지정하면 같은 아이디로 다른 태그에 같은 스타일을 재활용, 재적용이 가능함 --> <div id="div3"style="width:100px; height:100px; backgound:yellow; margin:20px;"></div > <!-- 재적용, 재활용 상태에서 스타일 시트에 있는 내용에서 변화를 주고 싶다면 태그안에 추가로 style 옵션을 써줌. 추가적인 스타일 적용이 가능하고 중복된 내용은 태그안의 스타일로 수정 적용됨--> </body> </html>
'VScode > CSS' 카테고리의 다른 글
[CSS] position, display, visibilty, shadow (0) 2022.09.08 [CSS] background, font, button, gradiant (0) 2022.09.08 [CSS] pseudoclass (0) 2022.09.08 [CSS] border, checked, box model, list (0) 2022.09.08 [CSS] selector (0) 2022.09.08