* 완성 *
1) HTML 구조
2) 초기화 : margin & padding 0 , clearfix ( 보통 float 이 들어갈땐 대부분 필요하다)
3) 배경화면 : 전체가 해당하므로 body에 적용한다.
- background-repeat : no repeat; : 원래 기본적으로는 사이즈를 다 차지할때 까지 여러개가 나온다.. no-repeat을 하면 한개만 나오게 된다 .
- background-size : cover; : 이미지가 영역 전체를 차지한다.
* container 는 딱히 사용되는게 없다.
4) 내용 배경(section)
- padding : 안의 간격. 기존의 넓이에서 추가됨
- margin : 밖의 간격.
(-> 상하 좌우 순대로이다)
- auto : 자동으로 간격이 가능한 부분을 반반 나눠줌
- border-radius : 모서리를 깎아주는것
5) 투명도
* 기존의 알고 있던 투명도 opacity (0~1)
: 태그자체가 투명해 지기 때문에 글씨도 투명해진다.
* rgba를 이용한 투명도
( a가 투명도. 0~1)
: 배경색만 바뀌므로 글씨는 선명하다.
6) 사진 넣기 ( Image Splite (IS))
** 내가 사용한 IS를 위한 이미지 **
(1080*170px) / 구글 이미지검색
- IS를 위한 이미지를 보고 크기를 정한다.
- 옆에 올 글씨와의 간격을 위해 margin-right
- 레이아웃을 위해 float : left;
7) IS를 통해 이미지 바꾸기
8) 문단설정
- p의 현재 영역
: 글씨가 잘 보여서 영역이 사진(div) 옆에서부터처럼 보이지만 사진 (div)은 float이기 때문에 p는 그 아래에 깔려있다. 안의 content만 보일 뿐
-> p에 float을 주어 겹치지 않게 한다
안의 내용이 다 float 되었기 때문에 section 이 높이를 잡지 못한다. section 의 class에 clearfix 추가
- p가 줄바뀜이 되었기 때문에 width 조정
960px(section)-270px(image)-20px(.travel의 margin-right) = 670px
- 아래에 있어야 할 내용이 올라오므로 height 설정. .travel과 같은 170px
- 간격을 더 여유롭게 하기 위해 margin-bottom
9) 스크롤을 내려도 배경이 멈춰있게 하기
background-attachment : fixed;
하기 전 :
적용한 후 :
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| <HTML5 & CSS3> 크로스브라우징 (0) | 2017.06.19 |
|---|---|
| <HTML & CSS> 아이콘 사용하기 (font awesome) (0) | 2017.06.16 |
| <HTML & CSS > 레이아웃 기초 (0) | 2017.06.16 |
| <HTML & CSS> float 문제점 해결하기 (clearfix) (0) | 2017.06.16 |
| <CSS> z-index (태그들이 보이는 순위 정하기) (0) | 2017.06.15 |