본문 바로가기

html & css/개념55

필터(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.
미디어쿼리 기본 미디어쿼리란? - 미디어의 상태를 미디어에게 물어봐서 상태에 따라 다른 디자인을 할 수 있게 하는 것 - 미디어에 적합한 디자인, 적합한 표현을 할 수 있게 해주는 기술, 반응형 디자인 - 화면의 크기에 능동적으로 디자인이 반응해 최적화된 모습을 보여줌 미디어쿼리에서의 캐스케이딩 -> 500px 이하는 배경색을 빨강색으로, 501px부터 600px이하일 때 배경색을 녹색으로 하고 싶을 때 아래의 코드를 작성하면 500px 이하일때도 녹색이 된다. -> 캐스케이딩 때문 DOCTYPE html> @media screen and (max-width: 500px) { body { background-color: red; } } @media screen and (max-width: 600px) { body { b.. 2023. 11. 24.

티스토리툴바