BASIC HTML & CSS- project -

[ 2017.02.07. Tue ]

Layout1. 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)

1. header

header

logo nav

● position: fixed 상단에 항상 붙어 있도록 함● background: rgba(0, 0, 0, 0.5) 배경색에 투명도를 줄 수 있음● float: left | right를 쓰면 부모 요소에 overflow: hidden

float: left float: right

overflow: hidden

2. intro

● display: table | table-cell

intro

title

sub-title

full width/height

3. about

about

title

txt-info

● li:hover 멤버 이름과 역할 소개● position: relative | absolute● z-index, opacity● filter: grayscale(100%)

4. video

● 유투브 동영상 삽입 방법 (iframe)

video

title

5. album

album

title

● li:hover 하면 box-shadow 효과

6. contact

contact

title

● a:hover 하면 opacity가 살짝 낮아짐

7. footer

footer

txt copyright

● a:hover 하면 글꼴이 두꺼워짐

NOTE

Brackets Tip● Shortcut

○ Ctrl+Cmd+방향키 : 블럭 지정한 만큼 윗줄/아랫줄로 이동○ Cmd+d : 해당 라인 복제○ Cmd+x : 해당 라인 삭제○ Cmd 누른 상태에서 커서 위치 찍기 : 멀티 라인 셀렉트

● Extension○ 파일 > 확장 기능 관리자 > beautiful.io 설치 → Shift + Cmd + L : 자동 들여쓰기(auto indent)

새로운 일을 시작하는 용기 속에 당신의 천재성과 능력, 그리고 기적이 모두 숨어 있다.Whatever you can do or dream you can, begin it. Boldness has genius, power, and magic in it.

- Johan Wolfgang vonGoethe 요한 볼프강 폰 괴테

@zineeworld