연습장

https://poiemaweb.com/css3-box-model CSS3 Box Model | PoiemaWeb모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box 형태란 물론 사각형을 의미한다. 이 Box는 마진(Margin), 테두리(Border), 패딩(Padding), 콘텐츠(Contents)로 구성된다. 브라우저는 박스 모델의 크기(dimepoiemaweb.com  모든 HTML 요소는 Box 형태의 영역을 가지고 있다이 Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다.  브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다.웹디자인은 콘텐츠를 담을 박스..

https://poiemaweb.com/css3-units CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다.  1. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다.  2. 크기 단위CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.px은 절대값이고 em, %는 상대값이다.대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다.프로퍼티 값이 0인 경우, 단위를 생략할 수 있다.  2.1 px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다.  22인치 LCD 모니터..

style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. h1, p { color: red; } 1. 전체 셀렉터 (Universal Selector)* : HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다) style>    * { color: red; }    style> 2. 태그 셀렉터 (Type Selector)태그명 :  지정된 태그명을 가지는 요소를 선택한다. style>    p { color: red; }   style> 3. ID 셀렉터 (ID Selector)#id 어트리뷰트 값 :  id 어트리뷰트 값을..