CSS3 grid

CSS Grid Layout CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해줄 수도 있습니다. See the Pen CSS grid by miok (@slog-miok) on CodePen. display: grid 그리드 컨..

2022.01.11

CSS3 filter

filter CSS의 filter 속성은 요소에 흐림 또는 색상 변화 등의 그래픽 효과를 적용합니다. 필터는 일반적으로 이미지, 배경 및 테두리의 렌더링을 조정하는 데 사용됩니다. Syntax /* values */ .filter{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); } /* Multiple filters..

2022.01.07

CSS3 animation

CSS3 animation CSS의 속성을 이용하여 애니메이션을 표현 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션보다 다음 세가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. 자바스크립으를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못했다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다. 브라우저는 애니메이션의 성능을 효율적으로 최적화 할 수 있다. 예를 들어 현재 안보..

2021.11.18

벤더 프리픽스 (Vendor Prefix)

Vendor Prefix? 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다. 벤더프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 버전의 웹 즈라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다. 주요 웹 브라우저의 벤더 프리픽스 (vendor prefix) 주요 웹 브라우저가 사용하고 있는 벤..

2021.11.17

CSS3 Color (feat. alpha)

CSS3 COLOR CSS3에서는 컬러값을 rgba, hsla로 사용할 수 있다. 마지막 값인 alpha로 투명도 조절까지 가능해졌다. 또한 단계적 색 적용을 위한 그라디언트 속성이 추가되었다. 배경색 뿐 아니라 모든 색상의 속성을 지정하는 곳이면 사용 가능하다. 1. rgba([r],[g],[b],[a]); .rgbBox{ background:rgba(0,255,0,0.3); } r: 빨간색의 수치 0~255 g: 녹색의 수치 0~255 b: 파란색의 수치 0~255 a: 투명도 0~1 2. hsla([h],[s],[l],[a]); .hsla_box{ background:hsla(0,100%,60%,0.4); } h: 색상 값 0~360 s: 채도 0~100% l: 명도 0~100% a: 투명도 0~1..

2021.11.12

CSS3 선택자(Selector), 가상선택자(Virtual selector)

CSS Selector CSS3에서는 선택자 속성이 새롭게 추가되었다. selector를 사용하게 되면 id나 class를 대폭 줄일 수 있는 장점이 있다. 배분 대표사업의 핵심 브랜드화 창의적 배분구조/사업/플랫폼의 인큐베이팅 공익단체 역량의 집중 강화(교육,컨설팅) 사회이슈에 대한 전자구적 인식과 대응 창의적 참여적 시민기부모델 개발 창립 10주년 기념 사이트 "나눔으로 함께 만든 10년"사이트 오픈 서울시 강남구 역삼동 000-000번지 tel:00-000-0000 유사클래스 네임 (해당 문자를 포함하는 클래스 명) li[class^=yul] class 이름이 yul로 시작되는 li 요소 li[class$=seot] class 이름이 seot로 끝나는 li 요소 li[class*=hana] clas..

2021.11.12