HTML/CSS 그림위에 글씨올리기 박스올리기

HTML_CSS

by 헬로제이콥 2024. 11. 15. 17:49

HTML과 CSS를 사용하여 이미지 위에 텍스트를 올리고, 텍스트를 감싸는 박스를 추가하는 방법에 대해 알아보겠습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

     <div class="main_image">
      
       <img src="./images/dish1.jpg">
       <h1> 헬로우 글씨</h1>
       <div class="box"></div>

     </div>
  
</body>
</html>

CSS


/* 이미지를 담을 주요 컨테이너 */
.main_image {
    /* 이미지의 너비를 800픽셀로 설정 */
    width: 800px;
    /* 자식 요소들의 위치를 상대적으로 설정하기 위한 기준 */
    position: relative;
}

/* 박스 스타일 */
.box {
    /* 부모 요소를 기준으로 절대적인 위치에 배치 */
    position: absolute;
    /* 박스의 상단을 이미지 상단에서 30픽셀 아래에 위치 */
    top: 30px;
    /* 박스의 왼쪽을 이미지 왼쪽에서 15픽셀 오른쪽에 위치 */
    left: 15px;
    /* 박스의 배경색을 갈색으로 설정 */
    background-color: brown;
    /* 박스의 너비를 200픽셀로 설정 */
    width: 200px;
    /* 박스의 높이를 200픽셀로 설정 */
    height: 200px;
    /* z-index를 3으로 설정하여 다른 요소 위에 겹쳐지도록 함 */
    z-index: 3;
}

/* 제목 스타일 */
h1 {
    /* 부모 요소를 기준으로 절대적인 위치에 배치 */
    position: absolute;
    /* 제목의 상단을 이미지 상단에서 150픽셀 아래에 위치 */
    top: 150px;
    /* 제목의 왼쪽을 이미지 왼쪽에서 150픽셀 오른쪽에 위치 */
    left: 150px;
    /* 제목의 글자 크기를 30픽셀로 설정 */
    font-size: 30px;
    /* 제목의 색상을 특정 RGB 값으로 설정 */
    color: rgb(74, 28, 123);
    /* z-index를 2로 설정하여 박스 아래, 이미지 위에 겹쳐지도록 함 */
    z-index: 2;
}

전체적인 구조

main_image div 안에 이미지, 제목, 박스가 포함되어 있습니다.
CSS 파일 (별도로 작성해야 함)에서 .main_image, h1, .box 클래스에 스타일을 적용하여 이미지와 텍스트의 위치, 크기, 색상 등을 조절할 수 있습니다.

이 코드는 이미지 위에 텍스트와 박스를 겹쳐서 배치하는 기본적인 구조를 제공합니다.

'HTML_CSS' 카테고리의 다른 글

다음 줄로 넘어가지 않고 "..."으로 표시되도록 하는 방법 (0)	2024.12.23
CSS Position (relative, absolute) (0)	2024.12.06
HTML/CSS 초보자를 위한 홈페이지 제작 가이드 (1)	2024.11.15
CSS Grid (0)	2024.11.12
CSS Flexbox (0)	2024.11.12