웹 & 프론트엔드 기본
저번 주 피로가 너무 쌓인 나머지 일과를 마치고 집에 와서 뻗어버렸다. 블로그를 당일 날 못 쓰고 잠든 것이 아쉬울 뿐이다. 아침에는 교회에 가서 예배를 드린 후 PBS 나눔 시간이 있었다. 말씀 나눔을 통해 매 순간 반성하고 번복하는 모습을 말하면서 부끄러움이 많았다. 나 자신이 잘하고 있다는 생각을 못 하고 있기 때문이다. 이러한 이유로 하루만 넘어지면 그 자리서 주저앉고 말아버리는 모습을 종종 비추곤 하였으며 그 계기로 다음 날은 언제나 주님 앞에 회개 기도를 드리곤 한다. 이런 모습이 번복되면 안 되는데 하면서도 하는 나를 나타내고 있다. PBS 나눔 이후 가볍게 칼국수를 호로록 흡입하고 이후 일정은 신나게 보드게임을 즐기게 된다. 심플하면서도 신속한 게임들이 주를 이루었지만, 결과는 참패라고 해야 할 것이다. 게임의 욕심이 없어진 건지 승리를 하겠다 임하는 각오가 덜 하다 보니 당연시되게 패배를 하고 말았다. 저녁 타임이 되자 소고기 뷔페 집을 가서 배불리 먹고 말았다. 강남에 있는 식당이었으며 가격은 나름 비싼 편이지만 맛있었으니 다행인 것 같다. 그 이후 일과는 시작에 적었듯 컴퓨터도 안 켜고 TV도 안 켜고 뻗어 버린 게 전부다.
CSS
속성 - 배경
index.html
<!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>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="item">web</div>
<div class="item">mobile</div>
</div>
</body>
</html>main.css
.container .item {
width: 200px;
height: 100px;
background-color: yellowgreen;
margin: 10px;
background-image: url(https://url);
background-size: 80px;
background-repeat: no-repeat;
background-position: bottom center;
}
.container .item
- width: 200px (가로 속성)
- height: 100px (세로 속성)
- background-color: yellowgreen (배경 컬러 속성)
- margin: 10px (마진 속성)
- background-image: url(https://url) (배경 이미지 속성)
- background-size: 80px (배경 이미지 사이즈 속성)
- background-repeat: no-repeat (배경 이미지 영역 반복 속성)
- background-position: bottom center (배경 이미지 위치 속성)
오늘은 CSS 속성 배경에 대해 학습해보는 시간을 가졌다.. 배경 사이즈를 먼저 정한 후, 배경 컬러를 선택하였다. 이후에는 간격 조정 후 배경을 삽입하여 배경이 어디 위치에 있는지 배경 사이즈는 몇으로 해야 하는지 여러 군데 다 뿌려야 할지 부분 설정을 진행하면서 테스트를 진행할 수 있었다. 강의를 살펴보면서 블로그에 메인 favicon을 활용하여 실습하면서 나름대로 학습에 열의를 올릴 수 있었다. 내가 원하는 이미지와 색상을 제대로 찾기란 쉽지가 않았지만, 더 연습해서 깔끔하게 나왔으면 하는 바람이 클 뿐이다.
91일 차는 여기서 마무리하고자 합니다.
패스트캠퍼스 링크 :https://bit.ly/37BpXi
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
'FastCampus > 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.' 카테고리의 다른 글
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 93일차 (0) | 2021.12.07 |
|---|---|
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 92일차 (0) | 2021.12.06 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 90일차 (0) | 2021.12.04 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 89일차 (0) | 2021.12.03 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 88일차 (0) | 2021.12.02 |
댓글