개발이 좋아서/CSS가 좋아서

css - boxmodel/boxsize, padding, margin, table

박스 모델 1) padding - 요소의 내부여백 설정 * left, right, top, bottom 각각 설정 padding-left:20px; padding-right:30px; padding-top:50px; padding-bottom:60px; * 전체설정 padding:30px; (위아래) padding:20px 30px; (좌 우) padding:20px 30px 40px; (위 좌우 아래) padding:20px 30px 40px 50px; (위 우 아래 좌) ※box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지를 지정 속성값: border-box(테두리를 기준으로 크기를 정함) content-box(컨텐츠 영역을 기준으로 크기를 정함) 2) margin - 요소의 바깥여백 설..

css - 색상값

css 색상값 1) 색상명 red, yellow, .... 2) 16진수 표현법 - RGB색상값을 각각 16진수로 변환한 것(00~ff) ex) 녹색 #00ff00 3) RGB 색상값으로 표현(0~255) rgb(r, g, b) ex) 녹색 rgb(0,255,0) 4) RGBA (0~1) - 투명도 rgba() ex) 투명한 녹색 rgba(0,255,0,0.5)

css - 텍스트 관련 스타일 속성

1) color - 텍스트의 색상을 설정 body { color: red; } body { color: rgb(255,0,0); } body { color: #ff0000; } 2) letter-spacing - 글자 사이의 간격을 설정 div { letter-spacing: 10px; } 3) text-indent - 단락의 첫줄에 들여쓰기를 지정 div { text-indent: 30px; } 4) text-align - 텍스트의 수평방향 정렬 속성값 : left/ right/ center div { text-align: center; } 5) text-decoration - 텍스트에 효과를 설정하거나 제거 속성값 : overline/ line-through/ underline/ none div { ..

css - 적용/ 선택자

css 적용 1) 내부 스타일 시트 태그 안에 태그를 사용 2) 외부 스타일 시트 style.css 생성 후 안에 태그를 사용하여 불러와서 사용 3) 인라인 html요소 내부에 style속성을 사용하여 css를 적용 ex) 선택자란? 1) tag선택자 - 태그명으로 선택 ex) div{ color: red; } 2) id선택자 - id명으로 선택 ex) #box2 { color: red; } 3) class선택자 - class명으로 선택 ex) .box{ color: red; } div1 div2 div3 4) 하위 선택자 A B 5) 자식 선택자 A > B 6) 형제 선택자 A + B 7) 연속 선택자 A, B 8) 모든 태그 선택자 * 9) ※가상 선택자 (띄어쓰기 주의) a:link 방문하지 않은 ..

css 기초정리

css 표현언어 1. 외부 스타일 시트사용 style.css 2. 내부 스타일 사용 css구문작성 3. 인라인스타일 사용방법 안녕하세요 div입니다. css구문 - 선택자{ 속성:속성값; } ex) div { font-size: 24px; } css 주석 처리 방법 - /**/ 선택자 1. 태그 선택자 - html요소의 태그명으로 선택 태그명 { 속성: 속성값; } ex) div { font-size: 24px; } 2. 아이디 선택자 - html요소의 아이디명으로 선택 (앞에 #을 써준다. #없으면 태그 선택자) #아이디명 { 속성: 속성값; } ex) #header { font-size: 24px; } 3. 클래스 선택자 - html요소의 클래스명으로 선택 (앞에 .을 써준다.) .클래스명 { 속성:..