상세 컨텐츠

본문 제목

웹 페이지 만들기 섹션 2 마무리 작업

Html, Css, JavaScript 기초공부

by hongga 2021. 12. 14. 10:00

본문

안녕하세요 홍 가입니다.

오늘은 섹션 꾸미기 2탄을 진행을 하려고 합니다. 

여기까지 했었는데 오늘은 이 밑에 부분을 채워보려고 해요

 

이런 식으로 사진과 사진 옆에 글을 넣어서 여기에 대해 소개를 하는 식으로 만들어 보았습니다. 

저는 카페 블루 레이크 충청수영 객사 보령 우유 창고 이 3개를 넣을 거기 때문에 

이제 섹션은 다 만들었으니까 밑에 부분과 마무리 작업을 해보려고 해요. 

저는 background-image를 사용하여 만들어 봤어요

이런 식으로 글자 넣고 색도 넣어주고 하니 좀 나아진 거 같아요

한 개는 사진 사이에 글을 넣어봤고요 다른 한 개는 이미지에 글자를 넣어봤어요.

이게 최종인데 여러분은 어떤 게 더 나은가요? 

footer부분은 맨 마지막 부분을 뜻하며 

flex는 평소 1로 주지만 저렇게 글자를 나눌 때  flex는 총 12라는 것을 생각하여 나누어 주시면

저렇게 사용하실 수도 있으세요.

앞으로 이런 식의 웹페이지를 만들어 보려고 합니다.

다음에는 JS를 추가하여 이벤트 사용 및 반응형 웹페이지를 만들어 보겠습니다. 

관련글 더보기