본문 바로가기

CSS22

border 알아보기 1. border? border은 테두리에 효과를 주는 것으로 선 두께, 스타일, 색상을 지정할 수 있다. CSS에는 { border: border-width(선 두께) border-style(선 스타일) border-color(선 색상) } 순으로 넣어 사용하면 된다. 2. border 속성 [border-width(선 두께)] medium / thick / thin / length / px 값을 넣어 선 두께를 나타낸다. [border-style(선 스타일)] solid(실선) / dotted(점선) / dashed(짧은 선) / double(이중 실선) / groove / ridge / inset / outset / none / hidden 값을 넣어 선 스타일을 나타낸다. 3. 적용 예제 2022. 9. 6.
그라디언트 CSS 소스 만들어주는 사이트 CSS를 이용해서 그라디언트 효과를 나타낼 수 있다. 하지만 포토샵만큼 정교하게 원하는 그라디언트 디자인을 구현하기 쉽지 않아 보통은 그라디언트 이미지를 사용했다. 그런데 이번에 원하는 디자인으로 그라디언트 CSS 소스가 자동 생성되는 유용한 사이트를 알게 기록해 두려 한다. * 사이트명을 클릭하면 해당 페이지로 이동합니다. CSS Gradient 사이트 CSS Gradient 사이트는 색상 추가가 자유롭고 다양한 효과가 바로바로 적용되기 때문에 쉽고 빠르게 그라디언트 CSS를 만들 수 있다. 원하는 그라디언트 디자인이 완성되었다면 하단에 CSS 코드만 복사해 넣어주면 자신이 만든 그라디언트 디자인이 적용된다. 2022. 9. 2.
블록 요소와 인라인 요소 차이점 1. 블록 요소와 인라인 요소 [블록 요소] 블록 요소는 혼자 한 줄을 차지하는 요소로 너비가 100%이다. 즉, 블록 요소의 옆에 다른 요소가 올 수 없는 것을 의미한다. 블록 요소 안에는 텍스트와 인라인 요소가 포함될 수 있으며 다른 블록 요소 또한 포함될 수 있다. 패딩이나 마진 등을 이용해서 크기를 정하려면 블록 요소여야만 가능하다. [인라인 요소] 인라인 요소는 줄을 차지하지 않는 요소로 화면에 차지하는 만큼 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있다. 즉, 한 줄에 여러개 인라인 요소가 표시될 수 있다. 인라인 요소 안에는 텍스트와 인라인 요소가 포함될 수 있지만 블록 요소는 포함될 수 없다. 종류 태그 블록 요소 , , ~ , , , , , , , , , 등 인라인 요소 , , .. 2022. 9. 1.
CSS :after, :before 와 ::after, ::before 차이점 ( : ) 와 ( :: ) 차이점 : 은 CSS2에서 사용된 문법이고 :: 은 CSS3에서 사용된 문법이다. CSS2에서는 가상 요소와 가상 클래스 모두 : 를 사용하고 CSS3에서는 가상 요소는 :: 를 사용하고 가상 클래스는 : 를 사용한다. [CSS2] 가상 요소 : :after, :before 가상 클래스 : :focus, :hover [CSS3] 가상 요소 : ::after, ::before 가상 클래스 : :focus, :hover CSS3에서 ::를 사용하는 건 가상클래스와 가상 요소를 명확히 구분하기 위함이지만 : 은 IE8이상부터 사용되고 :: 은 IE9부터 사용되기 때문에 CSS2 문법대로 :afterr :before 계속 사용해도 문제는 없다. 2022. 8. 31.

티스토리툴바