-
[멋쟁이사자처럼] 실습 - foxFront-end 개발 2023. 7. 15. 21:13
목차
1. 실습 내용
2. 주요 태그 및 속성
3. 코드
1. 실습 내용
CSS 특강 내용을 바탕으로 아래 사항들을 고려하여 의도한 디자인으로 프론트엔드를 개발한다.
(1) 개발순서의 첫번째 : 큰 덩어리 레이아웃(Layout) 부터 짜는 것이다. (배경으로 구역을 파악하라)
(2) CSS 기본 속성 초기화
(3) 컨테이닝 블록 : 직계 부모 요소가 제공하는 컨텐츠 영역
(4) 속성의 초기값(Initail Value)
피그마 링크를 참조하여 HTML/CSS 코드를 작성하라
과제 이미지 2. 주요 태그 및 속성
2-1. <article>, margin: 50px auto;
2-2. <body> <div>, background-image: url(); background-size: cover; background-repeat: no-repeat;
2-3. <img> <h2> <p>, border-radius, border-bottom, padding
2-4. 결과물
실습 결과물이 좀 단조로워 보여서 제공된 이미지를 모두 사용해서 변형해 보았다.
실습 결과물 - 기본 
실습 결과물 - 변형 3. 코드
코드는 '실습 결과물 - 변형' 버전이다
기본 형태 또한 제일 하단의 Github 링크에 있으니 참고 바란다.
3-1. HTML
<!DOCTYPE html> <html lang="ko"> <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>Forest Zoo</title> <link rel="stylesheet" href="./style-1.css"> </head> <body> <article class="wrap"> <div class="animals"></div> <div class="main"> <img src="./images/green.png" alt="ground"> <div class="desc"> <h2>🎈Animal friends🎈</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec</p> </div> </div> </article> </body> </html>3-2. CSS
body, h2, div, p { margin: unset; } h2, p { font-family: Arial; } body { background-image: url(./images/bg.png); background-size: cover; background-repeat: no-repeat; } .wrap { width: 300px; margin: 50px auto; /* background-color: aquamarine; */ } .animals { width: 300px; height: 300px; background-image: url(./images/animal02.png), url(./images/animal03.png), url(./images/animal01.png), url(./images/animal04.png),url(./images/animal05.png), url(./images/animal06.png), url(./images/animal07.png), url(./images/animal08.png),url(./images/animal09.png); background-size: 150px 150px; background-repeat: no-repeat; background-position:75px 150px, 0px 150px, 150px 150px, 75px 95px, 0px 95px, 150px 95px, 65px 0px, 0px 0px, 150px 0px; } .main { background-color: #9C6035; border-radius: 0px 0px 30px 30px; border-bottom: 10px solid #46260E; } .desc { padding: 10px 20px; /* background-color: blue; */ } .desc > h2 { font-size: 28px; font-weight: 700; color: white; } .desc > p { font-size: 16px; font-weight: 400; color: #E8BC9C; padding-top: 10px; padding-bottom: 30px; }Github 링크
https://github.com/redcontroller/FrontendSchool7/tree/44ff3d26d46e703caea280cc5c53d882f58edcc2/fox
'Front-end 개발' 카테고리의 다른 글
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 스프린트 회고 1회차 (0) 2023.07.17 [멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 11일차 기록 및 복습 (0) 2023.07.17 [멋쟁이사자처럼] 회고 5조 - 스프린트 회고 (0) 2023.07.15 [멋쟁이사자처럼] 프론트엔드 스쿨 7기 - CSS 특강 (1) (0) 2023.07.14 [멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 선배 특강 (오전) (0) 2023.07.14