본문 바로가기

분류 전체보기83

변형 (transform) 소개 transform - 요소의 크기 조절, 회전, 비틀기 등을 하는 것 - https://codepen.io/vineethtrv/pen/XKKEgM 통해 다양한 기능을 확인할 수 있다. DOCTYPE html> h1 { background-color: deepskyblue; color: white; display: inline-block; padding: 20px; font-size: 3rem; margin: 100px; transform: scaleX(2); /* x축으로 2배 커지는 것 */ transform: scaleY(2); /* 밑에있는게 위를 덮어버림 */ transform: scaleX(2) scaleY(2); /* 한번에 써서 두개의 값을 모두 적용할 수 있다. */ transform: s.. 2023. 11. 28.
필터(filter) filter - 이미지, 텍스트 등 그래픽 대상에게 여러가지 효과를 줄 수 있는 기능 - 포토샵 기능을 하는 속성이라고 할 수 있다. *codespan이라는 홈페이지를 통해 여러 효과를 참조할 수 있다. - grayscale, blur 등 다양한 기능이 있다. DOCTYPE html> img { transition: all 1s; /* 장면 전환 - 모든 효과에 대해서 1초 동안에 장면 전환을 한다. */ /* 1초 동안에 걸쳐서 효과가 적용된다. */ } img:hover { filter: grayscale(100%) blur(3px); } h1 { filter: blur(3px); } Cute 2023. 11. 28.
배경(background) background - 특정 요소에 원하는 배경 색상이나 이미지를 지정하는 것 - 이미지만 삽입하거나, 색상만 삽입하거나, 두가지를 동시에 사용할 수 있다. div { border: 5px solid gray; background-color: tomato; background-image: url(./img/리리.png); /* color와 image를 동시에 사용할 수 있다. */ /* 투명값을 가지고 있는 이미지를 사용 */ /* 단, 이미지가 너무 크면 배경 색상은 가려진다. */ - 배경 이미지를 반복하거나 반복하지 않을 수 있다. div { border: 5px solid gray; background-repeat: no-repeat; /* 배경 반복 X, 이외에도 repeat-x, repaet-.. 2023. 11. 28.
float 기본 및 응용 float - 붕뜨다, 부유하다 라는 사전적 의미 - 글의 본문 안에서 이미지를 삽입할 때 이미지를 자연스럽게 삽입할 때 사용하는 기법 - 삽화를 삽입하거나 레이아웃을 잡을 때 많이 사용하기도 한다. - 화면의 크기와 상관없이 레이아웃 크기가 고정된다는 단점이 존재한다. DOCTYPE html> img { float: right; margin: 20px; } Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda aperiam reprehenderit tempore doloremque magni. Aliquid ullam quibusdam debitis alias esse dolore dolores corrupti similique eaqu.. 2023. 11. 24.

티스토리툴바