Print# LandingPage Project

Preview :

사이트 방문 : 

https://hopeful-bartik-7f11bd.netlify.app/#

개발목표 :

인쇄소 홈페이지를 의뢰받아 제작한다는 컨셉으로 구현하였습니다. 지금까지 공부한 HTML, CSS, Javascript를 사용하여 이해도를 높이고 실제로 웹페이지 제작시 어떻게 사용되는지를 익히는데 집중하였습니다. 대부분의 코드에 주석을 달아 다시 코드를 참고할 수 있도록 하였고 새롭게 배운 내용은 블로그에 기록하였습니다.

구현기간 :

2021-05-10 ~ 2021-05-24

Skills :

HTML, CSS ( SCSS ), JavaScript

배포 :

Netlify

시연영상 :

https://youtu.be/uxzyqD7RBCc

Code :

https://github.com/bellcastle88/PrintShopLandingPage

공부한 내용 :

SCSS

Sass 포맷으로 만들어진 파일을 CSS로 컴파일하여 사용한다

코드의 중복을 줄여준다

변수를 사용할 수 있기 때문에 유지보수가 쉬워진다

 

 

Semantic Tag

시맨틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.

• non-semantic 요소들의 예: <div>와 <span> - 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.
• semantic 요소들의 예: <form>, <table>, <article> - 자신의 컨텐츠를 명확하게 정의한다.

 

 href="#"

• #을 넣어주면 링크 비워두기 +  클릭시 화면이 리로드 되지 않는다

 

ul

 : Unoerdered List 의 약자로 순서가 없는 목록이다

글머리 기호를 붙혀서 목록을 만드는 형식이다

 

ol

: Ordered List 의 약자로 순서가 있는 목록이다

번호 형식으로 순서를 매겨 목록을 만드는 형식이다

 

BlockQuote

인용구를 쓸 때 사용되는 요소이다

BlockQuote는 ‘영역’이라는 의미를 가지는 ‘Block’과 ‘인용’이라는 의미의 ‘Quotation’의 동사 ‘Quote’가 합쳐진 형태이다

 

Cite

인용글이나 참조글의 제목이나 출처를 이탤릭체로 표시.

 

Input id / label for

<label for>과 <input id> 값을 일치 시킬 경우 편리하게 이용할 수 있다

for의 값과 id 값을 일치시킨 경우, 텍스트 부분을 클릭해도 클릭이 된다

 

 

Google Map 가져오기

구글맵에 접속해 Share -> Embed a map 을 Copy해서 아래처럼 코드에 붙여넣는다

 

 

구글폰트

구글에서 폰트 url을 복사해 css파일에 붙여넣어준다.