nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/CSS

프롤로그 시리즈의 3번째 글! 이런 분들이 읽으시면 좋아요. - CSS를 다룰 수 있어요 - 하지만 Sass는 잘 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 👈 Here! 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - mixin - extend - 모듈화(import/use) 1) 믹스인: 찍어내기 틀 이번에는 조금 더 우리의 작업을 편하게 해줄 Sass 문법을 써봅시다! 바로 @으로 시작하는 At-Rules입니다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있었죠. (@font-..

2022. 7. 7.

Blog/CSS

프롤로그 [아무튼 Sass] 1. 시작하기의 다음 글입니다. 두 번째 글이지만 어느덧 반년만... 😉💦 이런 분들을 위한 글입니다. - CSS를 다룰 수 있어요 - 하지만 Sass는 1도 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 👈 Here! 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - 중첩, 부모참조 선택자 - 변수, 보간 - 인라인 주석 - 출력스타일 설정 1) 중첩: 이것이 "C"SS 지난 글에서는 Sass 만 설치하고 똑 끝나버려서 '왜 굳이 이걸 설치해서 써야하지 🤔' 하는 ..

2022. 4. 5.

Blog/CSS

프롤로그 "CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다" ......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다. 신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지, Sass에 대해 한번 정도 슥- 읽어두면 도움이 많이 될 거에요! 그래서 최대한 쉽고 편하게 익힐 수 있도록 시리즈물(?!)로 글을 써봅니다. 분량이 얼마나 될진 저도 몰라요 ∠( ᐛ 」∠)＿ 헿 (총 4편의 시리즈가 되었습니다 ✌️✌️) 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 👈 Here! 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장..

2021. 7. 10.

Blog/CSS

프롤로그 왜 제목이 저러냐면요... 얼마 전까지 ‘더보기’ 버튼이 생각과는 다르게 동작한 적이 있‘었’습니다. 위와 같이 더보기 버튼을 클릭하면 그 위로 아이템을 추가하는 형식의 UI였는데, 이상하게 버튼이 고정된 채로 버튼 위에서 새로운 아이템이 추가됐었거든요. 기획: "더보기 버튼을 누르면 추가 영역이 아래에 펼쳐지는 게 아니라 위로 올라가는 느낌이 들어요." 디자인: "그러게요. 버튼은 고정이고 내용이 위에서 열리는 형식 같은데... 밑으로 열리게 가능한가요?" UI개발: ???? 확인해보니까 다른 브라우저에선 해당 현상이 없고, Chrome 브라우저에서만 버튼 또는 a 태그와 같은 포커스가능 요소를 클릭한 경우 해당 현상이 발생했습니다. 또, 돔 추가뿐만 아니라 display나 max-height..

2020. 11. 22.

Blog/CSS

프롤로그 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다. 사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는 경우 이미지가 무너지지 않게 조절할 필요가 있죠. 이번에 object-fit 이란 속성을 알게 되면서, 이미지를 컨테이너 안에서 정렬하는 3가지 방법을 정리해봤습니다 🙋‍♀️ 1. object-fit 나 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있어요. 너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편합니다. img { width: 300px; height: 150px; object-fit: cover; } object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉..

2020. 7. 18.

Blog/etc.

프롤로그 아직 개인홈피*^-^*가 유행하던 시절, 저도 홈페이지를 만들고 싶어서 금손님들의 스킨을 다운받곤 했었는데요. 그때 css파일을 보고 이건 뭘까... 얘는 왜 메모장으로 열리지... 했던 기억이 납니다. 네, TMI였습니다. 그래서(?) 오늘은 CSS를 배웠습니다. 익숙치 않은 개념이라 혹시나 잘못된 내용이 있으면 언제든 말씀 부탁드립니다. (천사님들 사랑합니다!) CSSOM CSS로 트리 만들기 지난 글에서 브라우저는 HTML을 보고 토큰화 과정을 통해 DOM을 만들어낸다고 했습니다. CSS도 이와 유사합니다. 한쪽에서 마크업을 해독하는 동안, 한쪽에서는 스타일시트를 보고 CSS Object Model(=CSSOM)을 만들어냅니다. 자, 브라우저가 HTML을 보고 뚝딱뚝딱 DOM을 설계하는 동..

2020. 6. 9.

Blog/JavaScript

전부터 계속 써보고 싶었던 ScrollMagic 라이브러리!!! 를 드디어 공부해봅니다 (꺅) 참고한 글은 아래와 같습니다. - Building Interactive Scrolling Websites with ScrollMagic.js [링크] 1. 초기 설정 우선 아묻따 ScrollMagic을 도입해줍니다. CDN은 아래와 같습니다. 저 debug로 시작되는 파일은 화면에 인디케이터를 표시해주는데, 덕분에 좀 더 수월하게 작업이 가능합니다. 이 라이브러리는 jQuery도 지원해주는 거 같던데 여기선 그냥 바닐라로 작성하겠습니다ㅎㅎ 그리고 수려한 애니메이션 제작을 도와줄 GSAP도 도입합니다. GSAP 이외에 Velocity도 지원하고 있지만, 이 글에 따르면 GSAP이 좀 더 크로스브라우징이 잘 되어 ..

2019. 8. 26.