[웹 표준에 맞는 HTML5 프로그래밍] 14차시 - 포트폴리오 웹 프로그래밍

포트폴리오 사이트의 명세화

1. 예시 사이트를 각 기능별 메뉴에 대해 구현 방법을 명세화

2. 각 단계별로 코딩하기 보다는 기존 사이트를 활용해서 수정 보완의 방법으로 구현

 

HTML로 구조 꾸미기

1. cdn 방식으로 w3schools.com, google font, font-awesome 주소로 호출하기

2. 사용자의 CSS, JavaScript 파일을 사용하여 직접 기능 구현

3. 명세화에 따라 내용을 현행화하여 코딩

4. W3.CSS를 사용함으로써 편리하게 화면 구성

 

CSS로 모양 디자인하기

1. HTML 요소에 대한 스타일을 CSS에서 꾸밈

2. W3.CSS로 이미 지정된 스타일을 제외한 스타일링

3. parallax effect를 사용하여 스크롤을 내릴 때 자연스러운 이미지 변화 구현

4. 각 요소별 클래스명을 따로 주어 특성별 스타일을 차별화

5. @media를 이용한 반응형 웹 구현

 

JavaScript로 기능 더하기

1. 요소의 아이디나 클래스 선택자로 스타일 선언

2. 이미지 갤러리를 클릭했을 때 모달 팝업과 같이 표현되도록 기능 설정

3. 요소의 아이디나 클래스 선택자로 토글 기능을 구현