WeBucks 페이지 클론 프로젝트 Mission 4,5 완료 상세 페이지 레이아웃 & 기능 구현 메뉴 상세페이지 ![](https://images.velog.io/images/goomg93/post/a1f27ec0-04e1-48ae-9cbe-4afc1b782873/

WeBucks 페이지 클론 프로젝트 Mission 3 완료 커피 리스트 페이지 레이아웃 구현 - 커피 리스트 페이지 flex로 리스트 레이아웃을 구성하려고 했는데 양 사이드에 여백을 없게하면서 동시에 마지막 줄에 리스트가 왼쪽 정렬되게 하는 방법을 못 찾았다.

css 속성중에 마우스가 올려졌을때의 특수한 상황을 나타내주는:hover\` 의 기능을 공부해 볼 수 있었고opacity를 통해서 투명도를 주는 방법을 공부해 볼 수 있었다.추가로 :hover 기능을 이용해서 하트상자에 마우스를 올렸을때 색깔이 변하는 것도 구성해 보았

weegle 검색바 만들기 html 과 css 를 활용해서 처음으로 결과물을 만들어봤다. 간단하지만 레이아웃에서 배운 flex를 직접 사용해 볼 수 있었고 아이콘을 무료로 이용하는 font Awesome을 이용하는 방법도 공부해 볼 수 있었다. html 코드 s

position position 속성값 static : 디폴트 값, 문서의 흐름에 따라 흐름에 맞게 위치 relative : static 위치를 기준으로 이동할 수 있게 하는 속성값 absolute : static 값이 아닌 부모 or 조상요소를 기준으로 이동할 수 있

p.item (class가 item인 p 태그)p .item (p 태그 안에 있는 class가 item인 태그)자식 태그는 띄어쓰기로 구분한다.위에 코드 처럼 띄어쓰기로 구분하여 여러개의 값을 class에 부여할 수 있다.div안에 있는 이미지의 크기는 div의 크기만

<태그이름>내용</태그이름>안녕하세요! 김코드입니다.span 태그는 줄이 바뀌지 않는다.문단을 넣을때 주로 사용하는 태그p 태그는 줄이 바뀐다.줄바꿈 태그self closing 태그이다.안녕하세요김코드입니다.href 속성(attribute)을 사용하여 링크를