목차
CSS Tutorial – Full Course for Beginners
Lesson 16 – Images
<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으로 설정
<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;
- 콘텐츠가 자동줄바꿈 되지 않도록 함, 연속 된 띄어쓰기 줄바꿈 무시
<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에 적용
