전체 글 16

네이버 레이아웃 따라서 만든 후기

예전에 네이버 웹사이트를 만들면서 새로 알게 되거나 느꼈던 점을 마구잡이로 적어뒀던 글을 발견하고 이번 기회에 포스팅하면서 정리해보려고 한다. 포스팅하면서 현재 코멘트 할 부분이 있다면 추가도 하고:) 우선, 네이버 페이지 레이아웃 재현하고자 했던 당시의 목적은 두 가지 였다. 강의를 보고 따라 만드는 클론코딩이 아닌 온전히 혼자 힘으로 웹사이트 레이아웃 제작해본다. 가장 대중적이고 대표적인 웹 사이트는 어떤식으로 만들어졌는지 파악한다. 열심히 해보겠다고 인터넷 강의를 구매하여 공부 하다보니 강의 영상으로 학습하는 것에 익숙해져서 강의를 다 보고 혼자서 해보는 시간을 갖질 않으니 기억에 오래 남지가 않았다. 나중에는 새로운 지식을 습득 하는 것에만 급급해서 html과 css의 기초적인 부분도 까먹을 지경..

TIL/CSS 2023.03.16

[SCSS]변수(Variables)와 믹스인(Mixin)

피그마 같은 디자인 툴에서는 variants를 만들어서 카테고리화 하여 편리하게 사용하곤 한다. SCSS에서도 변수를 만들어 이와 비슷하게 활용할 수 있다. 변수(Variables) $font-large: 3rem; $font-medium: 1.6rem; $font-default: 1.2rem; $font-small: 0.8rem; 변수 지정은 이런식으로 해줄 수 있다. 그럼 이제, 어떤 식으로 사용하는지 보자. body { font-size: #{$font-large}; } 사용법은 간단하다. #{} 안에 $로 시작하는 변수명을 입력해주면 된다. 일종의 모듈화이며, 전체 페이지에서 반복적으로 사용되는 스타일(title, btn과 같은)에 적용하면 통일감 있고 유지보수에도 편리하게 쓸 수 있을 것 같다...

TIL/CSS 2023.03.02

[GSAP ScrollTrigger] Tutorial

ScrollMagic 라이브러리 구현중 점점 복잡해지는 바람에 더 쉬운 방법을 찾다가 GSAP ScrollTrigger를 알게 되었다. 스크롤 애니메이션을 지원하는 라이브러리는 ScrollTrigger, GSAP scrollTrigger, ScrollMagic.. 등 정말 다양하고 이름도 비슷해서 헷갈리는데, 내가 처음 공부하던 ScrollMagic도 예전에나 GSAP TweenMax와 연동하여 많이 쓰인 것 같다. 현재도 꾸준히 업데이트 중이긴 하다. 하지만 요즘엔 GSAP ScrollTrigger가 더 사용하기 편리하다는 블로그 포스팅을 보고 GSAP ScrollTrigger를 공부해보려 한다. 들어가기 전에 GSAP에 대해서도 간략히 알아볼 필요는 있다. 대표적으로 많이 사용되는 애니메이션 라이브러..

TIL/Library 2023.02.28

[🪄ScrollMagic Library] 기초 1

02.17 AM 00: 36 야심한 시각. 나는 오늘도 포트폴리오 작업중이다. 배울 게 많아서 하나하나 배우다보니까 하루가 어떻게 가는지 모르겠다. 점점 진짜 박쥐가 돼가는 거 같은데.. 🦇 모든 입문자가 나와 같을까? 배우는 방식도 천차만별이라지만 내 공부 방식은 굉장히 연쇄적이다. 디자인? 포토샵 배워야지. 요즘엔 UI툴 쓴다던데 피그마도 배워볼까. 프로토타입도 만들면 좋을 것 같은데? 프로토파이 배우자. 이런 식이다… 따로 정리해두긴 했는데 갈 길이 바쁘다보니 포스팅은 미뤄뒀다. 지금은 내 포트폴리오의 핵심이라고 생각하는 ‘ScrollMagic 라이브러리’를 배우는 중이다. codepen으로 실습하면서 배운 내용 정리도 해볼 겸 이것 만큼은 바로바로 포스팅해볼 생각이다. Let's GO!! Scro..

TIL/Library 2023.02.17

[Javascript] JS 기초문법 정리

Intro 기초 없이 예제 위주로 자바스크립트를 선행하면서, 아직 실무자가 아니다보니 자주 다루지 않는 부분은 금방 잊어버리고 정보가 뒤죽박죽이라는 생각이 들었다. 이번 기회에 기초부터 차근차근 이론을 학습해보려고 한다. 나중에 다시 훑어볼 수 있게 잘 정리해보자. 데이터 형식과 같이 익숙해져버린 내용은 생략한다. 객체(Object) * const book = {} book.title = '해리포터와 마법사의 돌'; book.price = 1000000; book.fly = () => { console.log('fly') };//메서드: 객체 속성이 함수 => book = {title:'해리포터와 마법사의 돌', price:1000000, fly: f} --- const a = 100 const obj ..

TIL/Javascript 2022.10.13

[CSS] Transform, Animation 그리고 reflow

Intro 웹에서 동적인 모션을 보여주는 방법은 JS를 통한 방법도 있지만 CSS를 통해서도 간단한 형태 변화나 애니메이션을 구현할 수 있다. Transform 속성을 통한 다양한 형태 변환과 위치 이동, transition과 animation 속성을 이용한 애니메이션의 구현을 알아본다. Transform 객체의 형태를 변환하는 속성. Reflow 과정이 생략되고 하드웨어 가속(GPU 사용)을 사용해서 성능 최적화에 적합하다는 이점이 있다. Reflow와 Repaint는 될 수 있으면 줄여서 브라우저 최적화를 해주는 편이 좋다. 💡 Reflow? 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스. 문서의 일부 또는 전체를 다시 렌더링하는 데 사용된다. 개발자는 항상 브라우저의 최적화를..

TIL/CSS 2022.10.11

[CSS] Grid

Flex vs Grid 두 디스플레이 속성은 컨테이너 > 아이템으로 기본 형태는 같다. 하지만 Flex는 direction에 따라 행, 열 중 한 방향에서의 배열을 다루고 Grid는 행, 열의 배열을 동시에 다룬다는 점이 큰 차이이다. 그런 측면에선 Grid가 더 상위의 개념이라고 볼 수도 있을 것 같다. → 전체적인 페이지의 레이아웃은 Grid, 요소들은 Flex를 이용하면 효율적이다. Grid 속성 Container grid-template-columns : 폭너비 폭너비 폭너비; 폭에 사용할 수 있는 단위는 px, fr, auto grid-template-columns:1fr 1fr 1fr; grid-template-columns:200px 1fr; grid-template-columns:200px..

TIL/CSS 2022.10.05

[CSS] card-list 만들기 (flex)

Abstract 웹사이트 이용시 흔히 보게 되는 카드 형식의 리스트를 flex를 활용하여 만들어보았다. position과 float을 이용한 방법보다 비교적 최신의 방법인 flex를 활용해서 보다 간편하게 만들어보는 것이 주 목적이다. 짤막하게 마크업 구조 분석 각각의 카드는 card-item이라는 클래스를 준다 card-item의 집합은 card-list, 그리고 card-list를 한번 더 감싸는 card-list-container 썸네일과 이름, 날짜가 적힌 부분은 header.card-header, 이미지와 본문은 a.card-body card-header안에는 a.card-header-link card-header-link는 figure > img와, card-header-content 로 구성..

TIL/CSS 2022.10.04

[CSS] 썸네일과 텍스트 리스트 (이미지 처리 팁😼)

html의 img태그는 크기, 위치 조절이 번거롭다. 그래서 보통 중요도가 떨어지는 이미지의 경우에 한해서는 css background-image로 처리해주는데, 중요한 이미지까지 background-image 처리하면 웹접근성을 준수하지 못한다. 이런 경우에 이미지를 css background-image 속성으로 크기,위치 조절을 하면서 웹접근성을 위반하지 않는 트릭이 있다. Lorem ipsum dolor sit.. Lorem ipsum dolor sit.. Lorem ipsum dolor sit.. 우선, img를 담고 있는 figure 태그에 inline-style로 background-image를 불러온다. 💡 왜 inline-style인가? 썸네일 이미지 같은 경우는 보통 서버 데이터베이스에서..

TIL/CSS 2022.09.28