Just Do it

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱 CH10. CSS 고급 선택자 10-1. 연결 선택자 1) 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 1-1) 하위 선택자 - 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택한다. (자식, 손자 요소 등 모든 하위 요소 포함) // 기본형 상위요소 하위요소 - section 요소 안에 포함된 p 요소를 모두 선택하려면 section과 p 사이에 공백 한 칸을 두고 나란히 써준다. section p {....} ... section p { color = blue; } 예약 방법 & 사용 요금 내용 /* section의 모든 하위 p 요소에 적용 */ 내..

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱 CH8. 레이아웃을 구성하는 CSS 박스 모델 8-1. CSS와 박스 모델 - CSS 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 이 박스 모델이 모여 웹 문서를 이룬다. - 박스 모델에는 마진, 테두리, 패딩, 콘텐츠 등 박스가 여러 겹 들어 있다. - 이 개념은 CSS에서 자주 사용하므로 잘 기억해 두어야 한다. 1) 블록 레벨 요소와 인라인 레벨 요소 - 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 1-1) 블록 레벨 요소 - 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 한..

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱 CH7. 텍스트를 표현하는 다양한 스타일 7-1. 글꼴 관련 스타일 1) 글꼴을 지정하는 font-family 속성 - 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 이 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다. - 기본형은 다음과 같다. font-family: | [, ] - 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시된다. 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. - 따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴..

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱 CH6. CSS의 기본 6-2. 스타일과 스타일 시트 1) 스타일 형식 알아보기 -CSS 스타일 기본형: 선택자 {속성: 속성값1; 속성: 속성값2 } - 선택자: 스타일을 어느 태그에 적용할 것인지 알려주는 것 - 중괄호({ }) 사이에는 스타일 정보를 넣는다. - 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있다. - 예를 들어 텍스트 단락의 글자를 가운데로 정렬하고, 글자색을 파랑으로 지정하고 싶다면 다음과 같이 작성한다. p { text-align: center; color: blue } 2) ..