티스토리

nana_log

검색하기

블로그 홈

nana_log

nykim.work/m

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

구독자: 35

방명록 방문하기

주요 글 목록

[아무튼 Sass] 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 프롤로그 백만 년 만의 업데이트! 이제 시리즈의 마지막 글입니다 😎 흐름제어와 함수를 통해 Sass를 더 멋진 방법으로 활용해 봅니다. 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 👈 Here! 이번 글에서 다루는 것: - @if, @each 등의 흐름제어문 - list 변수와 map 변수 - 내장 모듈이 제공하는 사용하기 - @function 로 직접 함수 만들기 1) 흐름 제어 Sass의 기본 특징들은 다 살펴봤으니 이번에는 좀더 기깔나게 활용해 볼 차례입니다. 먼저 흐름 제.. 공감수 17 댓글수 6 2022. 11. 5.
[아무튼 Sass] 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 프롤로그 시리즈의 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-.. 공감수 20 댓글수 15 2022. 7. 7.
[아무튼 Sass] 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 프롤로그 [아무튼 Sass] 1. 시작하기의 다음 글입니다. 두 번째 글이지만 어느덧 반년만... 😉💦 이런 분들을 위한 글입니다. - CSS를 다룰 수 있어요 - 하지만 Sass는 1도 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 👈 Here! 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - 중첩, 부모참조 선택자 - 변수, 보간 - 인라인 주석 - 출력스타일 설정 1) 중첩: 이것이 "C"SS 지난 글에서는 Sass 만 설치하고 똑 끝나버려서 '왜 굳이 이걸 설치해서 써야하지 🤔' 하는 .. 공감수 24 댓글수 14 2022. 4. 5.
[아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치 프롤로그 "CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다" ......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다. 신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지, Sass에 대해 한번 정도 슥- 읽어두면 도움이 많이 될 거에요! 그래서 최대한 쉽고 편하게 익힐 수 있도록 시리즈물(?!)로 글을 써봅니다. 분량이 얼마나 될진 저도 몰라요 ∠( ᐛ 」∠)＿ 헿 (총 4편의 시리즈가 되었습니다 ✌️✌️) 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 👈 Here! 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장.. 공감수 80 댓글수 38 2021. 7. 10.
SVG 아이콘 백그라운드 이미지로 활용하기 프롤로그 시안 상에 얼핏 보기에는 비슷한 꺽쇄 아이콘이 여러 개가 있습니다. 하지만 자세히 살펴보면... 서로 색도 미묘하게 다르고 크기도 달라요..!! 이걸 표현하려면 총 세 개의 이미지가 필요합니다. 저 아이콘을 위해 이미지를 세 장이나 불러와야 한다니.... 스프라이트로 저장해서 사용하는 방법도 있긴 하지만, 만약 수정사항이 생기면 어떨까요? 이렇게 형태는 같지만 크기가 더 크고 색이 다른 아이콘이 필요해졌다고 해봅시다. 스프라이트 이미지를 가져다 쓰려고 해도 기존 거는 크기랑 색이 달라서 대응할 수가 없..죠......ㅠ_ㅠ 만약 저 아이콘이 픽셀이 아니라 코드라면 수정하기 참 편할 텐데요! 그럼 필요할 때마다 이미지의 색상 값과 크기 값을 변경해서 사용할 수도 있을 거고요. 이럴 때 필요한 게 .. 공감수 47 댓글수 14 2021. 4. 11.
스크롤 앵커링: 더보기 버튼이 이상했'었'던 이유 (overflow-anchor) 프롤로그 왜 제목이 저러냐면요... 얼마 전까지 ‘더보기’ 버튼이 생각과는 다르게 동작한 적이 있‘었’습니다. 위와 같이 더보기 버튼을 클릭하면 그 위로 아이템을 추가하는 형식의 UI였는데, 이상하게 버튼이 고정된 채로 버튼 위에서 새로운 아이템이 추가됐었거든요. 기획: "더보기 버튼을 누르면 추가 영역이 아래에 펼쳐지는 게 아니라 위로 올라가는 느낌이 들어요." 디자인: "그러게요. 버튼은 고정이고 내용이 위에서 열리는 형식 같은데... 밑으로 열리게 가능한가요?" UI개발: ???? 확인해보니까 다른 브라우저에선 해당 현상이 없고, Chrome 브라우저에서만 버튼 또는 a 태그와 같은 포커스가능 요소를 클릭한 경우 해당 현상이 발생했습니다. 또, 돔 추가뿐만 아니라 display나 max-height.. 공감수 17 댓글수 11 2020. 11. 22.
반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성 프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히어뤼고! 이 시리즈의 이전 글: 반응형 웹 뚝딱 만들기 (1) 1. vw / vh CSS 작업을 할 때 주로 사용하는 단위는? 픽셀(px)이요! 하지만 고정 단위인 px 대신 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있어요. 예를 들어 width:50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS죠! %말고도 유연한 값을 가지는 단위가 몇 개 있는데요, 우선은 vw, vh라는 친구들을 만나봅니다 🙋‍♀️ v, 뷰포트를 기준으로 하다 이들의 풀네임은 Viewport Wid.. 공감수 422 댓글수 39 2020. 8. 23.
반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다. (투비 컨티뉴!) 1. meta 태그 - viewport VS CODE 등에서 자동 html을 생성해 보신 적이 있으신가요? (! 치고 tab키를 누르면 뿅하고 나오는 그거요) 이때 기본으로 작성되는 내에 아래의 태그가 들어간 것을 볼 수 있.. 공감수 52 댓글수 14 2020. 8. 12.
[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background) 프롤로그 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다. 사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는 경우 이미지가 무너지지 않게 조절할 필요가 있죠. 이번에 object-fit 이란 속성을 알게 되면서, 이미지를 컨테이너 안에서 정렬하는 3가지 방법을 정리해봤습니다 🙋‍♀️ 1. object-fit 나 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있어요. 너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편합니다. img { width: 300px; height: 150px; object-fit: cover; } object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉.. 공감수 96 댓글수 11 2020. 7. 18.
[CSS 방법론] BEM 방식 오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려주세요! 감사히 배우겠습니다.) 1. BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻합니다. 저 세 가지로 구성된 이름을 짓는 거죠! 그리고 각각 __와 --로 구분합니다. 이렇게 생긴 클래스네임, 어디선가 본 적 있지 않으신가요? (너의 이름은...?!) .header__navigation--navi-t.. 공감수 121 댓글수 31 2020. 5. 17.
[CSS] CSS Grid (그리드) 배우기 프롤로그 레이아웃을 구현할 때 flexbox를 쓰면 참 편합니다. 플박만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에는 그리드가 좋다는 소문(?)을 들었거든요. 그래서 이번에는 grid를 배워서 좀 더 업그레이드를 해보려고 합니다. 아, 당연하지만 구 버전 IE에 대한 지원은 눈물을 머금고 포기해야 합니다. caniuse에 따르면 IE 11부터 부분 지원하고 있는데요, 그냥 Edge부터 잘 먹겠구나~ 라고 보면 될 것 같아요. 파이어폭스(특히 Developer Edition)는 개발자도구에서 CSS 그리드를 더 잘 나타내주고 있으니 학습에 참고하시면 좋겠습니다. 그리드, 일단 써봅시다 display 플렉스박스를 display: flex; 으로 선언하여 썼던 것처럼, 그리.. 공감수 32 댓글수 12 2020. 1. 29.
반응형으로 비디오(유튜브) 삽입하기 See the Pen Responsive Video by NY KIM (@nykim_) on CodePen. padding-top을 활용하는 방법 1) 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 줍니다. 2) 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 56.25%를 줍니다. Responsive Video .video-container { position: relative; width: 100%; height: auto; padding-top: 56.25%; /* 56.25%를 주는 이유는 대부분의 비디오가 16:9 비율이기 때문입니다... 공감수 7 댓글수 15 2019. 10. 31.
[CSS 3D] 인터랙티브 웹 효과 구현하기 (2) + 이 글의 내용은 인프런의 [인터랙티브 웹 개발 제대로 시작하기] 강좌의 '종합예제' 부분 내용을 담고 있습니다. + 앞부분의 내용은 [CSS 3D] 인터랙티브 웹 효과 구현하기 (1) 에 있어요! 1. 스크롤에 맞춰 캐릭터 움직이기 지금은 캐릭터가 가만히 있어도 허우적거리고 있는데, 이유는 .running 클래스를 붙인 상태로 만들었기 때문입니다. 이 클래스가 스크롤에 맞춰 유동적으로 붙도록 하면서, 방향 설정도 함께 하겠습니다. 스크롤을 내리면 캐릭터가 벽쪽을 향하는 거고, 스크롤을 올리면 캐릭터가 내쪽을 바라보는 거죠. 우선 Character() 생성자 함수 부분에서 .char에 붙어있던 .running 클래스를 제거해주세요. 자! 캐릭터의 움직임은 메서드로 만들어 제어할 건데요. 생성자 객체로 .. 공감수 1 댓글수 2 2019. 8. 12.
[CSS 3D] 인터랙티브 웹 효과 구현하기 (1) + 이 글의 내용은 인프런의 [인터랙티브 웹 개발 제대로 시작하기] 강좌의 '종합예제' 부분 내용을 담고 있습니다. 1. 3D 공간 작성하기 가장 먼저 3D 공간을 작성합니다. 양옆에는 벽이 있고, 정면에 벽이 세 개 있는 구조입니다. 마크업은 world > stage > house 구조로 이루어져있습니다. Hello! Bonjour! Namaste! 안녕하세요! 다음은 CSS 차례입니다. 일단 윈도 화면을 다 덮을 거니까 html에게 height:100%를 줍니다. html { height: 100%; } body { margin: 0; padding: 0; min-height: 100%; background: #49b293; -webkit-overflow-scrolling: touch; } 그리고 3.. 공감수 5 댓글수 5 2019. 8. 5.
[SASS] node-sass 사용하기 1. node.js 설치 (npm은 자동 설치된다) 2. 글로벌로 node-sass 설치 $ npm install -g node-sass $ node-sass -v (오류발생 시, npm rebuild node-sass를 쳐보자) 3. 명령어는 아래와 같다. $ node-sass [옵션] $ node-sass -w scss/style.scss css/style.css --output-style compressed node-sass를 전역으로 설치하면 이렇게나 편하게 쓸 수 있었다!!!! 이렇게 Compass와 작별했다 ^0^)/~ 앞으로 간단한 컴파일에는 node-sass를 쓰면 될 듯! 얼른 Gulp도 갈아타야할 텐데...ㅋㅋㅋㅋㅋ 공감수 1 댓글수 0 2019. 8. 1.
[CSS] 3D Transform 1. Perspective (투영점) 1) perspective property 보고 있는 사람의 위치를 추정하여 투영점을 명시하면 3D 환경을 만들 수 있습니다. 말하자면 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 만들어서 원근감을 주는 거죠. .scene--blue { /* perspective property */ perspective: 400px; } .panel--blue { transform: rotateY(45deg); } See the Pen Perspective property by Dave DeSandro (@desandro) on CodePen. 파란색 박스의 부모에게 perspective 속성을 주고, 박스에게는 transform을 시킨 모습입니다. 여기에서의 400px은 .. 공감수 19 댓글수 6 2019. 7. 1.
[CSS] 레이아웃을 더 편하게, Flexbox 1. Flexbox를 지원하는 브라우저Flexbox를 쓰면 훨씬(!) 더 쉽게(!!) 레이아웃을 스타일링할 수 있습니다. 기존에는 일반적으로 float 속성을 이용했는데, 이건 clearfix라는 핵이 필요했죠. 그밖에 display:table-cell 등, 원래 이러라고 만든 게 아닐텐데... 하는 속성을 써야 했습니다. 이제 Flexbox를 쓰면 가운데 정렬이고 뭐고 손쉽게 가능합니다. 다만 국내에서는 Flexbox가 그렇게 보편적이지 못한데, 그 이유는 아마 IE에 대한 지원이 영 좋지 못하기 때문인 것 같습니다. 우선 Flexbox는 IE 10부터 지원합니다. 단, prefix로 -ms-가 필요합니다. IE 10과 11에서 몇 가지 버그가 있다고 알려져 있고, 이때문에 사용하기 영 꺼려지는 것도 .. 공감수 9 댓글수 0 2019. 1. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.