위코드 사전스터디 1주차 과제 - HTML/CSS를 이용하여 자기소개 페이지 만들기

< 구현해보고 싶었던 기능들 >

1. overlay

가상선택자 hover를 사용하여 마우스 오버했을 시 텍스트가 이미지로 바뀌도록 하였다.

<div class="container">
	<div class="name">
		<p id=hi1>안녕하세요,</p>
    		<p id=hi2 style="display: inline-block;">남 채 린</p>
    		<p id=hi1 style="display: inline-block;"> 입니다.</p>
    	</div>
	<div class="overlay">
		<img src="me.jpeg" alt="" class="image">
   	</div>
</div>

.container{
    position: relative;
    width: 50%;
}
.image{
    display : block;
    width: 120%;
    height: auto;
    border-radius: 100%;
    margin-left: 40%;
    transform: translate(0, 0);
}
.overlay{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
}
.container:hover .overlay{
    opacity: 1;
}
.name{
    width: 120%;
    height: auto;
    color: black;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(0, -50%);
    text-align: center;
}

텍스트 요소와 이미지 요소만 가지고 hover 기능을 구현하려 하니 되지 않았다. 아래 사이트를 참고하여 한 상위요소 안에 함께 포함시키고 그 상위요소(container)에 hover를 하게 됨으로써 원하던 결과를 얻을 수 있었다.

참고 사이트 : https://www.w3schools.com/howto/howto_css_image_overlay.asp

2. 네비게이션바 만들기

구상한 페이지의 구성이 단순하여 작게나마 동적인 요소를 넣고 싶었다.

• 메뉴버튼을 클릭했을 때 메뉴바가 나타날 것
• 메뉴바가 화면 상에 나타났을 때 메뉴버튼 모양이 다르게 바뀔 것
• 메뉴버튼을 다시 클릭하면 메뉴바가 본래대로 숨겨질 것

< 메뉴버튼 >
1. input태그를 사용하여 메뉴버튼 만들고(type은 checkbox)
2. label태그를 사용. for 속성값으로 input에 부여한 id값을 넣어주면 연결되어 label을 클릭하여도 input이 체크되거나 해제된다.

<div class="menu"><input type="checkbox" id="menuicon">
<label for="menuicon">
	<span></span>	<!--버튼이 줄 세개가 있는 모양으로 span 3개 추가-->
	<span></span>
	<span></span>
</label>

#menuicon{
    display: none;	<!--요소를 안보이게 가리는 속성-->
}
#menuicon + label{
    display: block;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    margin: 20px;
}
#menuicon + label span{
    display: block;
    position: absolute;
    width: 100%;
    height: 2.5px;
    border-radius: 15px;
    background: #000;
    transition: all .35s;	<!--모션-애니메이션 효과-->
}
#menuicon + label span:nth-child(1){		<!--첫번째 span태그의 위치 선정-->
    top: 0;
}
#menuicon + label span:nth-child(2){		<!--두번째 span태그의 위치 선정-->
    top: 50%;
    transform: translateY(-50%);
}
#menuicon + label span:nth-child(3){		<!--세번째 span태그의 위치 선정-->
    bottom: 0;
}
#menuicon:checked + label span:nth-child(1){
    top:50%;					<!--absolute의 위치값(checked 변화값)-->
    transform: translateY(-50%) rotate(45deg);	<!--Y축 이동, rotate 회전-->
}
#menuicon:checked + label span:nth-child(2){
    opacity: 0;					<!--투명도 0-->
}
#menuicon:checked + label span:nth-child(3){
    bottom: 50%;				<!--absolute의 위치값(checked 변화값)-->
    transform: translateY(50%) rotate(-45deg);	<!--Y축 이동, rotate 회전-->
}

앞에서 지정한 요소의 바로 다음에 위치하는 요소만 선택할 수 있도록 인접요소 선택자(adjacent sibling combinator) + 를 사용한다.

< 네비게이션 바 >
html파일의 label 아래에 아래와 같은 코드를 추가한다.

<div class="sidebar">
    .
    .
    .
</div>

.sidebar{
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: rgb(204, 160, 123);
    position: fixed;	<!--스크롤을 내려도 화면에 고정되게끔 fixed 사용-->
    top: -100px;	<!--네비게이션 바의 높이값으로 화면밖으로 내보내기 위해 -100px로 설정)-->
    left: 0;
    z-index: 1;		<!--position의 우선순위-->
    transition: all .35s;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}
#menuicon:checked + label + div{
    top: 0;		<!--(top: -100px)의 위치에서 (top: 0)의 위치로-->

input + label + div{} : 인풋이 체크가 되기 전 div에 스타일값을 줄 때
input:checked + label + div{} : 인풋이 체크가 되면 div에 변화할 스타일값을 줄 때

참고 영상
https://www.youtube.com/watch?v=AcDKkaorPvU
https://www.youtube.com/watch?v=IvXuk5Sh4GE&t=1s

* 개선 및 보완할 점

• 태그에 대한 개념을 정확히 알고 사용할 것
• class, id, name 등에 부여하는 값에 조금 더 신경쓸 것
  (아무렇게나 정해버리니깐 진행될수록 헷갈리는 경우가 많았다.)