본문 바로가기

CSS20

CSS - Scss vs Css in Js 동작방식 비교하기 실무에서는 각기 다른 프로젝트에 scss 와 Css in js 를 둘다 사용한다. 알고 모르고의 차이가 엄청난 업무 효율의 차이를 가져온다. 어렴풋이 알고만 있고 설명할 수 없다면 그것은 지식이 아니기 때문에(의식의 흐름대로 이해해본) scss 와 css in js 에 대한 포스팅을 올려보게 되었다. 문득 면접 질문들 중에 렌더 과정에 대한 질문이 생각났다.당시에는 면접용으로 달달 외우듯이 공부했었지만실무에서 한 모먼트씩 떠오르며 기초체력을 바탕으로 추진력과 인사이트를 얻었던 계기가 되었다.더 추가되는 지식이 있으면 계속 업데이트해볼 생각이다 CSS - Scss vs Css in Js 의 동작방식 비교하기 SCSScssom 트리를 그리기 위해서는 css 파일을 읽어야 한다.기존의 css 파일은 좀 구렸다.. 2024. 8. 4.
CSS - display 속성 inline / block / inline-block 이란 display: inline inline 속성은 텍스트 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. 대표적인 태그는 이 있다. (텍스트 크기만큼만 공간을 계산하니 레이아웃 관련 속성은 적용이 안된다.) width / height 적용 불가 margin / padding-top / bottom 적용 불가 line-height 적용 불가 , , , , , , , , , , display: block block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 가 있다. width, height, margin 등 layout 관련 속성 지정가능 , , - , , , , , , , display: inline-block inline-block 속성은 inline .. 2023. 4. 13.
CSS - 모달 내 특정 div 영역에만 scroll 적용하기 모달 안의 리스트에만 부분적으로 scroll 을 적용하려고 한다. 대충 감잡고 overflow 속성을 이용하면 되겠다 싶었는데 정확히 어떤식으로 적용해야 되는지 기억이 안났다. 그래서 잊어버릴까봐 기록해본다 :) (다음에는 overflow 속성에 대해 자세히 공부해보아야겠다!) 부모에 block 속성을 넣어주고, 스크롤 되야하는 영역에는 overflow & height 를 넣어주면 되겠다. // display: block; 새발자 테스트 모달 // height: 50vh; overflow-y: auto; ...list items 닫기 2022. 9. 28.
CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) 슬라이더 바를 만들기 위해 을 사용하였다. 그랬더니 요런 귀여운 슬라이더가 나왔다. 하지만 native 태그를 사용하게 되면 브라우저별 호환성이 좋지 않아 ui 가 깨진다. (특히 IE10 에서는 아예 호환x) 그래서 input 을 투명하게 만들어 기능만 동작하게 하고 + 그 위에 예쁜 슬라이더 ui 를 올려서 꼭두각시 노릇을 하게 만드려고 한다. CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) HTML setValue(e.target.valueAsNumber)} /> CSS input[type:range] { // 인풋창 투명하게 만들기 appearance: none; /* 공통 */ // 인풋창 포커스 시 아웃라인 제.. 2022. 9. 5.
CSS - 이미지 자르기(crop) Updated 09/21/22 crop 은 그림판에서 1초컷이지만, css 로는 로 영역을 한번더 감싸줘야 한다. 자, 여기 귀여운 고양이가 있다. CSS 로 고양이 얼굴만 잘라보도록 하자. 결과화면 미리보기 HTML CSS .bg-crop { position: relative; width: 100px; // 자를 사이즈를 명시해준다. height: 50px; overflow: hidden; .bg-cat { position: absolute; // 포지션을 주고, top: 0; // 보이기 원하는 위치를 지정 left: 0; width: 300px; // 오리지널 사이즈 height: 200px; } } **styled-component 기준입니다. 2022. 7. 7.
CSS - <li 태그> dot 스타일 변경하기 + 들여쓰기 기본적인 리스트를 정렬중인 새발자 기초를 탄탄히 다지기 위해 열심히 포스팅을 정리해보았다. 들을 사용해보았는데 오랜만에 사용해보니 부족한 것들이 눈에 들어왔다. 그럼 에 대해 좀 더 알아보러 가보자 CSS - dot 스타일 변경하기 + 들여쓰기 일단 타이틀과 정렬이 맞지 않고, 하위메뉴들도 정렬이 안되있다. 그리고 dot 크기도 마음에 안든다. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. 아래와 같이 수정을 해보자. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. HTML 커피류 아메리카노 카페라떼 에스프레소 테스트 입니다. 테스트 입니다. CSS .list { list-sty.. 2022. 7. 5.
CSS - 배경 이미지 animation 으로 이동시키기 updated 02/21/24 페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다. 이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자 결과화면 미리보기 CSS - 배경 이미지 animation 으로 이동시키기 일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자 // 이미지 태그가 있다. animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다. ** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다. 방법1 .building-img { position: absolute; // 일단 위치지정은 필수지! top: 500px.. 2022. 7. 3.
CSS - border 뾰족한 대각선 모서리 채워넣기 (feat.box-shadow) 탭 버튼을 클릭했을 때, 굵게 표시된 테두리 영역을 자세히 보면 edge가 대각선으로 뾰족하게 나와있다. 멀리서보면 잘 티가 안나지만, 확대해보면 여간 신경쓰이는 게 아니다. 이때 대각선으로 뾰족하게 보이는 edge 를 예쁘게 펴봤던 과정을 포스팅으로 정리해보았다. 결과화면 미리보기 CSS 테두리가 있는 박스 안에서 생긴 이슈이기 때문에 box-shadow 를 사용해보았다. box-shadow 는 요소의 테두리에 그림자 효과를 준다. 박스 요소 바깥은 물론 박스 안에도 그림자 효과를 줄 수 있다. box-shadow 의 inset 옵션을 사용을 사용하여 요소 안에 그림자 효과를 넣어 뾰족한 edge 를 채워넣었다. .tab-items .item { width: 100%; height: 77px; } .t.. 2022. 6. 30.
CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 오늘은 한줄짜리 아주 간단한 css 이지만 잊어버릴까봐 기록으로 남겨놓는다. 1, 3, 5번째 줄만 옅은 회색을 만들고 싶다면 ? 자 만들러가보자. 결과화면 미리보기 아래처럼 홀수 번째 태그에만 색상이 적용되어있다. CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 HTML 홀수 짝수 홀수 짝수 홀수 짝수 CSS div { background-color: white; } div:nth-child(2n+1) { background-color: gray; // 홀수만 적용 } div:nth-child(2n) { background-color: gray; // 짝수만 적용 } 요즘엔 죽어라 하지만 정체되는 느낌을 받고 있다ㅠ 스스로에게 조금이라도 나아가고 있는 거라고 다독이며 포스팅을 써본다 2022. 5. 13.
반응형

티스토리툴바