코딩네컷 스타일링

박신영·2023년 4월 12일

플젝

인생사진 코딩네컷 프로젝트

목록 보기

4/5

🔶사이트 배경 이미지 다운로드

배경 이미지
우선 배경을 다운받아서 vscode에 가져오기(드래그해서 explorer에 갖다두면 됨)

🔶body 태그 스타일링

body는 웹페이지 전체인 몸통 부분을 의미함!
style 부분에 body 태그를 스타일링

/* body태그 자체에 css 요소 부여 */
body {
	font-family: "LeeSeoyun";
	margin: 0;
	display: flex;
	justify-content: center;
	background-image: url("./background.png");
}

→ 1줄 웹페이지에서 사용할 폰트 정의(윗부분에 정의해둠)
→ margin은 영역 밖에 뭔가를 남길 것인지? 약간 여백 생각하면 될듯
↳ 이 프로젝트에는 없는게 나을듯,, 0으로 해서 제거
→ 3-4줄은 가운데 정렬부분 유연하게 바꿀건데 정렬은 가운데로 하는 것을 의미
→ 5줄은 index.html 기준으로 같은 폴더 안에 있는 backgroud.png를 가져오라는 뜻)

결과는??

🔶코딩네컷 안의 영역 스타일링

1. 메인영역 스타일링

div로 나눈 메인 영역을 class로 선택했음(container)
container class를 css 선택자로 잡아서 스타일링

css 선택자는 .클래스명 으로 잡으면 됨

/* 너비는 390픽셀, 배경색이 좀 필요하고 부모(body) 높이 전체 */
.container {
		width: 390px;
		background-color: #ff9d73; #주황과 비슷한 색
		height: 100%;
}

→ 390픽셀은 핸드폰의 너비와 비슷한 정도
→ container을 둘러싸고 있는 body 태그의 높이 만큼을 차지

2. 사진영역 스타일링

image 1,2,3,4 전체를 포함한 'photos' class들 스타일링
일단 지금까지는 너무 위쪽에 붙어있으니까 위에 여백을 좀 넣어주자
```
 /* 위로 여유 30픽셀 정도 만들자 */
.photos {
	margin-top: 30px;
}
```
결과 :

3. 사진 각각에 대한 스타일링

photo-frame class를 의미

/* 배경은 알아보기 쉽게 흰색으로, 좌우 마진은 20픽셀 */
/* 상하 마진은 15픽셀로, 높이는 각 사진마다 200 픽셀로!*/

.photo-frame {
	background-color: white;
	margin: 15px 20px;
	height: 200px;
}

결과: (완전 거의 완성된것만 같은..!!)

🔶코딩네컷 하단 부분 스타일링

footer class 선택자를 통해 스타일링

글씨가 왼쪽으로 치우쳐져 있으니까 유연하게 만들어서 가운데로 가져오자
```
.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
   }
```
- flex-direction을 column으로 잡아주면 위아래로 겹겹이 쌓인 애들이 그대로 유지될 수 있도록!
  - [cf]flex-direction: row;를 사용하면 양옆으로 놓이게 됨
- 나머지를 가운데로 묶어달라는 의미로 가운데 정렬해달라는 말

footer title와 date 스타일링

.f-title {
  	  color: white;
   	 font-size: 25px;
  	  font-weight: 900;
	}
.f-date {
   	 color: white;
   	 font-size: 15px;
   	 font-weight: 500;
	 }