상세 컨텐츠

본문 제목

Week I learned 1주차

개발일지

by ZINO 2022. 2. 23. 17:19

본문

반응형

코딩에 대한 아무런 개념이 없던 저는 [왕초보] 웹 개발 강의 3일 차 (2/21~2/23)인 지금 1주 차 강의를 끝냈습니다.
아직 배울게 많고 갈길이 멀지만 친절하고 쉽게 설명해주신 덕분에 코딩에 '코' 자도 모르던 제가
간단한 홈페이지를 만들어 봤습니다.

쇼핑몰 홈페이지 (로얄 살루트 이미지 출처: https://t1.daumcdn.net/cfile/tistory/998A65335A07F4162F)

우선 기본적인 틀을 만들기 위해서 저는 제가 이미지를 넣을 것인지 배경은 어떻게 할 것인지에 대해
초안을 만들어보고 width, height, margin 등을 이용하여 크기와 위치를 조절했습니다.

이미지를 삽입하기 위해서는 background-image: url()을 사용하는데
가운데에 맞추기 위해 size는 cover;를 사용하였고 position은 center;를
사용했습니다.

Select

이미지를 넣었다면 이제 주문하는 창을 만들어야 하는데 기본적인 틀은
부트스트랩을 통해 만들었습니다.

그리고 select과 option을 이용해 색상과 수량의 디테일을 만들었습니다.
또한, 글씨체는 *을 사용하여 구글 폰트를 통해 다양한 글씨체를 구사할 수 있으니
참고하시면 좋을 것 같습니다.
(예시: title과 style 사이에 link href=""을 넣은 후 style에 *을 이용하여 {} 안에 폰트를 넣어 주시면 됩니다.)

첫 주차 강의를 들으면서 ctrl+a와 ctrl+alt+L을 통해
코딩한 것을 정리하는 것과 div를 통해 문단을 나누는 것이 정말 중요하다는 것을
느꼈습니다.

(+ 에러 해결하는 방법)
오른쪽 상단에 보시면 빨간색 에러가 뜨는데 그것을 클릭 후
"problem:"에서 뭐가 문제가 있는지 파악 후에
오류를 수정해 주시면 되겠습니다!

수정 후 아래 보시는 바와 같이 에러(빨간색 표시)는 사라진 것을 볼 수 있습니다.


여기서 첫 주차 개발일지를 마치겠습니다.
긴 글 읽어주셔서 감사합니다.

반응형

'개발일지' 카테고리의 다른 글

Week I learned 5주차  (0) 2022.03.05
Week I learned 4주차  (2) 2022.03.04
Week I learned 3주차  (0) 2022.02.28
Week I learned 2주차  (0) 2022.02.26

관련글 더보기

댓글 영역