저번 글에 이은
HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기 2편입니다.
오늘은 저번 글에 이어서
각 섹션에 따로 적용되는 CSS 요소와 JavaScript를 확인해보겠습니다.
저번 글을 확인하고 싶은 분들은 아래 링크를 이용해주세요!
HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기 1편
#CSS 구성 확인하기 / nav.css
내비게이션 바의 기본 CSS입니다.
내비게이션 바의 경우 스크롤을 내려도 계속해서 화면 상단에 위치해야 하기 때문에
'position: fixed' 속성을 부여합니다.
화면 크기에 맞추기 위해 'width: 100%' 속성을 부여하고,
다른 페이지 부분과 겹칠 경우z 축을 기준으로 가장 위에 있어야 하기 때문에
'z-index: 999' 속성을 적용합니다.
앞선 글에서 설명했던 것처럼
로고와 메뉴 리스트를 한 줄에 표시하기 위해
'display: flex' 속성을 부여합니다.
'justify-content: space-between' 속성은
정렬해야 하는 요소를 양 끝단에 맞춰서 정렬하고
가운데에 공간을 두는 정렬 방식입니다.
따라서 왼쪽 상단에 로고가, 오른쪽 상단에 메뉴가 떠야 하는 내비게이션에 적합한 속성입니다.
기본적으로 <ul>, <li> 태그로 작성된 리스트는
순서대로 아래로 정렬됩니다.
예를 들어 별다른 속성 값을 부여하지 않을 경우
리스트는 다음과 같이 표시됩니다.
하지만 우리가 원하는 메뉴 리스트는 위와 같은 세로 정렬이 아닌 가로 정렬입니다.
위와 같은 리스트를 가로로 정렬하기 위해 'display: inline-block' 속성을 적용해
다음과 같이 화면에 표시되도록 만들었습니다.
'transition: all 0.3s ease'는 맨 아래에 있는 ':hover' 등과 관련된 속성입니다.
'.navbar .menubar li a:hover' 속성의 경우
내비게이션 바에 있는 메뉴바에 있는 리스트에 마우스를 올릴 경우
글자 색이 변하도록 속성을 지정했는데,
이때 글자색이 변하는 속도를 지정할 수 있는 속성이 'transition: all 0.3s ease'입니다.
조금 더 부드러운 변화를 위해 'transition: all 0.3s ease' 속성을 부여했습니다.
'.navbar .menubar li a:hover'외에도 스크롤이 일정 범위 이상 내려가면
로고의 'tion' 부분의 색을 변하게 할 때도 'transition: all 0.3s ease' 속성을 부여했습니다.
위의 속성은 sticky와 menu-btn에 대한 CSS입니다.
sitcky는 JavaScript와 연결되어 있기 때문에 후에 JS를 다룰 때 다시 한번 설명하겠습니다.
기본적으로는 내비게이션 바의 클래스가 '.navbar.sticky'가 될 때
내비게이션의 색이나 글자의 색상을 변경한 속성이라고 보시면 됩니다.
메뉴 버튼은 앞선 글에서 설명드린 것처럼
페이지가 일정 크기 이하로 줄어들 경우 메뉴 리스트가 아닌 메뉴 버튼이 나타나게 됩니다.
따라서 기본적으로 'display: none' 속성을 부여해 평소에는 보이지 않도록 합니다.
페이지가 일정 크기 이하로 줄어들 경우 나타날 수 있도록 하는 옵션은
후에 관련 CSS를 보면서 설명하도록 하겠습니다.
이외에 다른 속성들은 기본적인 패딩 값이나 마진 값, 글자색 등에 관한 옵션입니다.
#CSS 구성 확인하기 / home.css
home 쪽 CSS는 우선 배경 이미지를 설정해야 합니다.
따라서 홈에 background에 url을 통해 이미지를 삽입합니다.
저는 다음과 같이 따로 images 파일에 'banner.jpg'로 배너 이미지를 넣어놨기 때문에
위와 같이 url을 작성하였습니다.
이미지에 속성 값으로 center를 부여해 가운데 정렬하였고,
no-repeat를 사용해 background에 삽입된 이미지가 반복하여 출력되지 않도록 했습니다.
또한 background-size의 경우 cover 속성을 부여해
background에 삽입된 이미지가 요소에 맞게 이미지를 최대한 크게 보여주도록 설정했습니다.
이 옵션은 반응형 웹을 만들기 위해 어떤 환경에서도 깔끔한 배경 이미지를 보여주기 위해 부여한 속성입니다.
parent의 높이 값과 상관없이, viewport에 크기만큼 높이를 지정해주기 위해
height을 100vh로 지정해주었습니다.
이외에는 font size나 글자 색 등의 기본 옵션이므로 확인해주시면 될 것 같습니다.
#CSS 구성 확인하기 / about.css
about.css입니다.
앞서 style.css에서 after에 content로 빈 문자열인 ""를 제공했기 때문에
about 내용에 맞춰 content를 제공해줍니다.
이때 img에 'object-fit: cover' 옵션을 부여했는데,
이는 이미지가 일정 비율이 잘리면서 요소의 컨텐츠 박스를 가득 채우는 옵션입니다.
화면에 모든 요소를 표시하고, 비율을 유지할 경우 반응형 웹에서 좋지 않다고 느껴져
화면이 일정 부분 잘리더라도 이쁜 비율을 유지하면서 표시될 수 있도록 해당 속성을 부여했습니다.
다른 요소는 글씨 크기, 넓이, 패딩, 마진, 글자색 등에 관한 속성으로
위에 이미지를 보면서 확인해주시면 될 것 같습니다.
#CSS 구성 확인하기 / skills.css
skills.css입니다.
우선 about.css와 마찬가지로 ::after에 skills와 맞는 content를 제공합니다.
about 섹션과 mysite 섹션은 기본 배경색인 하얀색으로 작성하고
skills 섹션과 contact 섹션은 특정 색을 배경색으로 지정했기 때문에
이에 맞춰 타이틀이나 컨텐츠의 색깔을 변경해주었습니다.
column에는 width를 calc() 속성을 이용해서 부여해줬는데,
calc()는 () 안에 입력된 내용의 사칙연산 결과를 특정 속성으로 이용해 줄 수 있게 하는 함수입니다.
따라서 양쪽 컬럼을 50%에서 30px을 뺀 값만큼 width를 차지하도록 설정한 속성입니다.
skills.css에서 주목해서 볼 것은
'.skills .skills-content .right .line'과 '.skills .skills-content .right .line::before'에 부여된 속성입니다.
우선 .line과 ::before를 이용해 그래프를 표시할 겁니다.
앞선 글에서 ::before 속성을 이용할 때,
부모 속성에 맞춰 자식 속성에 위치를 부여하고자 할 때는
부모 속성의 position을 relative로,
자식 속성의 position을 absolute로 부여해야 한다고 설명했습니다.
따라서 bar 모양의 <div class="line">으로 선언된 div 태그에
'position: relative'를 부여하고,
.line에 ::before 속성을 적용한 가상 요소의 position을 absolute로 선언합니다.
이때 'content: ""'로 가상 요소에 내용을 부여해
페이지 상 겹쳐 있는 두 개의 div 태그를 만듭니다.
이때 각각 상태에 맞는 width와 background 색상을 부여하지 않는다면
실제로 두 요소가 겹쳐있다고 해도 화면상에서는 알아볼 수 없습니다.
때문에 입력한 숙련도에 맞게 width의 비율을 각각 부여하고,
background 색상을 .line의 색과 대비되는 색상을 부여해
깔끔한 그래프를 만들 수 있습니다.
이외에는 글자 크기, 마진 값, 글자 색 등과 관련된 기본 옵션이므로
위의 CSS 이미지에서 확인하시면 될 것 같습니다.
#CSS 구성 확인하기 / mysite.css
mysite.css입니다.
mysite는 left/center/right 총 3개의 column으로 페이지를 나눴기 때문에
각각 width 값을 32%로 부여했습니다.
페이지 링크가 되어있어서 해당 링크로 이동할 수 있는데,
페이지를 이동하고 난 후 링크된 컨텐츠의 색상이 변하는 것이 싫어서
링크를 클릭하거나 마우스를 올리거나 활성화되어 있어도
컨텐츠의 색상이 변하지 않도록 'text-decoration: none' 속성을 부여했습니다.
다른 사이트들과 마찬가지로 ::after 속성에 mysite와 맞는 content 내용을 입력해주었습니다.
이외에는 기본적인 설정 값이기 때문에 위의 CSS 파일을 통해 확인하시면 될 것 같습니다.
#CSS 구성 확인하기 / contact.css
contact.css입니다.
다른 섹션과 동일하게 ::after에 맞는 content 내용을 입력해줬습니다.
left 컬럼에는 아이콘과 아이콘에 따라 이름과 이메일, 주소를 표시할 수 있게 했는데,
아이콘과 아이콘의 설명이 한 블록 요소 내에서 표시될 수 있도록
'.contact .contact-content .left .icons'에서 'display: flex' 속성을 부여했습니다.
또한 right 컬럼에서 이름을 입력하는 form과 이메일을 입력하는 form을
한 블록 요소 내에서 표시하기 위해서
name form과 email form을 묶은 fileds 클래스에 'display: flex' 속성을 부여했습니다.
이때 right 컬럼에 있는 form 요소에 'outline: none' 속성을 부여했는데,
이는 form에 focus 되는 경우 아웃라인의 색상이 변하는 것이 싫어서 부여해줬습니다.
해당 속성을 적용하지 않을 경우 form의 특정 요소에 focus 하는 경우
outline이 다음과 같이 변하게 됩니다.
'outline: none' 속성을 취소하고 textarea를 클릭하면 outline이 검은색으로 변경되는 것을
위의 이미지를 통해 확인할 수 있습니다.
'resize: none' 속성은 textarea의 크기를 임의로 변경하지 못하게 하기 위해서 설정했습니다.
skills 섹션처럼 배경색을 변경해줬기 때문에 이에 맞춰 다른 요소들의 색상을 변경해주었습니다.
이외의 요소는 기본적인 내용이기 때문에 위의 CSS를 통해 확인하시면 될 것 같습니다.
#CSS 구성 확인하기 / footer.css
footer.css입니다.
footer에서 <a> 태그를 사용해 이름에 링크를 걸어두었는데
링크 클릭 시 글자색이 변경되지 않도록 'text-decoration: none' 옵션을 부여했고,
해당 <a> 태그에 마우스를 올렸을 경우 focus 되어 있다는 것을
직관적으로 나타내기 위해 'a:hover'에 'text-decoration: underline' 속성을 부여했습니다.
이외에는 기본적인 옵션들로 위의 이미지를 통해서 확인하시면 될 것 같습니다.
#CSS 구성 확인하기 / responsive.css
반응형 미디어 쿼리를 구성하기 위해
max-width의 넓이에 따라 화면의 구성요소들이 조금씩 변할 수 있도록 속성을 부여했습니다.
레이아웃은 '가로모드 디바이스 지원 반응형 레이아웃'을 참조하였습니다.
가로모드 디바이스 지원 반응형 레이아웃의 기본은 다음과 같습니다.
각 max-width 별로 반응형 미디어 쿼리를 확인해보겠습니다.
최대 해상도에서는 위와 같습니다.
margin-left 속성을 제외하고는 특별한 속성을 부여하지 않았습니다.
1199px에서는 위와 같습니다.
img의 크기를 조정해주었습니다.
899px에서는 위와 같습니다.
우선 899px에서는 앞서 말한 메뉴 리스트의 숨김 및 메뉴 버튼 활성화가 일어납니다.
때문에 이에 맞춰 해당 속성을 조정해줍니다.
우선 'display: inline-block' 속성을 통해
'display: none' 속성이었던 메뉴 버튼을 활성화해줍니다.
또한 메뉴 버튼을 클릭하는 경우
다음과 같이 'X' 표시로 아이콘이 바뀌게 됩니다.
이렇게 이미지를 변경하기 위해서
'.acitve'와 '::before' 속성을 이용합니다.
content에 부여된 '\f00d'는 font awesome에서
X모양 icon의 value 값입니다.
.active의 경우 JavaScript를 통해 부여된 속성이기 때문에
JS를 설명할 때 다시 설명하겠습니다.
쉽게 말하면 버튼을 클릭할 경우
그전에 존재하는(::before) 속성을 불러오는데,
content를 통해 icon의 value값을 기존 메뉴 버튼의 value값에서
X모양 icon의 value 값으로 변경하게 됩니다.
앞서 메뉴 버튼을 활성화하는 것을 설명할 때
'메뉴 버튼이 활성화된다면 메뉴 리스트가 비활성화되어야 하는 것이 아닌가?'라는
의문을 가지신 분들이 있을 겁니다.
이 부분을 해결하기 위해
menubar의 position 속성을 fixed로 부여하고
'left: -100%', 'height: 100vh' 속성을 부여하였습니다.
다음 이미지로 쉽게 이해할 수 있습니다.
'left: -100%' 속성을 부여했기 때문에 화면에는 보이지 않지만,
보이는 화면의 왼쪽에 위의 메뉴리스트가 존재하게 됩니다.
이때 작은 화면에서는 가로 배치보다 세로 배치가 유리하기 때문에
display의 속성에 inline-block을 부여합니다.
그렇다면 보여지는 화면 왼쪽에 배치되어있던 메뉴 리스트는
어떻게 화면에 보이게 될까요?
이는 자바스크립트 부분과 관련되어 있기 때문에
뒤에 자바스크립트 파트를 보면서 다시 설명하겠지만,
쉽게 얘기하자면, 메뉴 버튼을 누를 경우 'left: 0' 속성을 부여해
메뉴 리스트 화면을 왼쪽에서 보이는 화면으로 옮기게 되는 것입니다.
다시 한번 메뉴 버튼을 클릭할 경우 left는 다시 -100%가 되어 사라지는 것처럼 보이게 됩니다.
index.html 파트를 다시 보겠습니다.
내비게이션에 있는 <li>에 모두 동일하게 class로 'menu-btn'을 부여한 것을 확인할 수 있습니다.
이는 후에 자바스크립트에서 다시 설명하겠지만,
자바스크립트에서 메뉴 버튼을 누를 경우 이벤트가 일어나도록 설정을 했는데,
이때 이벤트는 쉽게 말해 'left: -100%' 속성이 적용되어 메뉴 리스트가 화면에 보이지 않거나
'letf: 0' 속성이 적용되어 메뉴 리스트가 화면에 보이는 것을 말합니다.
따라서 다음과 같이 리스트에 동일하게 menu-btn 클래스를 적용한다면
해당 이벤트를 똑같이 적용할 수 있게 되기 때문에,
리스트의 내용인 home이나 about, skills 등을 클릭하면
메뉴 리스트가 사라지거나 나타나게 되는 것입니다.
이것 외에도 기본적인 마진, 패딩 값들을 조정해줬습니다.
599px에서는 화면이 작기 때문에
패딩 값을 조절하고 폰트 크기를 좀 더 작은 크기로 변경해줍니다.
최소 해상도입니다.
폰트 크기를 좀 더 작은 크기로 변경해줬습니다.
#JavaScript 구성 확인하기 / script.js
마지막으로 자바스크립트 파트입니다.
자바스크립트에서는 크게 3가지 기능을 구현했습니다.
첫 번째 기능은 내비게이션이 스크롤이 일정 크기 이상 넘어갔을 때 적용하는 기능
두 번째 기능은 앞서 말한 것처럼 메뉴 버튼을 클릭했을 때의 기능
세 번째 기능은 홈 섹션과 어바웃 섹션에 적용된 애니메이션 기능입니다.
첫 번째 기능부터 살펴보겠습니다.
Scroll 이벤트가 발생할 시 함수를 적용하게 됩니다.
scroll이 y축으로 20 이상 이동할 경우
.navbar에 .sticky클래스를 붙이게 되고,
20 이하일 경우 .sticky 클래스를 지우게 됩니다.
.sticky 클래스가 붙을 경우 다음과 같은 스타일이 적용되게 됩니다.
두 번째 기능을 살펴보겠습니다.
메뉴 버튼을 클릭할 경우 이벤트가 발생합니다.
이때 첫 번째 기능과 달리 addClass가 아닌 toggleClass를 사용했습니다.
toggleClass는 addClass와 removeClass를 합친 것으로,
클릭할 경우 .active를 붙이고, 다시 클릭 할 경우 .active를 지우게 됩니다.
.active 클래스가 붙을 경우 아래 2가지 이벤트가 발생하게 됩니다.
세 번째 기능을 살펴보겠습니다.
세 번째는 사용 가능한 기술을 타이핑하는 애니메이션을 적용하는 부분으로
jquery를 이용합니다.
변수를 선언하고 타이핑될 문자열을 배열로 선언합니다.
이후 typespeed(쓰는 속도)와 backspeed(지워지는 속도)를 설정하고
loop는 true 속성을 부여해 계속해서 반복되도록 합니다.
홈과 어바웃 섹션에서 두 번 작용하기 때문에 두 번 선언해줍니다.
자바스크립트를 마지막으로
HTML/CSS/JavaScript를 이용해 만든 포트폴리오 사이트의 모든 설명이 끝났습니다.
기본적인 기능들로 구성되어 있지만
하나하나 직접 설정해줘야 하기 때문에
손이 많이 가는 느낌이었습니다.
이후에도 JSP를 적용하거나
페이지의 더미 텍스트 대신
실제 포트폴리오 내용을 입력하는 등
업데이트를 할 예정입니다.
업데이트할 경우 업데이트 관련 내용은 따로 글로 작성하겠습니다.
작업 내용을 보면서
궁금한 부분은 댓글이나 메일로 문의하시면 설명드리겠습니다!
읽어주셔서 감사합니다.
'내가 공부하려고 올리는 > web' 카테고리의 다른 글
| HTTP 총정리 (0) | 2022.02.13 |
|---|---|
| 브라우저 동작 원리(쉽게 알아보기) - 최종 (8) (0) | 2021.12.13 |
| HTML/CSS/JavaScript를 사용해 개인 포트폴리오 사이트 만들기(1) (2) | 2021.12.11 |
| Web - REST API (0) | 2021.11.22 |
| Web - 동기 vs 비동기 프로그래밍(자바스크립트) (0) | 2021.11.22 |
댓글