반응형 💕IT 공부하기40 [CSS3] box-sizing : 볼록 요소의 넓이와 높이 값 안에 padding과 border 값 포함하기 기존 웹 표준 코딩 시에는 특정 볼록 요소에 넓이 값과 높이 값을 설정한 뒤, 해당 요소에 padding과 border를 설정해줘야 할 경우, 넓이와 높이 값에서 padding과 border의 수치만큼 일일이 빼줘야 했습니다. 넓이와 높이 값을 계산하기 편하기 위해 100px 단위로 맞추어 놓았는데 border값 하나 떄문에 해당 요소의 값이 98px로 지저분하게 깨지는 경험을 해보았다면 box-sizing 속성이 아주 반갑게 느껴지실겁니다. 해당 속성을 추가해주면 굳이 넓이 값과 높이 값에서 padding과 border값을 일일이 빼주지 않아도 브라우저가 알아서 해당 수치를 제외한 넓이 값과 높이 값을 계산해주는 편리한 기능입니다. (1) box-sizing : border-box; box-sizing.. 2023. 4. 25. [CSS3] background-size : 배경 이미지의 크기 조절하기 기존의 CSS에서는 특정 요소 안에 들어가는 배경 이미지의 크기를 임의로 변경할 수 없었습니다. 결국, 일일이 해당 박스의 크기에 맞게 포토샵에서 이미지의 사이즈를 조절해야 했지만 CSS3의 background-size를 이용하면 배경에 들어갈 이미지를 다양한 방법으로 리사이즈할 수 있습니다. (1) background-size : 넓이 값 높이 값; background-size : cover; background-size : contain; 배경 이미지의 크기를 지정하는 데에는 3가지의 방법이 있습니다. 일반적으로 풀 스크린 환경에서의 배경 이미지 사이즈는 background-size:cover;를 주로 활용합니다. 다음의 예제를 통해 background-size의 기본 개념을 숙지해 보겠습니다. 태그.. 2023. 4. 24. [CSS3] gradient : 배경에 그라디언트 색상과 모양 지정하기 border-radius와 마찬가지로 특정 요소의 배경에 그라디언트 색상을 지정하기 위해서는 일일이 포토샵에서 이미지 작업을 한 뒤, CSS에서 background 속성을 지정해 줘야 했습니다. 하지만 CSS3 gradient를 이용하면 간단히 CSS의 코드 수정만으로도 원하는 그라디언트의 모양과 색을 자유자재로 변형할 수 있습니다. (1) background : 그라디언트 모양(방향, 색상1, 색상2); ※ 그라디언트의 색상의 개수는 원하는 만큼 추가할 수 있습니다. 그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다. 다음의 예제를 통해 gradient 속성 값에 따라 달라지는 모양의 변화를 확인해보겠습니다. 4개의 를 생성한 후 에 공통으로 넓이와 높이 값을 지정해 준 후, nth-c.. 2023. 4. 19. [CSS3] border-radius : 사각형의 모서리를 둥글게 하기 기존 XHTML의 코딩 시절에는 특정 사각형 박스의 모서리를 둥글게 하기 위해서 일일이 포토샵으로 배경 이미지를 제작해야 했습니다. 하지만 CSS3에서 새롭게 추가된 border-radius라는 속성을 이용하면 포토샵의 도움 없이 순수 CSS 기술만으로도 간단하게 사각형의 모서리를 둥글게 하거나 원 형태의 모양으로 변형할 수 있습니다. (1) border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; 다음의 예제를 통해 border-radius의 기본 개념을 숙지해 보겠습니다. 2개의 태그를 생성합니다. 태그에 넓이와 높이를 각각 300px로 동일하게 적용한 후, nth-child를 이용해 첫 번째 에는 네 모서리의 곡률을 각기 다르게 설정하고 두 번째 에는 네 모서리에 공통으로 해당 넓이의 절반.. 2023. 4. 19. [CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기 text-shadow와 box-shadow를 이용하여 요소에 그림자를 추가해 주는 기능입니다. 포토샵에서의 drop-shadow와 비슷한 기능이라고 이해하면 될 것 같습니다. (1) text-shadow : 텍스트에 그림자 추가하기 text-shadow : 가로축거리 세로축거리 퍼짐도 색상; 다음의 예제를 통해 text-shadow의 사용법을 알아보겠습니다. TEST1 TEST2 2개의 태그를 이용하여 텍스트를 입력합니다. 태그에 공통으로 글자의 모양을 설정해 준 뒤, nth-child를 이용하여 text-shadow에 각기 다른 속성 값을 입력합니다. 첫 번째 태그에는 그림자의 가로축과 세로축 거리를 플러스 값으로, 두 번째 태그에는 마이너스 값으로 설정한 뒤, 퍼짐도 의 수치를 2배 정도 증가시킵니다.. 2023. 4. 17. [CSS3] CSS가상 선택자 정리 및 비교 (first-child, last-child, nth-child, nth-of-type, ) (1) nth-child :nth-child(1) = 첫번째 선택 span p span p span p p p p p :nth-child(2n) = 두번째 마다 선택 span p span p span p p p p p :nth-child(2n+1) = 첫번째 요소부터 2번째 마다 선택 span p span p span p p p p p :nth-child(2n+5) = 다섯번째 부터 2개 마다 선택 span p span p span p p p p p :nth-child(-2n+5) = 첫번째 요소부터 5번째 요소까지 2개 마다 선택 span p span p span p p p p p :nth-child(n+5) = 5번째 부터 모두 선택 span p span p span p p p p p :nth-chi.. 2023. 4. 12. 이전 1 2 3 4 5 ··· 7 다음 반응형
