1. 로고
글자에 비유되는 인라인 요소는 글자가 앉아있는 선(baseline)을 기준으로 배치된다.
img 역시 인라인 요소이기 때문에 이처럼 불편..한 상황이 생길 수 있다.
블록 요소로 바꾸어 공백을 없애자!
<css />
img {
display: block;
}
1.1. 요소 정렬
<css />
.blue {
background-color: aqua;
width: 400px;
height: 300px;
position: relative;
}
.orange {
background-color: orange;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
<css />
.blue {
background-color: aqua;
width: 400px;
height: 300px;
position: relative;
}
.orange {
background-color: orange;
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
position vs flex, grid
웹페이지는 일반적으로 모바일, 태블릿, pc 등 다양한 화면 사이즈에 적절히 대응해야 하기 때문에(반응형 레이아웃) 큰 틀은 grid, flex 등을 이용해 만들고, 값을 주어 미세한 조절이 필요할 경우(ex. 1px만 옆으로..!) float, position, margin 등을 사용한다고 볼 수 있다.
2. 서브 메뉴
<html />
<li>
<a href="/sigin">Sign In</a>
</li>
<li>
<a href="#">My Starbucks</a>
</li>
<li>
<a href="javascript:void(0)">Customer Service & Ideas</a>
</li>
a의 주소에 아직 연결할 페이지가 없는 경우, #이나 javascript:void(0)으로 채워두자!
3. 검색
javascript에서 class를 추가, 제거하여 class에 따라 css 스타일 변화를 주는 방법
<javascript />
searchInputEl.addEventListener("focus", function () {
searchEl.classList.add("focused");
searchInputEl.setAttribute("placeholder", "통합검색");
});
searchInputEl.addEventListener("blur", function () {
searchEl.classList.remove("focused");
searchInputEl.setAttribute("placeholder", "");
});
<css />
header .sub-menu .search .material-icons {
height: 24px;
position: absolute;
top: 0;
bottom: 0;
right: 5px;
margin: auto 0;
transition: 0.4s;
}
header .sub-menu .search.focused .material-icons {
opacity: 0;
}
4. 메인 메뉴
z-index : 값이 클수록 화면의 위에 나타난다.
<css />
header .main-menu {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
display: flex;
}
hover했을 때 화면의 최상단에 나오기 위해서 z-index 값을 1로 주었다.
background-image : 이미지를 배경으로 사용할 수 있다.
<css />
header .main-menu .item .item__contents .contents__texture {
padding: 26px 0;
font-size: 12px;
background-image: url("../images/main_menu_pattern.jpg");
}
기본적으로 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복해서 나타난다.
반복 여부는 background-repeat 속성으로 정한다.
5. BEM
Block Element Modifier의 약자로, html에서 class의 작성법을 의미한다.
요소__일부분 : 요소의 일부분을 표시(ex. item__name)
요소-상태 : 요소의 상태를 표시(ex. btn-success, btn-error)
6. 전역 배지(GSAP)
window에 scroll 이벤트를 추가하는 방식은 이처럼 함수를 너무 많이 호출하기에 웹 페이지가 무거워지면 성능 저하가 일어날 수 있다.
그렇다면 사용하자! 라이브러리! 강의에서 나온 4.17.20 버전을 사용했다.
<javascript />
window.addEventListener(
"scroll",
_.throttle(function () {
console.log("SCROLL");
}, 300)
);
// _.throttle(함수, 시간(ms)) -> scroll 이벤트 처리 시 자주 사용한다고 하니, 기억해두자!
애니메이션 효과를 주기 위한 라이브러리 gsap, 강의에서 나온 3.6.0 버전을 사용했다.
<javascript />
window.addEventListener(
"scroll",
_.throttle(function () {
if (window.scrollY > 500) {
// 뱃지 숨기기
// gsap.to(요소, 지속시간(s), 옵션)
gsap.to(badgeEl, 0.6, {
opacity: 0,
display: "none",
});
} else {
// 뱃지 보이기
gsap.to(badgeEl, 0.6, {
opacity: 1,
display: "block",
});
}
}, 300)
);
'카카오테크캠퍼스 > 선택과정' 카테고리의 다른 글
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 고정 이미지 배경 (0) | 2023.05.07 |
|---|---|
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 유튜브 영상 배경 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 요소 슬라이드 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 순차적 애니메이션 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: Settings (0) | 2023.05.07 |
