CSS

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 배경색과 배경 범위 지정하기 1. 배경색 지정 : background-color background-color : #008000 | rgb(0,128,0) | green; /*16진수, rgb값, 색상이름 가능 2. 배경색의 적용범위 조절 : background-clip 종류 설명 border-box 박스 모델의 가장 외곽인 테두리까지 적용(기본값) padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스모델에서 콘텐츠 부분에만 적용 backgrond-clip : border-box | padding-box | content-box; 02 배경 이미지 지정 1. 웹 요..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 CSS와 박스 모델 1. 블록 레벨 요소와 인라인 레벨 요소 1) 블록 레벨 요소 : 태그를 이용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 - 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈됨 ex) , , , , , ... 2) 인라인 레벨 요소 : 한 줄 차지하지 않음 - 너비(width), 높이(height)를 조절할 수 없고, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 글꼴 관련 스타일 종류 속성 사용 방법 font-family 글꼴 지정 font-family: , , ... ex) font-family : "맑은 고딕", 돋움, 굴림, ... font-size 글자 크기 font-size: | | | ex) font-size : 10px font-style 이탤릭체 font-style: normal / italic / oblique(이탤릭체) font-weight 글자 굵기 font-weight : normal / bold / bolder(더 굵게) / lighter / 100~900 * 글꼴 이름이 두단어 이상일 땐 "맑은 고딕" 처럼 큰 따옴표로 묶어준다. * 글자..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 스타일과 스타일시트 1) 스타일 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2 } - 선택자 : 스타일을 어느 태그에 적용할 것인지 알려줌 - 중괄호 사이에 스타일 정보를 넣음 ex) 태그에 스타일 적용하기 p { text-align: center; color: blue; } * 한 줄로 작성해도 되고, 여러 줄로 작성해도된다. (세미콜론만 붙이면!) - 스타일 주석 : /* 주석 할 내용 */ * ctrl+ ? : 주석처리 2) 스타일 시트 - 스타일 규칙을 한눈에 확인하기 위해 한 군데 묶어놓은 것 - 브라우저 기본 스타일과 사용자 스타일로 나뉠 수 있다. - 사용자 스타일은 인라인, 내부, 외..