본문 바로가기

CSS

[CSS] sass를 사용하는 이유! 네스팅 문법 처음 개발을 시작할 때 꾸역꾸역 박스를 만들어 보고 마진을 넣어 보고 박스 크기는 왜 안 맞지? 분명 박스 안에 패딩을 넣었는데 왜 적용이 안되지? 그렇게 정신 없이 css를 익힐 때쯤 들려오던 sass sass sass! 그때 당시에는 sass와 css의 큰 차이가 없는 거 같아 쭉 css를 선호해 왔다 리액트를 배우기 시작하면서 찰떡궁합이라고 하는 sass를 알아본다 css와 sass로 같은 코드를 작성 했을 때를 보도록 하자 CSS .big-box { background-color: red; } .box { background-color: blue; } .box-font { font-size: 20px; } li { list-style: none; } SASS .big-box { background.. 더보기
[CSS] margin으로 가운데 정렬 간단하게 가운데 정렬을 쉽게 할 수 있는 방법이 있습니다 바로 예를 들어 보자면 아래 box를 만들었습니다 box .box { width: 300px; height: 300px; background-color: royalblue; } 왼쪽 상단에 box가 위치해 있습니다 여기서 margin을 통해 간단하게 body요소의 흐름에 따라 가운데 정렬을 할 수가 있습니다 margin: 0px auto; .box { width: 300px; height: 300px; background-color: royalblue; margin: 0px auto; } body가 상위요소가 아닌 부모 요소를 하나 만들어 가로(width)를 설정해주고 만들어 보겠습니다 box body { background-color: bisqu.. 더보기
[CSS, HTML] display(디스플레이) inline, inline-block, block inline 줄 바꿈 없이 나란히 배치되는 속성을 의미합니다 대표적인 , , 태그가 있습니다 AAA BBB CCC inline-block inline-block으로 지정된 요소들은 기본적으로 inline의 속성을 가지지만 가로와 세로를 block처럼 지정해 줄 수 있습니다 span { display: inline-block; width: 200px; height: 200px; background-color: rgb(118, 83, 29); } block 전후의 줄 바꿈이 있고 다른 엘리먼트를 밀어내고 한 줄을 차지합니다 대표적으로 , , 가 있습니다 div, h1, p{ background-color: yellow; } AAAA BBBB CCCC 더보기
[CSS] position(포지션) relative, absolute, fixed css의 position을 활용하면 일명 box라고 하는 레이아웃의 위치를 자유롭게 이동할 수 있습니다 position을 이용할 수 있는 프로퍼티가 몇 개 있습니다 relative absolute fixed 세 가지를 알아봅니다 relative 로얄블루색상의 박스를 만들었습니다 가로 100px, 세로 100px의 박스입니다 .box1 { width: 100px; height: 100px; background-color: royalblue; position: relative; } 여기에 relative 속성을 추가하겠습니다 실행시키게 되면 아무 일도 일어나지 않습니다 그 이유는 position속성을 움직일 명령어를 입력하지 않았기 때문입니다 position 속성들을 움직일 수 있는 명령 중 대표적으로 to.. 더보기
[CSS] transition을 이용한 검색 창 꾸미기 자바스크립트를 이용하면 쉽지만 CSS의 transition만으로도 간단하게 화면을 꾸밀 수 있다 CSS .navibar-search input { box-shadow: 3px 2px 1px #041562; border-radius: 5px; border: none; width: 150px; transition: all 1s; color: #041562; } .navibar-search input:focus { width: 300px; } transition = 1s(1초)에 걸쳐 시작과 최종 스타일을 보여줘 focus = 검색 창을 눌렀을때 가로 150px(시작) 에서 300px(최종)으로 보여줌 1초에 걸쳐서 나머지 css는 검색 창을 꾸미는 용도라 신경쓰지 않아도 된다 그냥 input창으로 연습가능 .. 더보기
[CSS] position-sticky(스티키)! 왼쪽 스크롤은 내려가고 오른쪽 이미지는 고정된다 이 기능으로 재밌는 css를 꾸며 볼 수 있다 position-sticky이다 HTML Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. L.. 더보기
[CSS] animation transform(트랜스폼)! CSS 애니메이션을 줄 수 있는 방법 transform 먼저 transform의 주요 기능들 transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: tran.. 더보기
[CSS] 효율적인 CSS코드 양 줄이기 CSS가 많아지면 코드가 길게 이어지기 마련 그럴 때 좀 효과적으로 코드량을 줄일 수 있다 빠르고 쉽게 CSS .btn-green { color: green; width: 100px; height: 100px; padding: 20px; } .btn-red { color: red; width: 100px; height: 100px; padding: 20px; } .btn-blue { color: blue; width: 100px; height: 100px; padding: 20px; } 이런 박스를 만든 css 코드가 있다 중복되는 width, height, padding 이런 거를 .btn-blue, .btn-red, .btn-green { width: 100px; height: 100px; paddi.. 더보기

티스토리툴바