본문 바로가기

전체 글

(19)
[challenge] Frontend Mentor - notifications page main Frontend Mentor - notifications page main 프론트엔드 멘토에서는 다양한 프로젝트에 도전해 볼 수 있도록 단계별 디자인 가이드를 제공해준다. 챌린지 뉴비 단계를 3번정도 하고 나니 조금 자신감이 붙어서 이번엔 주니어 단계에 도전했다 (프론트엔드 멘토 챌린지는 newbie, junior, intermediate, advanced, guru의 다섯 단계가 있다). 뉴비때보다 시간이 조금 더 걸렸지만, 구현에 성공했다. 동작설명 1. 스마트폰 앱의 알림창처럼 알림을 하나씩 누를 때 마다 Notification 글자 옆의 알림 숫자가 줄어들고, 누른 알림의 배경이 흰색으로 바뀌며, 알림 끝의 붉은 점이 사라진다. 2. Mark all as read를 누르면 모든 알림이 읽음 상태가..
[CSS] 그림자 넣기 : box-shadow box-shadow: inset(내부그림자) / x축이동 / y축이동 / blur-radius(블러) / spread-radius(크기) / 색상 /*예시*/ /*box-shadow: x축이동 / y축이동 / blur-radius / 색상*/ box-shadow: 0px 10px 15px hsl(0, 36%, 70%);
[CSS] 그라데이션 넣기 : linear-gradient background 요소 중 linear-gradient 활용 background: linear-gradient(각도, 색상, 색상); 각도 /*예시*/ background: linear-gradient(90deg, hsl(171, 41%, 78%), hsl(208, 46%, 41%)); to top, to bottom, to left, to right n deg (degree의 줄임말) 색상 /*예시*/ background: linear-gradient(to left, yellow 25%, green 30%, blue); 2가지 이상의 색상도 가능 색상 뒤에 n %를 붙여서 색상 범위 지정
[JavaScript] JavaScript로 CSS 수정 예시 var error = document.getElementById('error-mark'); //데이터를 id로 가져와 변수에 저장 if (실행내용){ //if문 실행 시 error.style.opacity = '1'; //css poacity요소(투명도)의 값을 1(불투명)로 변경 } else { //반대의 경우 error.style.opacity = '0'; //css poacity요소의 값을 0(투명)으로 변경 }
[CSS] 요소 배치, 겹치기 : position position 속성 static (기본) relative (자신 기준) absolute (상위 요소 기준) fixed (뷰포트 기준) stickey (스크롤링 기준) top, bottom, right, left : 위치 지정 대부분의 경우 postion과 top, bottom, right, left가 같이 사용됨. 여기에서는 relative와 absolute만 다루도록 하겠다. 나머지는 차차 내가 필요할 때 업데이트. -relative position: relative; 부모 요소와 상관 없이 요소 이동 가능. 위치는 요소의 원래 기본 위치에서 top, bottom, right, left의 방향으로 얼마나 벗어났는지 지정. -abrolute position: absolute; position 속성이 '..
[CSS] 요소의 투명도 조절 : opacity opacity: 0; //투명 opacity: 1; //불투명 범위 : 0.0 ~ 1.0
[CSS] background-color 투명하게 background-color: transparent;
[html] label for input id를 넣으면 input과 결합되어 같은 기능을 함 ... 위의 예제에서 svg파일 또한 submit 버튼과 똑같은 버튼 역할을 한다.