VScode/CSS
[CSS] Cascading Style Sheets
hvoon
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>