반응형 포트폴리오 사이트 만들기2 HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기(2) 저번 글에 이은 HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기 2편입니다. 오늘은 저번 글에 이어서 각 섹션에 따로 적용되는 CSS 요소와 JavaScript를 확인해보겠습니다. 저번 글을 확인하고 싶은 분들은 아래 링크를 이용해주세요! HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기 1편 #CSS 구성 확인하기 / nav.css 내비게이션 바의 기본 CSS입니다. 내비게이션 바의 경우 스크롤을 내려도 계속해서 화면 상단에 위치해야 하기 때문에 'position: fixed' 속성을 부여합니다. 화면 크기에 맞추기 위해 'width: 100%' 속성을 부여하고, 다른 페이지 부분과 겹칠 경우z 축을 기준으로 가장 위에 있어야 하기 때문에 'z-ind.. 2021. 12. 11. HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기(1) 오늘은 HTML과 CSS, JS를 이용해 만든 개인 포트폴리오 사이트를 정리해 보려고 합니다. 우선 최종 완성된 페이지의 모습을 확인해 보겠습니다. 개인적으로 확인해보실 분들은 다음 페이지에서 확인 부탁드립니다! http://determination.dothome.co.kr/ (도메인 만료) #페이지 소개 영상 우선 홈 화면입니다. 보유한 스킬이 쓰이고 지워지는 애니메이션을 추가했습니다. 내비게이션 바를 만들었고 'Determination'에서 'tion'의 경우 스크롤이 내려가 화면이 고정되면 색이 통일되도록 하였습니다. 메뉴바에 마우스를 올리면 색깔이 변하도록 스타일을 주었습니다. 다음은 섹션 화면입니다. 메뉴바를 클릭 시 해당 섹션으로 이동할 수 있도록 했습니다. 스크롤을 내려도 순서대로 해당 섹션.. 2021. 12. 11. 이전 1 다음 반응형
