CSS [8] – 이미지 관련 속성 정리

목차

Images

inline으로 설정 되었을 때
block으로 설정 되었을 때
    <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에 적용

Leave a Reply

Your email address will not be published. Required fields are marked *