박스 모델은 테두리(border)와 내용(content) 그리고 안쪽 여백(padding)과 바깥쪽 여백(margin)의 네 가지 요소로 구성됩니다. 각 요소는 상, 하, 좌, 우 네 영역을 개별적으로 설정할 수 있다 . Contents box - 콘텐츠 영역으로 텍스트 및 이미지의 실제 영역 Padding box - 테투리와 콘텐츠 사이의 안쪽 여백. :각각의 값은 top, right, bottom, left로 시계방향입니다. p { border: 10px 20px 30px 40px;}​​ Border box - 박스를 둘러싼 테투리 영역. :테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확..

절대 길이 단위 다음은 모두 절대 길이 단위이며 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주하며 보통 사용하는 단위는 px (픽셀) 입니다. px : 글꼴의 크기를 고정하는 단위, 작은 글씨글 보기 힘든 사용자가 브라우저의 기본 글꼴의 크기를 더 크게 설정하더라도 초기값으로 고정된다. 상대 길이 단위 상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있다 % : 상대적으로 부모요소의 사이즈에 영향을 받아 크기가 조절된다. em : em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말한다 =>폰트사이..

클래스선택자 주어진 class 특성을 가진 모든 요소를 선택한다 ID 선택자 id 특성에 따라 요소를 선택. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재한다 Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector)이다 Combinators selectors : 복합선택자 자식 : child 차일드 : 직속 하위요소. 부모 : parent : 직속 상위요소. 후손 : 자손, 하위의 모든 요소. 조상 : 상위 모든 요소. 형제 : 같은 부모(직속)을 공유하는 요소. E.F 일치(Basic combinator) : E, F를 동시에 만족하는 요소. E>F 자식(Child combinator) : E의 자식요소 F를 선..

HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있는 Style sheet 언어 이다 HTML 문서에 사용하는 방법은 3가지이다 Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법 해당 태그가 선택자(selector)가 되고, CSS 코드에는 속성(property)과 값(value)만 들어간다 따라서 꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있다 hello world!! Internal Style Sheet HTML 문서 안의 안에 CSS 코드를 넣는 방법 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 또 다른 HTML 문서에는 적용할 수 없다는 단점이 있다 Linking Style Sheet 별도의 CS..

시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 의미론적 요소를 말한다. 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다 : 독립적이고 자체 포함된 콘텐츠를 지정합니다. : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다. : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다. : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다. : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니..

HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어이다 , , 태그의 정의 태그는 HTML 문서의 시작광 종료를 나타내는 기본 태그 태그는 HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너로 다음을 포함 태그를 통해 브라우저 상단 타이틀 정의JavaScript 및 CSS 코드를 직접 작성하거나 외부 파일을 import 혹은 url link 연결 태그를 통해 언어설정, 브라우저 호환성설정 및 모바일 화면설정과 SEO정보를 제공함. 태그 역시 특별한 사용법은 없으며 HTML의 메인 콘텐츠 영역을 정의하는 태그로 필수 요소임. 모든 콘텐츠는 사이에 위치해야 함. 블럭(Block) 태그 블럭은 태그 구성..