css9 CSS box-shadow 속성 사용방법 정리 안녕하세요! 오늘은 요소의 테두리에 그림자 스타일을 설정하는 box-shadow 속성에 대해 알아 보려고 합니다. 자주 사용하는 속성인데 내부 속성 인자 값이 많고 정확한 의미를 모르고 사용하는 경우가 많아서 정리해보려고 합니다! 속성 내부 설정 값 그림자의 위치를 설정하는 첫번째, 두번째 길이설정 값입니다. offset-x 값이 양수일 경우 오른쪽으로 그림자나 나타나고 음수일 경우 왼쪽으로 그림자가 표시됩니다. offset-y 값이 양수일 경우 아래쪽으로 그림자나 나타나고 음수일 경우 위쪽으로 그림자가 표시됩니다. 그림자 테두리의 흐린 정도를 나타내는 세번째 길이설정 값입니다. 이 값이 클 수록 그림자 크기는 더 커지고 색은 더 밝아 집니다. 음수 값은 사용할 수 없고, 기본값은 0으로 설정하지 않을 .. 2022. 12. 28. CSS margin 속성 사용법 정리 CSS에서 요소 바깥쪽 여백을 설정하는 margin 속성. 정말 많이 사용하는 속성인데 사용하는 방법도 다양하고 사용할 때마다 혼동이 오는 경우가 많아서 오늘 margin 속성 사용법을 정리해 보려고 합니다! 우선 margin 속성을 지정할 div 요소와 영역을 만들어 주겠습니다. 그럼 이제 margin 속성을 부여하며 사용법을 알아 볼까요? 방법1. 내부 속성 이름(left, right, top bottom) 을 모두 지정해 주기 첫번째 방법은 모든 속성을 하나하나 지정해 주는 방법입니다. .inner_area { margin-top: 40px; margin-right: 20px; margin-bottom: 30px; margin-left: 50px; border: 2px solid black; wid.. 2022. 12. 27. CSS box-sizing 속성 (영역, 기준 정리) 안녕하세요! 오늘은 컨텐츠의 영역과 위치의 기준을 정할 수 있는 css box-sizing 속성에 대해 정리해 보려 합니다. css에서 다음과 같이 속성을 설정 할 경우 화면상에 실제 요소의 크기는 어떻게 나타날까요? [html] 아래의 왼쪽 이미지 처럼 내부 width 길이가 200px로 잡히고 padding영역과 border영역이 더해져 전체 width 길이가 300px로 나타 날까요? 오른쪽 이미지 처럼 전체 길이가 200px로 잡히고 내부 영역의 길이가 100px로 나타 날까요? 결과 화면은 box-sizing 속성과 관련이 있습니다. box-sizing 속성을 별도로 지정하지 않을 경우 content-box속성으로 설정 되기 때문에 결과 화면은 왼쪽 화면 처럼 나타나게 됩니다! 그럼 box-si.. 2022. 12. 21. CSS 초기화 (Reset CSS) 안녕하세요! 오늘은 CSS 초기화에 대한 내용을 정리해 보려 합니다. 웹페이지를 만들며 자주 사용하는 태그가 있으신가요? 기본적으로 사용하는 태그들을 나열하여 페이지를 하나 만들어 보겠습니다! 링크예제 입니다. li 첫번째 example li 두번째 example li 세번째 example li 네번째 example div 영역 strong 태그 address 태그 h1 태그 예제 h2 태그 예제 h3 태그 예제 대표적으로 사용하는 생각나는 태그들을 사용하여 html 파일을 작성 하였습니다. 결과 화면도 확인해 볼까요? 우리가 예상하는 일반적인 결과 화면 입니다. 하지만 위 내용을 개발자 도구창을 열고 조금 자세히 살펴 보겠습니다. 자세히 보시면 margin, padding, color, font와 같은.. 2022. 12. 14. 이전 1 2 3 다음