본문 바로가기

css

[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] 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.. 더보기
[CSS] bootstrap(부트스트랩)과 css같이 사용하기 프론트엔드를 준비하시는 분이라면 한번쯤은 들어봤을 bootstrap이다 css를 특히 반응형을 만들때 아주 효과 적이고 시간을 획기적으로 단축시켜 주는 일종의 라이브러리이다 이 Bootstrap은 링크를 불러옴 쉽게 말하면 bootstrap에 저장되어 있는 고유 디자인 툴을 나의 css로 불러오는 것 여기서 bootstrap 클래스를 사용하게 되는데 Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere 코드를 보면 class= card 또는 class= card-img-top 등 지정된 클래스를 사용해야 부트스트랩을 쓸 수 있다 여기서 내가 css.. 더보기
[CSS] box-sizing : border-box 박스를 이리저리 옮기고 위드랑 하이트 값을 이리저리 만들어 줘도 클론 코딩을 할 때, 혼자 만들어 볼 때, 따라서 코드만 쳐볼 때 등등 분명 똑같이 했는데 나는 다른 box크기가 나오면 당황하게 된다 예를 들어 이미지 첫번째는 원래 애니메이션을 줘 정사각형의 모양으로 좁혀 들어가는 효과를 줘야 한다 그런데 오른쪽으로 박스가 좀 더 나와 라이트와 바텀이 안 보이는 것을 볼 수 있다 이럴 때 box-sizing: border-box; 한 번 줘보자 이 코드가 이렇게 이렇게 어떤 원리로 돌아간다! 자세하게 설명 할 순 없지만 box-sizing을 주지 않으면 이런 식 이 아닐까 싶다 부모 컨테이너 여백에 자식을 포함시키지 않기 때문인 거 같다 box-sizing을 준 상태 결과 잘 나오는 애니메이션! 그래서 .. 더보기
[CSS] flex-box(플렉스)로 쉽게 정렬하기 내가 배운 css의 flex에 대해 알아보고자 한다 어떻게 사용하는지 바로 보자 이렇게 생긴 red 박스와 blue 박스 여기서 display: flex; 를 주면 가로가 되고 여기서 flex라고 하는 부모 태그에 width를 주고 .flex { padding: 20px; display: flex; width: 1000px; justify-content: space-between; background-color: gray; } justify-content: space-between; 을 주게 되면 width의 양쪽 끝에 달라붙는걸 볼 수 있다 쉽게 말해 두 박스가 줄다리기하듯 찢어져 붙은 것 이걸 잘 활용하면 box를 이리저리 옮기고 float을 쓰고 하지 않아도 쉽고 깔끔하게 정돈된 레이아웃을 만들 수.. 더보기

티스토리툴바