목차
Images
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-21-edited-1.png?resize=599%2C450&ssl=1)
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-23-edited.png?resize=572%2C428&ssl=1)
<section class="example"> <img src="img/pat1.png" alt="Pattern 1" width="200" height="200"> </section>
img { display: block; } .example { margin-top: 1rem; padding-left: 20px; border: 1px solid red; } .example img { width: 25%; height: auto; }
- width를 %로 설정하는 것은 컨테이너 사이즈의 25%로 설정하겠다는 의미
- 크기는 html 에서 작성하는 것이 일반적이지만 CSS에서도 작성 가능
- img는 인라인 요소이기 때문에 이미지 아래에 여백이 생기게 됨
- display: block으로 설정
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-24-1024x358.png?resize=640%2C224&ssl=1)
<div class="container"> <section class="hero"> <figure class="profile-pic-figure"> <img src="img/profile-800x800.png" alt="Profile Picture" title="My Profile Picture" width="800" height="800"> <figcaption class="offscreen">Jane Doe</figcaption> </figure> <h1 class="h1"> <span class="nowrap">Hello👋</span> <span class="nowrap">I'm Jane</span> </h1> </section> </div>
.container { background-color: rgb(251, 210, 156); background-image: url('../img/map-2176x1451.png'); background-repeat: repeat; background-position: top; background-size: cover; } .hero { border-bottom: 2px solid #000; padding: 20px; display: flex; justify-content: flex-start; align-items: center; gap: 30px; background-color: hsla(0, 0%, 100%, 0.4); } .h1 { font-size: 500%; color: aliceblue; text-shadow: 2px 2px 5px #000; /* background-color: hsla(0, 0%, 0%, 0.4); padding: 0.25rem; border-radius: 10px; */ } .profile-pic-figure { width: 35%; } .profile-pic-figure img { width: 100%; height: auto; min-width: 100px; border: 5px double gray; border-radius: 50%; } /* img는 화면 크기에 맞게 min-width 까지 줄어즒 */
- background-size
- cover: 화면 크기에 맞게 리사이징 되며 비율에 맞게 최대한 큰 이미지가 보임
- contain: 비율에 맞게 이미지가 반복 됨
- background-position
- 이미지가 포커싱할 위치(x,y축 설정)
*기타 참고
/* Utility Classes */ .nowrap { white-space: nowrap; } .offscreen { position: absolute; left: -10000px; } /* End Utility Classes */
- white-space: nowrap;
- 콘텐츠가 자동줄바꿈 되지 않도록 함, 연속 된 띄어쓰기 줄바꿈 무시
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-25-1024x955.png?resize=640%2C597&ssl=1)
<body> <section> <p class="clip">Jane</p> </section> </body>
body { font-family: "Nunito", sans-serif; min-height: 100vh; background-color: aliceblue; background-image: url("../img/bubbles.png"), linear-gradient(to left, steelblue, #fff); background-repeat: repeat-y, no-repeat; background-position: right center; background-size: 20%, auto; } .clip { font-weight: 800; font-size: 18rem; text-align: center; background-image: url("../img/scenic-2200x1331.png"); background-size: 100%; text-transform: uppercase; -webkit-background-clip: text; background-clip: text; /* color: hsla(0, 0%, 0%, 0.051); */ color: transparent; }
- background-image 속성에 linear-gradient 함수를 써서 이미지 형태로 사용할 수 있음
- background-image를 ‘,’로 구분하여 두개 설정 가능, 관련 속성도 ‘,’로 구분해서 각각 설정 가능
- background: repeat-y right center url(“../img/bubbles.png”)
- 축약어 사용 가능하나 두 개 이상의 이미지 쓰는 경우 헷갈리므로 따로 쓰는 것을 추천
- -webkit은 크로싱 브라우저를 위한 접두어: chrome, safari에 적용