하수도키의 성장일기

개발일기/CSS

[CSS] 상단 고정, 하단 고정, 컨텐츠 스크롤 구현(Flex)

작업을 하다 보면 상단 고정, 가운데 영역차지하면서 Y축 스크롤 동작, 하단 고정하는 레이아웃을 만들어야 할 때가 종종 있다.이럴 때마다 바쁘면 기존 코드 또는 구글링, ChatGPT에게 물어보면서 어찌어찌 구현은 한다.같이 딸려오는 수많은 알 수 없는 스타일 또는 HTML 구조랑 같이.... 그래서 이번 포스팅은 제목 그대로 깔끔하게 구현 하고자 한다. 요구 사항1. 헤더 고정, 푸터 고정, 메인 영역 Y축 스크롤2. 메인 영역 공간은 항상 남은 공간을 다 차지3. 메인 영역이 넘칠 경우에만 스크롤 생기게 작업 설계전체 영역을 감싸주는 div요소 안에 header, main, footer로 구성할 예정전체 영역 높이를 설정하는 height: 100vh; 고정된 레이아웃 보장wrapper의 높이가 화면의..

개발일기/CSS

[CSS, 책리뷰] 새로운 CSS 레이아웃 - 살펴보기#1 (CSS LAYOUT, float, flex-box, BFC, grid)

CSS 전체를 다루는 책이 아닌 CSS 레이아웃에 대한 책이다. 지인 추천과 목차를 보고 마음에 들어 구매하게 되었다. http://www.yes24.com/Product/goods/60715949 float, flex, grid 등을 다루면서 CSS 레이아웃 과거부터 현재 그리고 미래를 다룬다. 목차 순서대로 리뷰해보겠다. 이번 포스팅은 1장, 2장 3장을 정리했다. 제1장 우리가 지나온 길 float 문제 .cards li { float: left; width: calc(33.333333333% - 20px); margin: 0 10px 20px 10px; background-color: darkorange; } card1 테스트입니다.테스트입니다.테스트입니다.테스트입니다. card2 테스트입니다.테..

개발일기/CSS

[CSS] CSS로 삼각형, 꺽쇠(체크박스), 화살표, 스피너, 햄버거 메뉴 그리기

개요 작업하다 보면 아이콘으로 버튼, 로딩, 메뉴 등을 표현해야 하는 경우가 있다. 예전에는 대부분 포토샵 또는 이미지 파일로 backgroud-image 속성 또는 img 태그를 이용해 작업을 했다. 하지만 CSS 스킬이 발전함에 따라 CSS로 대체 가능한 아이콘들이 생겼다. CSS로 대체하면 image를 로딩해야 하는 리소스, 용량 등에 대한 부담이 줄어들어 퍼포먼스 향상에 도움이 된다. 작업하면서 필요한 아이콘 5개 추려서 정리해봤다. CSS로 도형 그리기 삼각형 만들기 삼각형 만들기 코드를 보면 border 관련 속성들만 사용해서 만들었다. 40px보더를 적용하고 색상은 모두 투명으로 적용했다. 그다음 원하는 화살표 방향에만 red 색상을 적용해 화살표를 만들었다. 꺽쇠 만들기 꺽쇠 만들기 이미지..

개발일기/CSS

input, image 등에서 ::before 를 사용할 수 없는 이유?

input, image 등에서 ::before 를 사용할 수 없는 이유? 개요 CSS 작업하다보면 ::before, ::after 를 이용해서 처리할때가 있다. 하지만, 어떤 태그에서 작동이 안하는 경우가 있습니다. 이걸 한번 알아봅시다. ::before, ::after pseudo-elements(가상 요소)는 텍스트 입력하는 태그들과, 이미지 또는 영상을 보여주는 태그에는 사용할 수가 없다. 그 이유는 repalced elements(대체요소)때문이다, HTML 표준 렌더링 섹션에 특별한 카테고리에 자세한 설명이 있으니 참고하길 바랍니다. ,,,,,,, img,input,embed 는 가상요소가 될수도있고 대체요소가 될 수 있습니다. img 예제 // html // wrong img url // cs..

개발일기/CSS

CSS - 반응형 16:9 비율 유지하는 법

CSS - 반응형 16:9 비율 유지 개요 이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다. 자세한 내용은 위 링크를 참고해주세요. 유투브 동영상 또는 반응형 작업시에 필요한 비율에 대해 다뤄봤습니다. padding-top 사용 padding-top 또는 padding-bottom 사용 padding 값은 요소의 width을 참조한다. width값이 100px이고 padding이 20%이면 px로 계산하면 20px이다. padding-top을 56.25%을 주면 16:9 비율로 보인다. height: 0을 주면 박스 모델 높이에 영향을 주는 것이 padding-top밖에 없다. .video { overflow:hidden; padding..