[새싹 프론트엔드] 1주차 - 4 CSS 배경 & 박스 속성
CSS 배경&박스 속성
배경 속성
| 속성 | 설명 |
| background-color | 배경 색상 지정 |
| background-image | 배경 이미지 지정 |
| background-size | 배경 이미지의 크기 지정 |
| background-repeat | 배경 이미지의 반복 형태 지정 |
| background-attachment | 배경 이미지의 부착 형태 지정 |
| background-position | 배경 이미지의 위치 지정 |
| background | 한 번에 모든 배경 속성 입력 |
background-image 예시)
| body { background-image : url(‘BackgroundFront.png’), url(images/‘BackgroundBack.png’); } |
중요!
/ : 폴더
. : 현재 위치(경로) 파일 - 점이 하나
.. : 부모폴더 ex) 202210 폴더
ex)
background-image: url("./images/apple.jpg") > 따옴표 꼭!
background-image: url("../images/spade-7.png");
background-image: url("../1017/images/back.png");
✔ 이미지 폴더 있을 때 경로 지정 해주기
✔ 사진명 쓸 때 따옴표 입력 꼭!!
(자료 복사할 때 따옴표가 다른 기호로 되어 있어 에러날때 있음 - 지우고 따옴표 다시 써주기)
background-repeat 속성
| 키워드 | 설명 |
| repeat | 이미지 반복 |
| no-repeat | 이미지 반복 안함 |
| repeat-x | X축 방향으로 이미지가 반복 |
| repeat-y | Y축 방향으로 이미지가 반복 |
주로 no-repeat 사용 - 디폴트 값이 repeat이기 때문
| body { background-image : url(‘BackgroundFront.png’), background-repeat : no-repeat; } |
background-attachment 속성
배경 이미지를 화면에 고정하는 속성
| 키워드 | 설명 |
| fixed | 배경 이미지를 화면에 고정 |
| scroll | 스크롤 시, 배경 이미지는 스크롤 되지 않음 |
scroll 예시)
<head>
<title>background-attachmen(scroll)</title>
<style>
body {
background-image: url("BackgroundFront.png"),
url("images/BackgroundBack.png");
background-size: 100% 250px;
background-repeat: no-repeat;
/* 스크롤을 내리면 그림 안보임 */
background-attachment: scroll;
background-position: 150px 15%;
}
</style>
</head>
<body>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
</body>
</html>결과
fixed 예시)
<head>
<style>
body {
background-image: url("BackgroundFront.png"),
url("images/BackgroundBack.png");
background-size: 100% 250px;
background-repeat: no-repeat;
/* 스크롤을 내려도 그림이 보임*/
background-attachment: fixed;
background-position: 150px 15%;
}
</style>
</head>
<body>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
<p>오늘 싸이버거 먹는당</p><p>오늘 싸이버거 먹는당</p>
</body>
</html>결과
background-position 속성
배경 이미지의 위치를 지정하는 속성
| 키워드 | 설명 |
| bottom | 배경 이미지를 아래쪽에 배치 |
| center | 배경 이미지를 중앙에 배치 |
| left | 배경 이미지를 왼쪽에 배치 |
| right | 배경 이미지를 오른쪽에 배치 |
| top | 배경 이미지를 위쪽에 배치 |
| X축 | X축 위치 지정 |
| X축 Y축 | X축 위치, Y축 위치 지정 |
X축 Y축 지정예시)
px, % 등 크기로 지정 가능
| background-position: 150px 15%; |
background 속성
배경을 꾸미는 여러 값을 한 번에 지정하는 단축 속성
color, image, position/size, repeat 순으로 값 지정
| div { background : skyblue url(“apple.jpg") center/100px repeat-y; } |
| div { background : skyblue; } /* 배경색을 skyblue로 설정 */ |
| div { background : url("apple.jpg"); } /* 배경 이미지 지정 */ |
background-position 속성
배경 이미지의 위치를 지정하는 속성
| 키워드 | 설명 |
| bottom | 배경 이미지를 아래쪽에 배치 |
| center | 배경 이미지를 중앙에 배치 |
| left | 배경 이미지를 왼쪽에 배치 |
| right | 배경 이미지를 오른쪽에 배치 |
| top | 배경 이미지를 위쪽에 배치 |
| X축 | X축 위치 지정 |
| X축 Y축 | X축 위치, Y축 위치 지정 |
X축 Y축 지정 방법 예시)
background-position : 0px 50%;
background 속성
- 배경을 꾸미는 여러 값을 한 번에 지정하는 단축 속성
- color, image, position/size, repeat 순으로 값 지정
- 값 1개만 지정하고 싶을 땐 그 값만 써도 상관X
박스 속성
웹 페이지의 레이아웃을 구성할 때 가장 중요함
박스 모델
| 속성 | 설명 |
| content | 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 |
| width | 영역의 너비를 지정 |
| height | 내용 영역의 높이를 지정 |
| padding | 내용과 테두리 사이의 간격, 눈에 보이지 않음 |
| border | 내용과 패딩 주변을 감싸는 테두리 |
| margin | 테두리와 이웃하는 요소 사이의 간격, 눈에 보이지 않음 |
- HTML 태그는 사각형 박스 형태
- 박스 크기, 배경색, 여백, 옆 박스와의 거리 등을 제어 가능함.
예) <div> 태그
※<div>영역의 박스 구성이 눈에 보이지 않지만, 실제로는 박스로 구성되어 있음
margin, padding 속성
<head>
<style>
div {
width : 100px;
height : 100px;
background-color : red;
border : 20px solid black;
margin : 10px;
padding : 30px;
</style>
</head>
<body>
<div></div>
</body>결과
display 속성
| 키워드 | 설명 |
| none | 태그를 화면에서 숨기기 |
| block | 태그를 블록 형식으로 지정 |
| inline | 태그를 인라인 형식으로 지정 |
| inline-block | 태그를 인라인-블록 형식으로 지정 |
* inline-block은 내가 잘 몰랐던 속성인데 인라인+블록의 요소를 둘 다 가지고 있다.
✔ inline 속성은 크기, 여백을 지정할 수 없다.
✔ inline-block 속성은 크기, 여백을 지정할 수 있다. (그러나 줄 바꿔서 개체를 위치시킬 수 없음)
이러한 display 속성을 이용하여 div를 inline 속성으로 a태그를 block 속성으로 바꿀 수 있음.
visibility 속성
HTML태그를 숨길 것인지 출력할 것인지 지정
| 키워드 | 설명 |
| visible | 태그가 보임 |
| hidden | 태그에 출력 공간을 할당하고, 보이지만 않음 |
<head>
<style>
span {
visibility : hidden;
}
</head>
<body>
<h3>다음 빈 곳에 숨은 단어는 무엇일까요?</h3>
<hr/>
<ul>
<li>I (<span>love</span>) you.
<li>CSS is Cascading (<span>Style</span>) Sheet.
<li>다음 배울 과목은 (<span>JavaScript</span>)입니다.
</ul>
</body>
※ display:none과 visibility:hidden의 차이점
display:none은 아예 사라지게 함 (영역도 사라짐 - 컨텐츠의 공간도 제거)
visibility:hidden은 숨겨서 보이지만 않게 함 (영역은 남김 - 컨텐츠의 공간은 남김)
box-shadow 속성
박스 전체에 그림자 효과를 적용
| box-shadow : h-shadow v-shadow blur-radius spread-radius color |
| 키워드 | 설명 |
| h-shadow, v-shadow | 원본 박스와 그림자 박스 사이의 수평, 수직 거리(필수) |
| blur-radius | 흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이 |
| spread-radius | 그림자 크기(디폴트 0) |
| color | 그림자 색 |
<head>
<title>boxshadow</title>
<style>
.redBox {
box-shadow: 10px 10px red;
}
.blurBox {
box-shadow: 10px 10px 5px skyblue;
}
.multiEffect {
box-shadow: 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
div {
width: 150px;
height: 100px;
border: 10px solid lightgray;
background-image: url("apple.png");
background-size: 150px 100px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3>박스 그림자 만들기</h3>
<hr />
<div class="redBox"></div>
<div class="blurBox"></div>
<div class="multiEffect"></div>
</body>결과
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 N주차 블로그 포스팅