0419 개발일지
오늘 한 일
오늘은 어제에 이어 친구의 포트폴리오 메인 페이지를 만들었다. 어제는 html 위주로 작성했고, 오늘은 거기에 css를 합쳐 디자인을 좀더 추가했다.
일단 1차로 내용을 넣은 후에 내일부턴 모바일 반응형 부분을 만들 예정이다.
포트폴리오 메인페이지
google font 사용
<!--google font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Carter+One&family=Noto+Sans+KR&family=Roboto+Slab:wght@200;400&display=swap" rel="stylesheet">
...
font awesome 사용
css에서 <i>
태그의 폰트를 따로 처리해주어야 아이콘 이미지가 잘 뜬다.
<script src="https://kit.fontawesome.com/키트고유번호.js" crossorigin="anonymous"></script>
...
<li>
<a href="#"><i class="fab fa-brands fa-github"></i></a>
<a href="#"><i class="fab fa-brands fa-linkedin"></i></a>
</li>
.fab {
font-family: "Font Awesome 5 Brands";
font-size: 25px;
margin-right: 5px;
}
그라데이션 배경색 넣기
background: linear-gradient(#746FFF, #A381FF);
특정 영역을 화면 중앙에 두기
#about .about-content {
height: 300px;
position: relative;
transform: translateY(50%);
background-color: #ededed;
padding: 30px 20px;
}
마우스 hover 시 이미지 움직임
.img-wrap {
overflow: hidden;
}
.profile-img-wrap {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 10px;
}
#profile img:hover {
cursor: pointer;
transform: scale(1.1);
transition: 0.3s;
}
여러 줄 말줄임
#introduction p.description {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 55px;
}
바닥에 붙게 위치 조정
.project-content .btn_more {
position: absolute;
bottom: 0;
right: 0;
font-size: 14px;
background-color: #A6E22E;
padding: 5px 15px;
float: right;
border-radius: 20px;
}
영역을 화면 가득 채우기: viewport 높이 활용
내부 내용이 화면 높이를 넘어서는 경우에 영역을 벗어나는 경우가 있었다. 그 부분은 따로 height: auto
로 내부 길이가 부모에 반영되도록 변경해주었다.
.main-section {
width: 100%;
height: 100vh;
padding-top: 150px;
}
Author And Source
이 문제에 관하여(0419 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lee_yesol421/0419-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)