coding/html + css 98
CSS box-shadow 그림자로 음각 효과 내기
css box-shadow를 이용해 음각 효과를 내보겠습니다. 1. CSS box-shadow div{ box-shadow:inset 3px 3px 3px #333; } inset box-shadow 속성에서 inset을 설정해주면 그림자가 안쪽에 생기는데 이것이 들어간 모양으로 보입니다. - box-shadow 속성 값 숫자로 된 속성 값은 순서대로 세로, 가로, 흐리게 값입니다. 흐리게 하는 부분은 생략이 가능하지만 세로와 가로 값은 꼭 적어주셔야 합니다. 마지막으로 색상 코드를 적으면 box-shadow를 사용할 수 있습니다. - 2. box-shadow 예제 See the Pen box-shadow by ssimplay (@ssimplay) on CodePen. codepen에서 보기 그림자가 어..
css 그라데이션 쉽게 넣기
css 그라데이션 쉽게 넣는 사이트를 알려드리겠습니다. 1. CSS 그라데이션 사이트 https://www.colorzilla.com/ ColorZilla - Eyedropper, Color Picker, Gradient Generator and more www.colorzilla.com ColorZilla '컬러질라'라는 사이트로 그라데이션을 css 코드로 사용할 수 있게 해 주는 사이트입니다. 백문이불여일견 바로 확인하러 가봅시다. - 2. CSS 그라데이션 고르기 Gradient 오른쪽의 Gradient 버튼을 클릭합니다. - 그라데이션 선택 그라데이션 기본 제공 팔레트가 여러 개 있습니다. 원하는 그라데이션을 선택해주세요. 만약 원하는 그라데이션이 없다면 조절 바를 이용해 직접 그라데이션을 만들어..
css background 단축 속성
css background 단축 속성을 알아봅시다. 1. css background 단축 속성 div{ background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('/images/background.jpg') } css background 속성 일단 background 속성을 하나씩 적어보았습니다. 더 많은 속성이 있긴 한데 일단 위에 적은 4개의 속성을 적용한다고 가정해봅시다. 물론 이 상태로도 css가 잘 적용됩니다. 그러나 코드가 너무 길어지고 한눈에 들어오지 않습니다. 이 코드를 한 줄로 줄여주는 방법이 css background 단축 속성입니다. - div{ backg..
text-indent CSS 들여쓰기 내어쓰기
css로 들여 쓰기와 내어 쓰기를 할 수 있는 text-indent 사용방법을 알아봅시다. 1. text-indent div{ text-indent : 1em; } text-indent text-indent에서 indent는 "들여쓰다"라는 뜻으로 글자 들여 쓰기라는 직관적인 속성입니다. 속성 값으로는 들여 쓰고 싶은 공간만큼 거리를 숫자로 적어주시면 됩니다. 단위는 px, em, % 등이 있습니다. - 2. text-indent 적용 예시 text-indent 적용 예시 text-indent 적용 예시입니다. 제 포트폴리오 사이트 중 일부인데요. 표시된 부분이 속성 값만큼 들여 쓰기 된 모습입니다. 1em을 주면 위의 이미지만큼 들여쓰기 됩니다. 포트폴리오를 직접 확인하고 싶으신 분은 아래 버튼을 눌러..
css 테두리 둥글게
css의 border-radius 기능을 이용해 테두리를 둥글게 만들어보겠습니다. 1. 테스트용 코드 각진 테두리 먼저 테스트용으로 코랄색의 박스를 하나 만들었습니다. 디자인은 테스트용이니 원하시는 디자인으로 꾸며주세요. 아래에 예제를 첨부해둘 테니 지금은 그냥 봐주세요~ - 2. 테두리 둥글게 div{ border-radius:50px; } border-radius 테두리를 둥글게 만드는 css 코드는 border-radius 입니다. 값으로는 원하는 만큼의 숫자를 적어주세요. 숫자가 클수록 둥근 모양이 됩니다. - div{ border-top-left-radius:50px; } border-radius 한쪽만 네 꼭짓점 중 하나만 선택해주면 한쪽만 둥글게 만들기도 가능합니다. border-top-le..
