※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 대부분 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
진입 페이지에서 내가 짚어야 할 곳
타입 리스트 : display: flex;
★타입 아이템 : flex:1; 부모가 플렉스일때 1:1로 자리잡아줌. 균등 분할..
border-left: 좌측에 줄 생김.
display:인라인 블록 =인라인 속성을 가지면서 블록도 가능;
icon으로 삽입하면 색 변경 가능.벡터라서 그래
svg파일 있으면 아이콘 부분부분도 색상 변경 가능.
메뉴페이지에서 내가 짚어야할 곳
1. 고정 헤더영역>
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
role="tablist" | "tab"
시작전엔 항상 왓치sass켜서 css연동되는지 확인..
스페이스 어라운드랑 스페이스 비트윈 차이 알자. 비트윈을 많이 쓰긴해..
글씨 txt의 css에 line-height: 메뉴 hover시 글씨 아래 말고 바닥에 밑줄 생김.
★★line-height는 줄 높이를 정하는 속성입니다
div role에서 role 속성은 역할을 쓰면 된다. 배너.버튼.첵박스 등등.
.scroll-x { 가로 스크롤! 믹스인으로 해도되구..
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; 뚫고 나와도 쭉 이어지게 하겠다.
-webkit-overflow-scrolling: touch; 모바일에서.터치 가속도)
-ms-overflow-style: none; 못생긴 스크롤바 감추기
scrollbar-width: none; 파이어폭스에서 감추기
&::-webkit-scrollbar {
display: none; 크롬에서 스크롤바 감추기
} }
가로 스크롤 같은 거 자주쓰는 덩어리라 따로 저장해 둬
2. 주문분류 영역>
위에 헤더 메뉴바 포지션 fixed때문에 작업한게 안보일거임.
때문에 padding-top을 위에 헤더 높이 만큼 주자.
&::after {
content: '';
position: absolute;
bottom: -9px;
left: 50%;
width: 10px;
height: 10px;
border: 1px solid;
border-width: 0 1px 1px 0;
background-color: $booking-color-bg157;
transform: rotate(45deg)
translateX(-50%);내가 가진x축에 -50%만 가달란 뜻
}
아래로 가는 화살표:
네모칸 아래 붙은 말풍선 하얀거, ㄴ격자 만들고 45도 회전해서 위치 조정
display: flex;
align-items: center; 이젠 거의 세트수준~
3. 최근 주문 영역>
빈 이미지영역 넣기 src 부분 사이트 유용해 ~
<img class="menu-img"
src="https://via.placeholder.com/80" alt="메뉴사진">
<img src="https://via.placeholder.com/100x110/ffffff/0000000" >
flex-shrink: 0; 찌그러지지 않겠다고.본연 너비값 유지.
4.메뉴 카테고리 영역.
모바일에서 자주쓰는 postion: Sticky :
스크롤 움직임에 따라 특정 영역에 고정이 가능.
Sticky 속성은 Sticky 포지션을 사용할 요소에 Position:sticky; 로 포지션을 지정 후
top:0; 와 같이 고정될 영역만 입력해주시면 설정이 완료
.category-item {
&:first-child {
padding-left: $m-padding; } }
배열로 만들어서? 첫번째만 패딩 넣기.. 메뉴카테고리
-가로 스크롤에서 우측으로 넘어갈때 그라디언트로 사라지게 페이드 아웃하는 방식도 있다.
★그라데이션 색넣는 방법
백그라운드-이미지: liner-gradient(to right, #fff(흰색) 25%, rgba(255,255,255,0);
백그라운드-이미지 liner-gradient(to right, #3ededed #efefef ;
5. 메뉴 리스트 영역
★부모 선택자(&)의 사용
- 부모 선택자는 특수문자 '&'을 사용한다.
- 기본적으로 중첩된 Sass 문법 안에서 사용한다.
- :hover, :checked, :not(&) 등의 가상클래스에 사용된다.
- :after, :before 등의 가상요소에 사용된다.
- 언더바(_), 하이픈(-) 등의 클래스명의 접속사에 사용한다.
화살표 방향은 transform rotate(180deg);180도 돌려서 사용.
★회색 동그라미 넣기.
&::before {
content: '';
★display: inline-block; 아이콘 넣을때 넣드라, 인기 아이콘이나..
margin: 0 10px;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #ededed;
vertical-align: middle; }
transform:translateY(1px); 글자 높이 맞출때
8. 맨위로 버튼
Top옆에 위로가는 화살표를 Top글씨 옆에 붙일때.
transform: translate(-50%, -50%) rotate(45deg);
클릭시 맨위로
텍스트일때 <a href=".header">Top</>
이미지일때 <a href=".header"><img src="top.jpg" title="위로가기"></a>
