CSS : 이미지 넣기

이미지를 넣는 방법을 알려드릴게요! HTML에서는 <img> 태그를 사용합니다.

HTML 코드에 이렇게 추가해보세요 (버튼 위에 넣는다고 가정할게요):

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<img src="https://images.unsplash.com/photo-1708356674069-15d117537db6?q=80&w=250&h=250" alt="예시 이미지">
<button>클릭하세요!</button>

그리고 이미지 스타일을 위해 CSS에도 코드를 추가해주세요:

img {
    width: 250px;               /* 이미지 너비 */
    height: 250px;             /* 이미지 높이 */
    display: block;            /* 이미지를 블록 요소로 */
    margin: 20px auto;         /* 위아래 여백 20px, 좌우는 자동(가운데 정렬) */
    border-radius: 50%;        /* 이미지를 동그랗게 */
    border: 3px solid blue;    /* 파란색 테두리 */
}

여기서 알아두면 좋은 점들:

src: 이미지의 주소를 넣는 곳입니다
alt: 이미지가 로드되지 않을 때 보여줄 대체 텍스트
자신의 이미지를 넣고 싶다면 이미지 URL을 src에 넣으면 됩니다

이미지 스타일도 다양하게 바꿔볼 수 있어요:

border-radius를 조절해서 모서리를 둥글게
border 색상이나 굵기 변경
width와 height로 크기 조절

어떤 스타일로 바꿔보고 싶으신가요?

이미지를 육각형으로 만들어볼게요!
무료 이미지는 Unsplash나 Pexels 같은 사이트의 이미지를 사용할 수 있습니다.

HTML 코드의 img 부분을 이렇게 수정해주세요:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<img src="https://images.unsplash.com/photo-1682687220199-d0745b66cc85?w=500&auto=format&fit=crop&q=60" alt="예쁜 풍경">
<button>클릭하세요!</button>

그리고 CSS의 img 부분을 이렇게 수정해주세요:

img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 20px auto;
    border: 3px solid blue;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* 육각형 모양 */
    object-fit: cover; /* 이미지가 찌그러지지 않도록 */
}

여기서 clip-path 속성이 이미지를 육각형 모양으로 잘라주는 역할을 합니다.

원하시는 다른 무료 이미지가 있다면:

이런 사이트들에서 찾아볼 수 있어요. 특정 주제의 이미지를 찾고 싶으시다면 말씀해주세요!

아, 네! Pixabay 이미지를 사용하시려면 이미지 주소를 직접 복사해야 합니다. Pixabay에서 이미지를 선택하고 무료 다운로드를 클릭하면 여러 크기의 이미지 URL을 얻을 수 있어요.

일단 제가 다른 무료 이미지로 예시를 보여드릴게요:

HTML:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<img src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg" alt="예쁜 이미지">
<button>클릭하세요!</button>

CSS의 img 부분은 이렇게 수정해보세요:

img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 20px auto;
    border: 3px solid blue;
    /* 더 뚜렷한 육각형 모양을 위한 수정된 clip-path */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    object-fit: cover;
}

이제 육각형 모양이 더 뚜렷하게 보일 거예요!
혹시 원하시는 Pixabay 이미지가 있다면, 그 이미지의 직접적인 URL(이미지 주소)을 주시면 바로 적용해드릴 수 있습니다.

이미지의 직접 URL을 얻는 방법:

Pixabay에서 이미지 선택
'무료 다운로드' 클릭
원하는 크기 선택
이미지 URL 복사

어떠신가요? 육각형 모양도 더 잘 보이시나요?

아, 이해했습니다! 이미지와 테두리가 모두 육각형이 되게 하려면 CSS를 조금 수정해야 해요.

img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 20px auto;
    /* border 속성을 제거하고, 대신 아래처럼 배경과 padding을 활용합니다 */
    padding: 3px;              /* 테두리 두께만큼의 padding */
    background-color: blue;    /* 테두리 색상 */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    object-fit: cover;
}

/* 이미지 컨테이너를 추가해서 배경도 육각형으로 만듭니다 */
.image-container {
    width: 256px;             /* 이미지 크기 + padding */
    height: 256px;            /* 이미지 크기 + padding */
    margin: 20px auto;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background-color: blue;   /* 테두리 색상 */
}

그리고 HTML도 이렇게 수정해주세요:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<div class="image-container">
    <img src="이미지주소" alt="예쁜 이미지">
</div>
<button>클릭하세요!</button>

이렇게 하면 이미지와 테두리 모두 육각형 모양이 될 거예요! 시도해보시겠어요?

죄송하지만 지금 주신 URL은 이미지의 직접 주소가 아니라 Pixabay 웹페이지 주소네요. Pixabay에서 이미지의 직접 URL을 얻는 방법을 알려드릴게요:

해당 다이아몬드 이미지 페이지에서 '무료 다운로드' 클릭
크기 선택 창이 뜨면, 원하는 크기의 이미지 위에서 마우스 오른쪽 버튼 클릭
'이미지 주소 복사' 선택

또는 제가 비슷한 다이아몬드 이미지의 직접 URL을 제공해드릴게요:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2014/12/21/23/57/diamond-576838_1280.png" alt="다이아몬드 이미지">
</div>
<button>클릭하세요!</button>

CSS는 이전과 동일하게 사용하시면 됩니다. 원하시는 다이아몬드 이미지의 직접 URL을 얻으시면 그것으로 바꿔넣을 수 있습니다!

아, 이미지의 테두리가 잘리는 문제를 해결해볼게요! clip-path 값을 조금 조정하면 됩니다.

.image-container {
    width: 256px;
    height: 256px;
    margin: 20px auto;
    /* clip-path 값을 조금 더 바깥쪽으로 조정합니다 */
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
    background-color: blue;
}

img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 3px auto;  /* 여백을 자동으로 맞춰줍니다 */
    /* 이미지는 살짝 안쪽으로 clip-path를 설정합니다 */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    object-fit: cover;
}

이렇게 하면:

바깥쪽 컨테이너가 더 넓은 육각형 모양이 되고
안쪽 이미지는 약간 더 작은 육각형이 되어서
파란색 테두리가 완전한 육각형으로 보일 거예요!

어떠신가요? 이제 테두리가 완전한 육각형으로 보이나요?

아, 이제 이해했습니다! 네, 더 간단한 방법을 사용할 수 있어요. 컨테이너를 없애고 이미지에 직접 테두리를 적용해보죠.

HTML을 다시 간단하게 만들어보겠습니다:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<img src="https://cdn.pixabay.com/photo/2014/12/21/23/57/diamond-576838_1280.png" alt="다이아몬드 이미지">
<button>클릭하세요!</button>

CSS의 img 부분을 이렇게 수정해보세요:

img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 20px auto;
    border: 3px solid blue;    /* 테두리 */
    object-fit: cover;
    /* 이미지와 테두리 모두에 육각형 모양 적용 */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

이제:

복잡한 컨테이너 구조 없이
이미지에 직접 테두리가 적용되고
전체가 육각형 모양이 될 거예요

더 정확한 육각형 모양을 원하신다면 clip-path의 값을 조정할 수 있습니다. 어떤 모양을 원하시나요?

아하! 위아래가 뾰족한 육각형으로 수정해드릴게요.

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<img src="https://cdn.pixabay.com/photo/2014/12/21/23/57/diamond-576838_1280.png" alt="다이아몬드 이미지">
<button>클릭하세요!</button>

CSS의 img 부분을 이렇게 수정해보세요:

img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 20px auto;
    border: 3px solid black;    /* 검은색 테두리 */
    object-fit: cover;
    /* 위아래가 뾰족한 육각형 모양으로 수정 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

이제:

육각형이 위아래로 뾰족해졌고
테두리는 검은색으로 변경되었어요

이게 원하시는 모양인가요?

아, 이제 진짜 이해했어요! CSS에서 clip-path와 border를 같이 쓰면 테두리도 잘려버리는 문제가 있네요.

다른 방법으로 시도해볼게요. 두 개의 요소를 겹쳐서 만들어보겠습니다:

<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
<div class="hex-container">
    <div class="hex-border"></div>
    <img src="https://cdn.pixabay.com/photo/2014/12/21/23/57/diamond-576838_1280.png" alt="다이아몬드 이미지">
</div>
<button>클릭하세요!</button>

.hex-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 20px auto;
}

.hex-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

img {
    position: absolute;
    top: 3px;  /* 테두리 두께 */
    left: 3px;
    width: calc(100% - 6px);  /* 테두리 두께만큼 뺌 */
    height: calc(100% - 6px);
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;  /* 이미지가 위에 오도록 */
}

이렇게 하면:

검은색 배경이 육각형 테두리 역할을 하고
그 위에 약간 작은 크기의 이미지가 올라가서
진짜 육각형 테두리처럼 보일 거예요!

이제 원하시는 모양이 나왔나요?

네! 이 효과를 만드는 방법을 자세히 설명해드릴게요.

컨테이너 구조
<div class="hex-container">  <div class="hex-border"></div>  <img src="..." alt="...">  </div>
CSS 설명
.hex-container { position: relative; /* 자식 요소들의 기준점이 됩니다 */ width: 250px; /* 전체 크기 설정 */ height: 250px; margin: 20px auto; /* 가운데 정렬 */ }

.hex-border {
position: absolute; /* 컨테이너 기준으로 위치 설정 /
top: 0; / 컨테이너의 왼쪽 위 모서리에 맞춤 /
left: 0;
width: 100%; / 컨테이너 크기만큼 채움 /
height: 100%;
background: black; / 테두리 색상 /
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); / 육각형 모양 */
}

img {
position: absolute; /* 컨테이너 기준으로 위치 설정 /
top: 3px; / 테두리 두께만큼 안쪽으로 /
left: 3px;
width: calc(100% - 6px); / 양쪽 테두리 두께를 뺀 크기 /
height: calc(100% - 6px);
object-fit: cover; / 이미지 비율 유지 /
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); / 같은 육각형 모양 /
z-index: 1; / 테두리보다 위에 표시 */
}


핵심 포인트:
1. `position: relative`와 `position: absolute`를 사용해서 요소들을 정확히 겹치게 배치
2. `clip-path`로 육각형 모양을 만듦
   - `50% 0%`: 위쪽 꼭지점
   - `100% 25%`: 오른쪽 위 꼭지점
   - `100% 75%`: 오른쪽 아래 꼭지점
   - `50% 100%`: 아래쪽 꼭지점
   - `0% 75%`: 왼쪽 아래 꼭지점
   - `0% 25%`: 왼쪽 위 꼭지점
3. 이미지를 테두리보다 약간 작게 만들어서 테두리 효과 생성

테두리 두께를 바꾸고 싶다면 `img`의 `top`, `left` 값과 `width`, `height`의 계산값을 조절하면 됩니다!



네! 이미지에 마우스를 가져다 대면 움직이는 효과를 추가할 수 있어요. CSS의 hover 효과와 transition을 사용하면 됩니다.

```css
.hex-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 20px auto;
}

.hex-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: all 0.3s ease; /* 부드러운 움직임을 위한 트랜지션 */
}

img {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
    transition: all 0.3s ease; /* 부드러운 움직임을 위한 트랜지션 */
}

/* 마우스를 올렸을 때 움직이는 효과 */
.hex-container:hover .hex-border {
    transform: translate(20px, -20px); /* 오른쪽 위로 이동 */
}

.hex-container:hover img {
    transform: translate(-20px, 20px); /* 왼쪽 아래로 이동 */
}

이렇게 하면:

마우스를 올리면 이미지는 왼쪽 아래로
테두리는 오른쪽 위로 이동해서
마치 이미지가 도망가는 것처럼 보일 거예요!

transform 값을 수정하면 이동 거리를 조절할 수 있고, transition 값을 수정하면 움직임의 속도와 방식을 바꿀 수 있습니다.

다른 재미있는 효과를 원하시나요? 예를 들어:

회전하게 만들기
크기가 커지거나 작아지게 하기
다른 방향으로 움직이게 하기
등이 가능합니다!

아하! 이미지와 테두리가 따로 도망가는 게 아니라 함께 도망가게 만들고, 더 멀리 도망가게 해볼게요:

.hex-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 100px auto;  /* 여백을 늘려서 도망갈 공간 확보 */
    transition: all 0.3s ease;  /* 움직임 효과 컨테이너에 적용 */
}

.hex-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

img {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

/* 마우스를 올렸을 때 컨테이너 전체가 도망가게 */
.hex-container:hover {
    transform: translate(150px, -150px);  /* 더 멀리 도망가도록 수정 */
}

이제:

이미지와 테두리가 함께 움직이고
마우스를 가져다 대면 오른쪽 위로 멀리 도망갈 거예요!

방향을 바꾸고 싶다면 transform: translate() 값을 수정하면 됩니다:

왼쪽으로: translate(-150px, 0)
오른쪽으로: translate(150px, 0)
위로: translate(0, -150px)
아래로: translate(0, 150px)

어떤 방향으로 도망가게 할까요?

아래 글에서 이어보기 ↓

https://designershu.tistory.com/1

'Programming > HTML+CSS+JavaScript' 카테고리의 다른 글

Java, JavaScript 차이점 (0)	2025.02.12
JavaScript 프로그래밍 기초 배우는 법 (0)	2025.02.12
Claude.ai에게 개발 배우기! (1)	2025.01.05
CSS : 버튼 추가하기 + 글씨체 바꾸기! (0)	2025.01.05
JAVA : 마우스를 피해 도망가는 이미지 효과 (마우스 감지해서 도망가기) (0)	2025.01.05

CSS : 이미지 넣기

'Programming > HTML+CSS+JavaScript' 카테고리의 다른 글

관련글

티스토리툴바