개발자의 여정에 열정을 더하다.

Class/Frontend

[프론트 엔드 DAY05]

열정코딩 2022. 4. 27.

목차

📌CSS  background 에 쓰이는 용어 정리 📌

background-color  HTML 요소의 배경색 설정
background-repeat 배경이미지를 수평이나 수직 방향으로 반복하도록 설정
        (repeat, repeat-x, repeat-y, no-repeat(반복안함))
background-image HTML 요소의 배경으로 나타날 배경 이미지를 선택
        배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남
ex) background-image: url("이미지파일 경로");
 background-position 반복되지 않는 배경 이미지의 상대 위치를 설정
        %나 px을 사용하여 상대위치를 정할 수 있음
        상대위치를 정하는 기준은 해당 요소의 왼쪽 상단
    background-attachment 위치가 설정된 배경 이미지를 원하는 위치에 고정
고정 된 배경 이미지는 스크롤과 무관하게 화면 위치에서 이동되지 않음
        fixed   
 cover         배경이미지의 가로 세로 모두 요소보다는 크다는 조건 하에
     가능한 이미지를 작게 설정 = 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음

            ex) div크기가 300x300이라면 300x300보다 크다는 조건하에 꽉 채워줄 수 있다
                =>이미지가 요소보다 크면 이미지 일부만 보이기 때문
 background-size 배경 크기를 설정    /    px, %을 사용
  contain 배경 이미지의 가로 세로 모드 요소보다는 작다는 조건 하에
      가능한 이미지를 크게 설정 = 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
background 경로, 반복여부, 위치, 속성(fixed) / 사이즈

 

 

1. 배경에 이미지 넣기 

 

- 이미지를 만들곳에 (div) 구역을 정해주고  class 이름을 img로 정해주자 

이미지 위에 넣어줄 의미없는 글자가 표시되게 하는  lorem을 넣어준다. 

 

- 입력 코드 - 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS배경1</title>
    </head>
<body>
    <h2>CSS배경1</h2>
   

    <div class="image">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Soluta nesciunt officiis, vel corporis doloribus consequuntur 
         perspiciatis ducimus. Itaque, tenetur temporibus! Nemo hic,
          quo amet cum praesentium eum a? Sapiente, quis!
    </div>
</body>
</html>

 

- 스타일 입력- 

 

  <style>
      

        .image{
            height: 600px;
            background-image: url(./img/seagulls-gf2da951c2_640.jpg);
            background-repeat: repeat-y;
        }
    </style>

- 클래스 이름값인 . image 를 태그해주고 

넓이 사이즈는 600px 

사진의 경로 ( 이전폴더/폴더이름/파일이름)  을 써준후 

y 축으로 세로로만 이미지가 보여짐 

 

 

- 출력 결과 - 

[프론트 엔드 DAY05]

 

 

 

2. 3개의 박스안에 이미지 넣기 

- 3개의 박스안에 이미지를 넣기 위해서 

각각의 div class 이름을 지정해준다. 

( big1, big2, big3) 로 지정해줌.  사진이 잘보이게 하기 위해 무의미한 텍스트 <p>태그 안에

입력해줌.

 

- 입력 코드- 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS배경2</title>
</head>
<body>
    <h2>CSS배경2</h2>
    <div class="bg1">
        <h2>background-position1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Consectetur earum exercitationem recusandae et assumenda blanditiis 
             facilis autem.
              Nesciunt quo, nihil necessitatibus aperiam veniam, laboriosam enim, 
              commodi facilis neque praesentium eligendi?</p>
    </div>

    <div class="bg2">
        <h2>background-position2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Consectetur earum exercitationem recusandae et assumenda blanditiis 
             facilis autem. Nesciunt quo, 
             nihil necessitatibus aperiam veniam, laboriosam enim,
              commodi facilis neque praesentium eligendi?</p>
    </div>

    <div class="bg3">
        <h2>background-position3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Consectetur earum exercitationem recusandae et assumenda blanditiis 
             facilis autem. 
             Nesciunt quo, nihil necessitatibus aperiam veniam, laboriosam enim, 
             commodi facilis neque praesentium eligendi?</p>
    </div>
</body>
</html>

 

- 스타일 코드- 

 
<style>
        div{
            width: 60%;
            height: 200px;
            border: 3px dotted deeppink;
            padding: 10px;
            background-image: url("img//jeju.jpg");
            background-repeat: no-repeat;
        }

        .bg1{
            background-position: right bottom;
        }

        .bg2{
            background-position: center;
        }

        .bg3{
            background-position: 10% 10%;
        }
    </style>

- 전체적인 div 태그 안에 크기, 높이, 테두리 3px의 크기인 도트 핑크를 넣어주고 두께는 10px 

배경 이미지, 이미지의 반복되지않음 을 동일하게 적용 시켜준다. 

-  각각의 이미지의 보여지는 방향? 을 입력하였다. 

 

 

- 출력 결과 -

세개의 박스 안에 원하는 이미지와, 지정한 이미지의 위치가 나타나는 것을 볼수 있다.

[프론트 엔드 DAY05]

 

3. 배경은 그대로 , 스크롤할때 텍스트만 움직이는  

 

 

- 입력 코드 - 

- 마우스를 스크롤 하면 움직이는게 보일 정도로의  p 태그 안에 텍스트를 넣어준다.

[프론트 엔드 DAY05]

 

- 스타일 코드 - 

 <style>
        body{
            background-image: url(./img/seagulls-gf2da951c2_640.jpg);
            background-attachment: fixed;
            color: #fff;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>

- 배경이 꽉 채워지게 cover을 넣고 

텍스트 컬러를 흰색 , 그리고 배경 사진이 움직이지 않게 고정 시켰다. 

 

- 출력 결과- 

스크롤 하는 모습을 여기다가 어떻게 쓸지는 몰라서 일단 사진만 첨부 했다. 

[프론트 엔드 DAY05]

- 결과는 이렇게 나왔고 저 코드를 입력하면 스크롤 하면서 텍스트는 내려가고, 이미지는 고정되어 있는 것을 볼수 있다. 

 

4. 패딩 / 마진 (  중요한것...★)

 

< 박스모델>
    모든 HTML 요소는 네모난 박스모양을 구성되어있다 = 박스모델
    박스모델은 HTML 요소를 내용(contents), 패딩, 테두리, 마진 구분함

 <패딩>
    박스모델의 내용과 테두리 사이의 간격(안쪽 여백)

    CSS속성: a b c d (위, 오른쪽, 아래, 왼쪽 ) - 시계방향

    CSS속성: a b c (위, 아래, 양옆)

    CSS속성: a b (위/아래, 양옆) // 0 auto

    CSS속성: a (전방향)
    [마진,패딩]
 

- 마진, 패딩에 위치를 지정해줄수 있음 -
    margin/padding-top, right, bottom, left - 방향 : a
    ex)margin-left:10px;

 <테두리>
    박스모델의 내용과 패딩 주변을 감싸는 테두리
    border: width style color
    ex) border: 3px solid/dotted #000;

    따로 부여 가능
    border-style:, border-color:, border-widt:h

 <마진>
    테두리와 이웃하는 요소 사이의 간격
    마진은 눈에 보이지 않음

 

 

- 코드 입력 - 

-  패딩과 마진을 보기위해 각각의 박스 안에 <p> 안 텍스트를 넣어 주자 . 각각의 id 네임 부여 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>패딩</title>
    </head>
<body>
    <p id="ex1"> Lorem ipsum dolor sit amet <span id="side">onsectetur</span>c adipisicing elit. 
    Adipisci assumenda consequatur expedita necessitatibus aut ipsam suscipit sed? Autem nesciunt harum nulla quod ratione?
    Quod ad at nulla aperiam quidem officia.</p>
    
    <p id="ex2"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat corporis tempora voluptatibus quod officiis? 
    Nobis excepturi autem fugit asperiores amet ea dignissimos sit repellendus porro, modi officiis? Magnam, sapiente nam.</p>
    <p id="ex3"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit perferendis minus dicta.
    Itaque vel nobis dicta natus vero enim quas neque placeat praesentium, voluptate, incidunt optio ratione molestias perferendis eveniet.</p>
    
    <p id="ex4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur libero neque voluptates sit sunt veritatis quisquam soluta nulla,
    eum architecto consequatur.
    Aliquam quos autem suscipit earum saepe numquam deserunt repellat.</p>
    
    <p id="ex5"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, eum officia! Eius praesentium mollitia dignissimos corrupti provident sunt, accusantium pariatur.
    Dicta error vel blanditiis qui nobis vero doloremque magni deleniti.</p>
    
</body>
</html>

 

 

- 스타일 코드 입력- 

 

  <style>
        p{
            border: 3px solid #000;
        }
        #ex1{
            padding: 10px;
        }
        #ex2{
            padding: 20px;
        }
        #ex3{
            margin: 20px;
        }
        #ex4{
            margin-top: 30px;
        }
        #side{
            margin-left: 30px;
        }
    </style>

- 전체적인 p태그에 테두리 크기 3px 을 만들어 준다. 

-  각각의 이름값  안에 마진과 , 패딩의 값을 넣어준다 .

 

 

- 출력 결과 -

1.2 번쩨 패딩의 값과

3.4 번째 마진의 값이 들어간것이 보인다. 

[프론트 엔드 DAY05]

 

'Class > Frontend' 카테고리의 다른 글

[프론트 엔드 DAY07]  (1) 2022.05.09
[프론트 엔드 DAY06]  (0) 2022.05.02
[프론트 엔드 DAY04-1]  (0) 2022.04.27
[프론트 엔드 DAY04]  (1) 2022.04.26
[프론트 엔드 DAY03- 2]  (0) 2022.04.25

댓글

티스토리툴바