0116 html, css

흐아 오늘은 어제 마저 못했던 blur 정리를 먼저 했다.

.card.blur {
    transition: 2s;
    filter: blur(2px);
}

transition을 2s로 줘서

사진으로는 보이지 않겠지만 애니메이션 같은 효과를 줬다. 뭔가 혼자 계속 생각하고 정리하니까 조금씩 더 알아가고 있구나 싶다.

그 다음 내 개인 포트폴리오를 만들었고 Challenge를 만들어서 내가 하루하루 공부한 것을 남기려고 한다.

<header>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Challenge</a></li>
                <li><a href="#">What is this?</a></li>
                <li><a href="#">Just</a></li>
            </ul>
        </nav>
        <nav>
            <ul class="icon-wrap">
                <li class="icon google">
                    <span class="tooltip">Google</span>
                    <span><i class="fa-brands fa-google"></i></span>
                </li>
                <li class="icon instagram">
                    <span class="tooltip">Instagram</span>
                    <span><i class="fa-brands fa-instagram"></i></span>
                </li>
                <li class="icon github">
                    <span class="tooltip">Github</span>
                    <span><i class="fa-brands fa-github"></i></span>
                </li>
            </ul>
        </nav>
    </header>

기존과 같이 왼쪽에는 a태그를 줘서 해당 사항으로 가게 만들 계획이고 오른쪽에는 내 Contact를 만들 계획이다.

.nav_links li a{
    transition: all 0.3s ease 0s;
}
/* 상단바 카테고리를 클릭하면 버튼 색상과 글자 색상이 변경 */
.nav_links li a:hover{
    color: #4ed11e;
    border-bottom: #4ed11e solid 3px;
    padding: 15px;
}
.icon-wrap{
    display: flex;
    list-style: none;
}

이렇게 li태그 위에 마우스를 올릴 시 아랫줄이 만들게 하고 싶었고 내 별명이 나무인듯 초록색으로 했다 ㅎㅎ..

그 결과 마음에 드는 애니메이션 효과와 색이 나왔다 점점 응용을 잘해가는 거 같아 만족!
그 아래에는 순서를 줘 내가 어느날에 뭘 만들었는지 나타내고 싶었다.

<section class="first-wrap">
        <div class="left-card">
            <p>VACATION HTML + CSS CHALLENGE</p>
            
            <b><p class="day">Day</p><p class="date">#1</p></b>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem, at recusandae. Tenetur et sequi rerum voluptas molestias, dolores laboriosam cupiditate perferendis. Inventore sed quas, rerum corrupti incidunt delectus dolorem in!</p>
        </div>
        <div class="right-card">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veritatis accusamus sunt reiciendis! Est dolorum laboriosam, quo minus vitae dolor suscipit cumque provident laudantium nam dignissimos incidunt! Culpa, cum sint?Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veritatis accusamus sunt reiciendis! Est dolorum laboriosam, quo minus vitae dolor suscipit cumque provident laudantium nam dignissimos incidunt! Culpa, cum sint?Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veritatis accusamus sunt reiciendis! Est dolorum laboriosam, quo minus vitae dolor suscipit cumque provident laudantium nam dignissimos incidunt! Culpa, cum sint?</p>
        </div>
    </section>

left-card와 right-card를 만들어 왼쪽에는 날짜와 내용을 오른쪽에는 내가 만든 걸 넣을 예정이다.

그 결과다

body {
    height: 100%;
    width: 1200px;
    margin: 0 auto;
}
.first-wrap {
    display: flex;
    justify-content: space-between;
    height: 400px;
    margin-top: 40px;
}
.first-wrap .left-card {
    width: 45%;
}
.first-wrap .left-card p{
    color: #7d7d7d;
}
.first-wrap .left-card b {
    font-size: 50px;
    display: flex;
}
.first-wrap .left-card .date {
    margin: 0 0 18px 30px;
    color: #4ed11e;
}
.first-wrap .right-card {
    width: 45%;
}

.first-wrap을 display:flex로 한줄로 나오게 했고 justify-content:space-between으로 좌우 배치했다!
점점 공부하면서 알아간다는 느낌이 커 기분이 좋다. 내가 아직 백엔드로 갈지 프론트엔드로 갈지 정하지는 않았지만 점점 더 공부하면서 내 길을 찾고 싶다.
오늘은 여기까지! 안뇽