와구와구

CSS 알아보기(3)

* {margin: 0; padding: 0;}먼저 설정하기shadow 내용 #div1 { width: 100px; height: 100px; background-color: gray; color: wheat; font-size: 20px; text-shadow: 5px 5px 10px black; /*오른쪽(음수면 왼쪽), 아래쪽(음수면 윗쪽) 뿌옇게 */ box-shadow: -5px 5px 1px red;}img { width: 100px; height: 100px;}img:hover { box-shadow: 0 0 10px black;}active#div1:active {color: blue; background-color: aquamarine;}..

CSS 알아보기(2)

margin 박스 모델#div1 { background-color: goldenrod; width: 300px; height: 300px; border: 15px solid navy; margin: 20px;}현재 태그를 바깥으로 얼마나 밀어낼 것인가border 있으면 border 기준으로 margin: 숫자 하나면 상하좌우 전부#div1 { background-color: goldenrod; width: 300px; height: 300px; border: 15px solid navy; margin: 50px 0 0 0;} margin 숫자 4개 : 위 오른쪽 아래 왼쪽으로 숫자만큼#div1 { background-color: goldenrod; ..

CSS 알아보기(1)

HTML 직접 설정 직접 css 설정 설정 글자 간격 단어 별 간격 조정 CSS 사용HTML 파일에서 내부 css 설정 모든 h2에 대해 설정됨 css 파일 사용 외부 css 설정태그에 css 링크 걸고, rel에 stylesheetcss 파일 따로 만들기!h1 {color:skyblue; background-color: gray;}css 파일 내용 id 활용한 css#div1 {background-color: gold; width: 200px; height: 200px;}#을 앞에 붙이면 id값이 div인 것에만 적용 1 2 3class 활용한 css.class01 {background-color: khaki;}.class02 {background-co..