📌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 축으로 세로로만 이미지가 보여짐
- 출력 결과 -
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
배경 이미지, 이미지의 반복되지않음 을 동일하게 적용 시켜준다.
- 각각의 이미지의 보여지는 방향? 을 입력하였다.
- 출력 결과 -
세개의 박스 안에 원하는 이미지와, 지정한 이미지의 위치가 나타나는 것을 볼수 있다.
3. 배경은 그대로 , 스크롤할때 텍스트만 움직이는
- 입력 코드 -
- 마우스를 스크롤 하면 움직이는게 보일 정도로의 p 태그 안에 텍스트를 넣어준다.
- 스타일 코드 -
<style>
body{
background-image: url(./img/seagulls-gf2da951c2_640.jpg);
background-attachment: fixed;
color: #fff;
background-repeat: no-repeat;
background-size: cover;
}
</style>- 배경이 꽉 채워지게 cover을 넣고
텍스트 컬러를 흰색 , 그리고 배경 사진이 움직이지 않게 고정 시켰다.
- 출력 결과-
스크롤 하는 모습을 여기다가 어떻게 쓸지는 몰라서 일단 사진만 첨부 했다.
- 결과는 이렇게 나왔고 저 코드를 입력하면 스크롤 하면서 텍스트는 내려가고, 이미지는 고정되어 있는 것을 볼수 있다.
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 번째 마진의 값이 들어간것이 보인다.
'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 |
댓글