본문 바로가기
코딩

Adobe 웹사이트 클론 코딩 - 이미지와 텍스트

by KUROMI98 2025. 7. 25. 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>이미지 텍스트 레이아웃</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="section">
      <div class="half">
        <div class="textarea">
          <a href="www.naver.com" class="link"> 영상 생성 </a>
          <div class="title">새로운 방식의 영상 제작</div>
          <div class="description">
            2개의 스틸 이미지를 키프레임으로 사용하여 영상을 생성해 보세요.
            아이디어를 텍스트 프롬프트로 입력하여 영상을 만들 수도 있습니다.
            카메라 각도, 모션, 스타일을 선택하여 B롤을 생성하고, 시각 효과를
            만들고, 장면을 조정하는 것도 가능합니다.
          </div>
        </div>
      </div>
      <div class="half">
        <img src="1.webp" alt="이미지1" />
      </div>
    </div>
    <div class="section">
      <div class="half">
        <img src="2.webp" alt="이미지1" />
      </div>
      <div class="half">
        <div class="textarea">
          <a href="www.naver.com" class="link"> 영상 생성 </a>
          <div class="title">새로운 방식의 영상 제작</div>
          <div class="description">
            2개의 스틸 이미지를 키프레임으로 사용하여 영상을 생성해 보세요.
            아이디어를 텍스트 프롬프트로 입력하여 영상을 만들 수도 있습니다.
            카메라 각도, 모션, 스타일을 선택하여 B롤을 생성하고, 시각 효과를
            만들고, 장면을 조정하는 것도 가능합니다.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="half">
        <div class="textarea">
          <a href="www.naver.com" class="link"> 영상 생성 </a>
          <div class="title">새로운 방식의 영상 제작</div>
          <div class="description">
            2개의 스틸 이미지를 키프레임으로 사용하여 영상을 생성해 보세요.
            아이디어를 텍스트 프롬프트로 입력하여 영상을 만들 수도 있습니다.
            카메라 각도, 모션, 스타일을 선택하여 B롤을 생성하고, 시각 효과를
            만들고, 장면을 조정하는 것도 가능합니다.
          </div>
        </div>
      </div>
      <div class="half">
        <img src="3.webp" alt="이미지1" />
      </div>
    </div>
    <div class="section">
      <div class="half">
        <img src="4.webp" alt="이미지1" />
      </div>
      <div class="half">
        <div class="textarea">
          <a href="www.naver.com" class="link"> 영상 생성 </a>
          <div class="title">새로운 방식의 영상 제작</div>
          <div class="description">
            2개의 스틸 이미지를 키프레임으로 사용하여 영상을 생성해 보세요.
            아이디어를 텍스트 프롬프트로 입력하여 영상을 만들 수도 있습니다.
            카메라 각도, 모션, 스타일을 선택하여 B롤을 생성하고, 시각 효과를
            만들고, 장면을 조정하는 것도 가능합니다.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 64px;
  font-family: "Pretendard";
}
.section {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0px 100px;
}
.half {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.half img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.textarea {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
}
.link {
  color: black;
  font-size: 14px;
  font-weight: 600;
}
.title {
  font-size: 18px;
  font-weight: 700;
  padding-top: 8px;
  padding-bottom: 12px;
}
.description {
  font-size: 16px;
}

'코딩' 카테고리의 다른 글

움직이는 Skeleton UI 구현  (0) 2025.07.27
화면 너비에 따라 변하고 클릭 시 열리고 닫히는 메뉴 만들기  (0) 2025.07.26
HTML JS CSS에서의 media query  (0) 2025.07.24
HTML JavaScript CSS  (0) 2025.07.23
5월을 돌아보며........  (1) 2025.05.30

관련글

댓글

티스토리툴바