1. 이미지 style 주기
1-1 <style>태그 사용하기
<head>
<style>
img{ width : 100px;
height : 100px;
}
</style>
</head>--> html에 직접 <style>태그 달기
--> 이미지의 width (너비), height(높이) 지정
1-2 이미지에 직접 스타일 주기
<img src="./사진/댕댕쓰.jpg"
style= "width :100px; height :100px"/>--> 이미지 태그 닫기 전에 style 코드로 너비, 높이 정해주기
--> 1번, 2번 둘 다HTML파일에 직접 하기보다는 CSS사용해서 스타일 적용하는게 더 효율적 / 구분하기 쉬움
2. <div> 태그
<div><!--영역 나누기-->
내 div
</div>
3. <div> style 주기
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
3-1 . <div id> 사용해서 여러 영역 나누고 style 주기
<style>
#my-div1 {
background-color : lightcoral;
}
#my-div2 {
background-color : skyblue;
}
</style>
</head>
<body>
<div id = "my-div1">
</div>
<div id = "my-div2">
</div>
--> 나중에 나올 class와 id 쓰임 구분하기.
--> 속성이 겹치면 class로 묶어서 사용해도 가능
--> id는 style 시트로 가면 #(div name) { }
---> class는 .(class name) { }
반응형
