![BASIC HTML & CSS
- project -
[ 2017.02.07. Tue ]](https://image.slidesharecdn.com/7-170304052711/85/Basic-HTML-CSS-7-project-1-320.jpg)
[Basic HTML/CSS] 7. project
- 1. BASIC HTML & CSS - project - [ 2017.02.07. Tue ]
- 2. Layout 1. header (logo, nav) 2. intro (full width, full height) 3. about (memeber photo, name, position) 4. video (youtube) 5. album (album photo, name, date) 6. contact (facebook, instagram, youtube, fancafe, musician league) 7. footer (link, copyright)
- 3. 1. header
- 4. header logo nav ● position: fixed 상단에 항상 붙어 있도록 함 ● background: rgba(0, 0, 0, 0.5) 배경색에 투명도를 줄 수 있음 ● float: left | right를 쓰면 부모 요소에 overflow: hidden float: left float: right overflow: hidden
- 5. 2. intro
- 6. ● display: table | table-cell intro title sub-title full width/height
- 7. 3. about
- 8. about title txt-info ● li:hover 멤버 이름과 역할 소개 ● position: relative | absolute ● z-index, opacity ● filter: grayscale(100%)
- 9. 4. video
- 10. ● 유투브 동영상 삽입 방법 (iframe) video title
- 11. 5. album
- 12. album title ● li:hover 하면 box-shadow 효과
- 13. 6. contact
- 14. contact title ● a:hover 하면 opacity가 살짝 낮아짐
- 15. 7. footer
- 16. footer txt copyright ● a:hover 하면 글꼴이 두꺼워짐
- 17. NOTE
- 18. Brackets Tip ● Shortcut ○ Ctrl+Cmd+방향키 : 블럭 지정한 만큼 윗줄/아랫줄로이동 ○ Cmd+d : 해당 라인 복제 ○ Cmd+x : 해당 라인 삭제 ○ Cmd 누른 상태에서커서 위치 찍기 : 멀티 라인 셀렉트 ● Extension ○ 파일 > 확장 기능 관리자 > beautiful.io 설치 → Shift + Cmd + L : 자동 들여쓰기(auto indent)
- 19. 새로운 일을 시작하는 용기 속에 당신의 천재성과 능력, 그리고 기적이 모두 숨어 있다. Whatever you can do or dream you can, begin it. Boldness has genius, power, and magic in it. - Johan Wolfgang vonGoethe 요한 볼프강 폰 괴테 @zineeworld