키노트로 제작한 페이지 레이아웃을 바탕으로 내용 및 CSS 텍스트 및 이미지 효과, 박스모델, 애니메이션을 활용하여 절반(?)정도 페이지를 완성했다. 글로만 배웠던 내용을 실제로 실습하면서 어렸다고 느꼈거나 직면했던 오류와 해결 과정에 대해 정리해 본다.

---

부모 요소와 자식요소의 활용

페이지의 가독성을 위해 컨텐츠를 배치하기 위해 flex-box 활용 전 padding과 margin을 활용하면서
처음엔 부모 요소에 적용해야 할 속성을 자식요소에 사용하거나 그 반대의 경우로 작성하는 경우가 있어서
상당한 시간을 소모했던 것 같다.
더불어 <ul>과 <li> 선택자에 CSS 속성을 활용하면서 헷갈리는 부분들이 있었다.

nav ul {
    text-align: center;
    margin-top: 8px;
    margin-left: 7px;
    margin-right: 7px; 
}
nav ul li a:visited, nav ul li a:link {
    text-decoration: none;
    color: black;
}

텍스트 가운데 정렬 속성인 text-align은 <li>이 아닌 <ul> 선택자에 적용해야하고,
불릿을 없애주는 text-decoration 속성은 <li> 선택자에 적용한다.

---

transition과 animation

페이지 상단이 너무 단조로운 것 같아 효과를 주려고 했다. 메인 타이틀에 흰색 배경이 좌측에서 우측으로 이동하며 텍스트가 하나씩 보이도록 하는 것과 '저에 대해서 궁금하시다면'이라는 텍스트가 서서히 나타나도록 하는 것이다.

transition 적용

처음엔 transition을 활용하여 다음과 같이 CSS를 작성하였고 원하는대로 효과가 적용되었다.

그런데 transiton의 경우 문제(?)가 있었는데, 효과가 모두 끝나면 적용되었던 효과가 반대 순서로 다시 돌아간다는 것이다. 효과가 적용된 상태에서 정지해야 폐이지에 머무르는 동안 상단 텍스트가 표시되어야 하는데 transition으로는 구현이 불가능했다.

/* '안녕하세요:)' 텍스트 효과 */
#head1 { 
    position:absolute;
    top: 160px;
    left: 245px;
    width: 0;
    height: 65px;
    transition: all 1s;
    z-index: 10;
}
#head:hover #head1 {
    width: 330px;
    background-color: white;
}
/* '만나서 반갑습니다!' 텍스트 효과 */
#head2 {
    position:absolute;
    top: 250px;
    left: 245px;
    width: 0;
    height: 65px;
    transition: all 1.2s 1.3s;
}
#head:hover #head2 {
    width: 490px;
    background-color: white;
} 
/* '저에 대해서 궁금하시다면' 텍스트 효과 */
#text3 {
    font-size: 20px;
    position:absolute;
    top: 700px;
    left: 250px;
    opacity: 0;
    transition: all 1.3s 2.7s;
}
#head:hover #text3 {
    opacity: 1;
}

animation으로 수정

아래와 같이 transition으로 작성했던 효과를 animation에 맞게 수정하여 작성하였고,
animation-fill-mode: both; 속성을 사용하여 transition에서 발견했던 문제점을 해결 할 수 있었다.

/* '안녕하세요:)' 텍스트 효과 */
#head1 {
    position:absolute;
    top: 160px;
    left: 17%;
    width: 0;
    height: 65px;
    animation-name: head1-moving;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes head1-moving {
    from {
        width: 0;
    }
    to {
        width: 250px;
        background-color: white;
    }
}
/* '만나서 반갑습니다!' 텍스트 효과 */
#head2 {
    position:absolute;
    top: 250px;
    left: 17%;
    width: 0;
    height: 65px;
    animation-name: head2-moving;
    animation-duration: 1.3s;
    animation-delay: 1.1s;
    animation-fill-mode: both;
}
@keyframes head2-moving {
    form{
        width: 0;
    }
    to {
        width: 385px;
        background-color: white;
    }
}
/* '저에 대해서 궁금하시다면' 텍스트 효과 */
#text3 {
    font-size: 1.5em;
    position:absolute;
    opacity: 0;
    top: 700px;
    left: 17%;
}
@keyframes text3-moving {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

transition과 animation으로 동일한 효과를 구현할 수 있다고 하더라도 사용 목적이나 페이지 구성에 따라 적절한 속성을 사용해야 겠다.