CSS
-
[Day 33] JS 로 만드는 3D 캐러셀TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 17. 22:01
https://daheejo.github.io/FrontendSchool_2/carousel/index.html Today's Color: 오늘 당신에게 맞는 색깔은? What's the color of the day? STOP REPLAY daheejo.github.io 일단 만들어본 3d 캐러셀! 계속 회전하는데, 버튼으로 조정할 수 있는 캐러셀을 만들어보고자 했다. (근데 아직 버튼 기능과 카드 뒷면 기능은 미완이다) css에 키프레임 애니메이션을 적용하였는데, 문제는 가운데 정렬한 캐러셀이 애니메이션만 적용하면 자꾸 가운데를 벗어나곤 했다 ㅠ 그래서 멘토님께 여쭤본 결과, @keyframes movingCarousel { from{ transform: translate(-50%, -50%) rot..
-
드롭다운 구현에서 blur와 click 이벤트, 그리고 CSS transition의 영향..Web/Error & Fix 2022. 5. 17. 15:00
드롭다운을 구현하는 중에 바깥을 클릭했을 때 드롭다운이 사라지게 하기 위해서(더 나은 UX..! 항상 사용자 입장에서 생각하기!!!) 'blur'라는 이벤트를 추가했다. 이렇게 const selectBox = document.querySelector('.select-box'); const dropbox = document.querySelector('.dropbox'); const dropboxOpt = document.querySelectorAll('li'); const OptText = document.querySelectorAll('.dropbox-opt'); selectBox.addEventListener('click',function (){ dropbox.classList.toggle('on');..
-
[Day 22] TailwindTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 27. 22:00
HTML에서 CSS 마크업을 할 수가 있다? 고거시 바로 꼬리바람이다. 테일윈드를 배우고 실습해보면서 CSS 파일 없이 페이지를 꾸밀 수 있다는 장점에는 공감을 했지만, 클래스로 떡칠이 되어가는 html..과 수정할 때 가독성이 안좋은 것 같다는 점이 나한테는 살짝 불호같다..ㅠ_ㅠ 오늘도 실습한 내용을 코드와 구현창 위주로 정리하려 한다. (테일윈드 사용시 반드시 헤드에 스크립트 소스 붙이기!!) 1) colors, fonts font-sans The quick brown fox jumps over the lazy dog. font-serif The quick brown fox jumps over the lazy dog. font-mono The quick brown fox jumps over the ..
-
[Day 21] BootstrapTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 26. 17:38
부트스트랩은 없는 게 없는 웹툴킷이다!! 오늘 til는 직접 설명보다는 코드와 구현모습 위주로 정리해보려 한다. 실제 디자인하는 경우가 아니라 빠른 웹페이지 제작이 필요한 경우 이렇게 찾아보거나 유료 템플릿을 구매해서 적재적소에 이용하는 것이 효율적인 방법이라는 것을 오늘 수업을 통해 알 수 있었다! 그리드 시스템 https://getbootstrap.com/docs/5.1/layout/grid/#example Grid system Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass v..
-
[Day 20] 2번째 스프린트 회고 & SassTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 26. 00:09
2번째 스프린트 회고 메이커준님과 2번째 스프린트 회고시간으로 새로운 주를 시작했다. 멋사를 시작한지 이제 4주차..! 돌이켜보니 정말 내 마인드와 실력에서 많은 변화를 체감할 수 있었다. 1번째 회고시간에선 피드백의 중요성에 대해서 알아봤다면, 이번 회고시간에서는 지금까지의 액션 플랜에 대해 점검하고 과거에서 효과있었던 학습, 교육 경험과 그렇지 않았던 경험들을 돌이켜 봄으로써 효과적인 학습과 회고 방법에 대해 같이 이야기 나누어 볼 수 있었다. 나의 가장 개선하고 싶은 액션 플랜으로 [느낀 점과 배운 점을 아낌없이 모조리 탈탈 터는 주간회고 적기]로 설정했다. 이유는 멋사 시작부터 지금까지 하루 하루 배운 거 복습과 과제에만 몰두해왔는데, 코딩뿐만 아니라 교육을 듣고 끝까지 수료를 위해서 나의 부족한..
-
[Day 19] 반응형웹 & SVGTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 21. 23:55
1. 반응형 웹 반응형웹을 만들기 위해선 기본적으로 mata viewport를 설정해야 한다. (vsc에서 자동적으로 완성되는 html 코드이지만 반응형웹을 위해 필수적이었다는 사실) 이후 미디어쿼리를 지정해야 하는데, 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능이다. 아래의 예시를 살펴보자 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae ..
-
[Day 18] 반응형 사이즈 조절 & 밴딩머신 코드리뷰TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 20. 22:07
1. 반응형 고려해서 이미지, 백그라운드, 비디오 사이즈 조절하기 1) 이미지와 비디오 img { max-width: 100% /*원본 이미지크기의 100%*/ width: 100% /*바디의 100%*/ 비디오도 요런 식으로 똑같이 적용되지만, 다만 height는 100%해도 100%로 안맞춰진다. **iframe(뿐만 아니라 모든 요소)는 padding-top, -bottom 속성(%일 경우)이 부모 요소 넓이에 비례한다! 2) 백그라운드 이미지 .요소 { width: 100vw; height: 100vh; background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxM..
-
[Day 17] 드롭박스 구현 코드리뷰 & CSS 실무 테크닉TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 20. 00:48
1. dropbox 구현 코드리뷰 후 알게된 점 원래는 셀렉트박스로 마크업을 해야하지만, 드롭박스 디자인을 바꿀 수 없기 때문에, 바꾸기 위해서 ul>li>button으로 마크업을 대체한다. 그러면 아래와 같이 전체 코드가 완성된다. 최애 프로그래밍언어를 선택해 주세요 최애 프로그래밍 언어 Python Java JavaScript C# C/C++ 여기서 버튼에 글자 수가 많아져도 ...처리를 할 수 있는 말줄임을 위해서 txt-ellipsis 클래스를 넣어서 다음과 같이 css 처리를 할 수 있다. 말줄임 처리에 대한 자세한내용 참고 https://deeplify.dev/front-end/markup/text-ellipsis [HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제 html과 CSS..