수니리즘

기존의 CSS에서는 특정 요소 안에 들어가는 배경 이미지의 크기를 임의로 변경할 수 없었습니다. 결국, 일일이 해당 박스의 크기에 맞게 포토샵에서 이미지의 사이즈를 조절해야 했지만 CSS3의 background-size를 이용하면 배경에 들어갈 이미지를 다양한 방법으로 리사이즈할 수 있습니다. (1) background-size : 넓이 값 높이 값; background-size : cover; background-size : contain; 배경 이미지의 크기를 지정하는 데에는 3가지의 방법이 있습니다. 일반적으로 풀 스크린 환경에서의 배경 이미지 사이즈는 background-size:cover;를 주로 활용합니다. 다음의 예제를 통해 background-size의 기본 개념을 숙지해 보겠습니다. 태그..

border-radius와 마찬가지로 특정 요소의 배경에 그라디언트 색상을 지정하기 위해서는 일일이 포토샵에서 이미지 작업을 한 뒤, CSS에서 background 속성을 지정해 줘야 했습니다. 하지만 CSS3 gradient를 이용하면 간단히 CSS의 코드 수정만으로도 원하는 그라디언트의 모양과 색을 자유자재로 변형할 수 있습니다. (1) background : 그라디언트 모양(방향, 색상1, 색상2); ※ 그라디언트의 색상의 개수는 원하는 만큼 추가할 수 있습니다. 그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다. 다음의 예제를 통해 gradient 속성 값에 따라 달라지는 모양의 변화를 확인해보겠습니다. 4개의 를 생성한 후 에 공통으로 넓이와 높이 값을 지정해 준 후, nth-c..