[프로젝트] 따라하며 배우는 코딩 2 - 카드(div) 만들기

https://www.airbnb.co.kr/

▲ 예제 사이트

<카드를 만들 경우 !>

div 안에 이미지 박스 + 텍스트 박스(span)

> Note 

 Style 처음에는 직접적인 css 대신 포괄적으로 주어야 나중에  수정이 편리

font-weight 

- 폰트 굵기

li 

- 흰색 박스

#ddd 

- 자주쓰는 검은색

border-radius 

- 둥그런 테두리

shadow  

- 그림자 넣기

>Note 크롬창에서 돌리면 변화되는 모습을 보기 편하다.

a 

- 클릭 url 연결 가능태그

>Note 

a + inline display 설정시 어디를 눌러도 클릭 되게 끔 힘을 줄수 있다.

>Note 

이미지에 height를 주면 자동으로 div 가 힘이들어감( a태그에 width를 주어야함)

>Note 

a태그 안의 span 태그에 색을 지정하면 클릭시에도 색이 변하지 않음

 >> Note 

기본 스타일에 text-decoration 없애주면 나중에 편리

이미지에 radius 넣어주면 한쪽만 둥그런 이미지 만들 수 있다.

사진과 이미지 사이에 패딩(or 마진)을 줘서 사이 띄우기

ul 구조 

 - background : strong태그 + span 태그