Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

AI와 데이터 사이언스의 이론과 실전

CSS - 배경 색 설정, 배경 이미지 삽입, 위치, 사이즈 조절 본문

HTML과 CSS/CSS

CSS - 배경 색 설정, 배경 이미지 삽입, 위치, 사이즈 조절

큐트아리 2023. 10. 18. 16:51

1. 무료 이미지 사이트 추천

이미지를 사용할 때 상업적 혹은 개인적으로 이용 가능한지 반드시 확인해야 합니다.

2. 배경 색 설정

  • background-color : HTML 요소의 배경색을 설정, 상속되는 요소

<코드 예시>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 배경1</title>
    <style>
        body { background-color: burlywood;}
        div { background-color: white; padding: 10px; width: 60%; border: 1px solid black; text-align: center; }
    </style>
</head>
<body>
    <h2>CSS 배경1</h2>
    <div>
        <h2>배경 적용하기</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis nisi numquam iste, illo molestiae assumenda alias maxime temporibus dolorum ab, pariatur sapiente illum ex quis eos voluptatibus culpa ducimus dolores.</p>
    </div>
</body>
</html>

<결과>

3. 배경에 이미지 삽입

  • background-image
    • HTML 요소의 배경으로 나타날 배경 이미지를 설정
    • 배경 이미지는 기본 설정으로 반복되어 나타남 
      background-image: url 파일 경로
  • background-repeat : 배경이미지를 수평이나 수직 방향으로 반복하도록 설정
    • repeat-x : 가로만 반복
    • repeat-y : 세로만 반복
    • no-repeat : 반복 안함

< 코드 예시 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 배경2</title>
    <style>
        div { 
            background-image: url(./Day2/images/birthday.png);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <h2>CSS 배경2</h2>
    <div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</body>
</html>

<결과>

 

  • background-position
    • 반복되지 않는 배경 이미지의 상대 위치를 설정
    • %나 px을 사용하여 상대위치를 직접 설정할 수 있음
    • 상대위치를 결정하는 기준은 왼쪽 상단
left top center top right top
left center center right center
left bottom center bottom   right bottom

 

  • background-position : 가로위치값 세로위치값 
    background-position : 10% 100PX​
     
  • background-attachment
    •  위치가 설정된 배경 이미지를 원하는 위치에 고정
    • viewport 위치에 고정하는 것으로 확대 축소를 해도 해당 자리를 유지
    • fixed라는 속성을 가지고 있음 

< 코드 예시 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 배경3</title>
    <style>
        body{
            background-image: url(./Day2/images/birthday.png);
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: fixed;
        }
        div {
            width: 60%; height: 300px; border: 3px dotted deeppink; 
            padding: 10px; margin-bottom: 20px; background-image: url(./Day2/images/birthday.png);
            background-repeat: no-repeat;
        }
        .bg1 { background-position: center bottom;}
        .bg2 { background-position: center;}
        .bg3 { background-position: 20% 100px;} /*왼쪽으로 20% 떨어진곳에 위에서 100px 떨어진 곳*/
    </style>
</head>
<body>
    <h2>CSS 배경3</h2>
    <div class="bg1">
        <h2>background-position 1</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus voluptatum saepe vitae id nobis! Ratione autem a blanditiis, accusamus ipsum eius voluptates error mollitia eos quos ipsa alias exercitationem cumque.</p>
    </div>
    <div class="bg2">
        <h2>background-position 2</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus voluptatum saepe vitae id nobis! Ratione autem a blanditiis, accusamus ipsum eius voluptates error mollitia eos quos ipsa alias exercitationem cumque.</p>
    </div>
    <div class="bg3">
        <h2>background-position 3</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus voluptatum saepe vitae id nobis! Ratione autem a blanditiis, accusamus ipsum eius voluptates error mollitia eos quos ipsa alias exercitationem cumque.</p>
    </div>
</body>
</html>

< 결과 >

  • background-size
    • 반복되지 않는 배경 이미지 크기를 설정할 때 사용
    • px, %, contain, cover
    • contain : 배경이미지의 가로, 세로모두 요소보다 작다는 전제하에 가능한 설정
    • 가로, 세로 비율은 유지한 상태로 요소내에서 최대사이즈로 확대
    • cover : 배경 이미지의 가로, 세로, 길이 모두 요소보다 크다는 전제하에 가능한 설정
    • 배경 이미지를 요소의 가로,세로,길이중에 하나에 맞게 축소해 배경이미지의 일부를 보여줌

< 코드 예시 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 배경4</title>
    <style>
        div {
            background-image: url(./Day2/images/birthday.png);
            background-repeat: no-repeat;
            width: 150px;
            height: 150px;
            border: 2px solid red;
            margin-bottom: 20px;
        }
        .background1 { background-size: 50px 100px;}
        .background2 { background-size: 500px 500px;
                        background-position: center;}
        .background3 { background-size: contain;}
        .background4 { width : 50px ; height: 100px; background-size:  cover; background-position: bottom center;}
    </style>
</head>
<body>
    <h2>CSS 배경4</h2>
    <div class="background1"></div>
    <div class="background2"></div>
    <div class="background3"></div>
    <div class="background4"></div>
</body>
</html>

< 결과 >

 

  • background: 배경 속성을 한꺼번에 적용
background: 파일위치 반복여부 위치 사이즈 ..... (순서상관X)

< 코드 예시 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 배경5</title>
    <style>
        html{
            background: no-repeat fixed center/cover url(./Day2/images/cat.jpg)  ;
        }
    </style>
</head>
<body>
    <h2>CSS 배경5</h2>

</body>
</html>

< 결과 >

 

'HTML과 CSS > CSS' 카테고리의 다른 글

CSS - display 속성, 폼 태그  (1) 2023.10.20
CSS - 박스 모델(내용, 패딩, 마진, 테두리) , 박스 사이징  (0) 2023.10.19
CSS - 텍스트 간격, 정렬, 효과, 설정, 글꼴 선택  (1) 2023.10.17
CSS - 선택자(전체, 요소, 상속, id, class, 그룹, 자식, 자손, 형제, 인접형제, 속성, 가상 선택자)  (0) 2023.10.16
CSS - HTML에 적용하는 법, 글씨 컬러 변경  (1) 2023.10.15
'HTML과 CSS/CSS' Related Articles more