TIL/CSS 10

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

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

[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

[CSS] Flex

Container 속성 display: flex; flex-direction flex-direction: row; flex-direction: column; flex-wrap flex-wrap: nowrap; (*default) flex-wrap: wrap; flex-wrap: wrap-reverse; flex-flow flex-direction + flex-wrap 의 축약형 flex-flow: row wrap; Item 메인축(flex-direction의 방향) 정렬 흔히, justify-content는 가로축 정렬, align-items는 세로축 정렬이라고 착각할 수 있는데 이는 flex-direction이 default값(=row)일 때가 많아 일반화된 것이다. flex-direction: col..

TIL/CSS 2022.09.28

[CSS] 유체 그리드(반응형) 페이지 개념

‘1분코딩’ 강의 기반 개념 정리 Abstract 데스크탑, 태블릿, 모바일 등 다양한 기기에 유동적으로 최적화 된 화면을 보여주기 위해 유체 그리드에 대한 개념을 학습한다. 주요개념 Font-size 단위: em, rem , vw, vh @media(breakpoint){} in CSS em, rem, vw, vh 왜 px 아닌 em, rem, vw, vh 단위를 써야하는가? (필요한 경우) 유지, 보수 측면에서 유리하다. 예를 들어 모든 사이즈 단위를 px로 설정하면 클라이언트의 요구 혹은 디자이너, 개발자의 필요에 의해 전체 사이즈를 일일이 수정해야하는 경우가 생길 수 있는데, rem 같은 상대단위를 쓰게 되면 html {} (= :root {})의 사이즈만 변경해주면 전체 사이즈가 수정되기 때문에..

TIL/CSS 2022.09.22

[css 애니메이션] 3D 애니메이션 - 동전 뒤집기 효과

See the Pen 3D animation(동전뒤집기) by Cheol-bae Lee (@cheolship) on CodePen. 요점. 1. position: absolute 는 단지 float과 같은 역할을 한다는 점. 2. 뒷면을 가려주는 backface-visibility: hidden; 속성 3. 원근감을 주는 perspective 속성 4. 'Y축을 기준'으로 회전 시켜주는 transform: rotateY(deg); 속성 + position:absolute로 좌우(또는 상하) 가운데 정렬을 할 때 left right 각각 0으로 시작점을 잡아주고 margin: auto를 줘야한다. 이때 정렬하는 요소는 width 값이 지정돼있어야한다.

TIL/CSS 2022.08.27