자기소개 페이지

HTML, CSS 이용해서 만든 자기소개 페이지
https://introd.netlify.com/

name의 슬라이드 부분

HTML
               <div class="name-job">
                    <ul class="name-job-list">
                        <li>Developer</li>
                        <li>Wecoder</li>
                        <li>Developer</li>
                    </ul>
                </div>

CSS

세줄로 된 리스트이지만 overflow되는 부분을 hidden으로 감추고
Margin-top을 무한반복으로 롤링하는 애니메이션.

—>사진이 넘어가는 슬라이드를 만들때 이용할 수 있을 것 같다.

 
@keyframes rolling {
    0% {
        margin-top: : 0;
    }
    50%{
        margin-top: -1.5em;
    }
    100%{
        margin-top:-3em;
    }
}

.name-job{
    display: inline-block;
    background-color:#111;
    vertical-align: top;
    height: 1.5em;
    overflow: hidden;
    color:white;
}

.name-job-list{
    animation-name: rolling;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



Skills 섹션

HTML
       <div class="profile-section">
            <h2>skills</h2>
            <ul class="graph">
                <li data-score="50%"><h3>Html</h3></li>
                <li data-score="40%"><h3>css</h3></li>
                <li data-score="30%"><h3>javascript</h3></li>
            </ul>
        </div>

CSS
//가상요소 ::before를 사용해서 그래프위에 data-score값을 입력하도록 함

 .graph li::before{
    content: attr(data-score);
    float: right;
}

//마크업에서 퍼센트숫자를 바꾸면 그래프의 width 값도 비율에 맞게 조절되도록 함.
.graph li[data-score="10%"]{ width: 10%;}
.graph li[data-score="20%"]{ width: 20%;}
…
.graph li[data-score=“100%”]{ width: 100%;} 

1. ::before은 태그 안의 내용에 뭔가를 추가하는데 가장 앞부분에 추가한다.
     before과 after 선택자는 content : “” 속성이 필수이다

 Contact 섹션 마크업
<dl> <dt> <dd> 


 화면크기에 따라 좌우 / 상하로  이미지,프로필클래스 배치가 바뀌는 반응형 구현

@media (min-width: 768px) {
    .image{
        position: fixed;
        left: 0;
        top: 0;
        width: 60vw;
        height: 100vh;
        padding: 0; 
    }
    .profile{
        margin-left: 60vw;
    }
    
}