CSS 는 넓고 얕게 공부
JS는 깊게 공부
box-sizing 중요
Layout - float and clear
float : 이미지를 피해서 글을 배치
.clearfix::after {
content: "";
clear: both;
display: table;
}항상 copy해서 사용하면 된다.
The position Property
위치는 시스템의 배치 관리자에 의하여 자동 배치되는 것이 기본이고 이를 조정할 수 있다.
The position Property
- static
- relative : 붙이는 위치에서 살짝 옮겨준다.
- fixed : 전체 화면에서 붙이는것
- absolute : 자신의 부모를 기준으로 붙이는 것
- sticky : 스크롤에 상관없이 붙이는 것
position : static;
position: relative;
position : fixed;
position : sticky;
Positioning Text in an Image
그림을 흐리게 할 수 있는 무언가 해줘야한다.
텍스트를 parent를 사용해 붙인다.
Top Left
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
반응형 웹
view port : 웹페이지에서 보여지는 사용자의 영역.
view port를 지정해주면
wrap : 쇼핑몰에서 보여줄 때 용이함.
'학교수업 > 웹프로그래밍' 카테고리의 다른 글
| Bootstrap: CSS Framework (0) | 2023.06.16 |
|---|---|
| Graphics (0) | 2023.06.16 |
| [웹프] 0316~0321 (0) | 2023.03.16 |
| [웹프] 0314 (0) | 2023.03.14 |
| [웹프] 0307 (0) | 2023.03.07 |