개발 메모리

display 속성 display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다. HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있는데, block, inline, inline-block, none값이 있다. none 값이면 공간조차 사라지며 해당 요소를 화면에 표시하지 않는다. /* display 속성의 기본 설정값의 변경 */ li { display: inline; } 블록(block) display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 넓이를 차지하고, 블록 요소 내에 인라인 요소를 포함할 수 있다. width, height, margin, padd..

박스 모델(box model) 모든 HTML 요소는 박스 모양으로 구성되는데 이것을 박스 모델이라 부른다. CSS에서 설정된 width와 height에 패딩, 테두리, 마진의 크기는 포함되지 않으며, width와 height을 비롯한 모든 박스모델 관련 속성들은 상속되지 않는다. 내용(content) : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. 패딩(padding) : 패딩은 내용과 테두리 사이의 간격으로 기본색은 투명하다. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리다. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격으로, 기본적으로 투명하며 배경색을 지정할 수 없다. div { width: 320px; background-color: red; padding..

사용자 인터페이스(user interface, UI) CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해준다. resize 속성 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생겨, 사용자가 직접 해당 요소의 높이나 너비를 변경할 수 있게 해준다. #width { resize: horizontal; } #height { resize: vertical; } #both { resize: both; } outline-offset 속성 outline-offset 속성은 해당 요소의 테두리와 아웃라인 사이에 공간(offset)을 추가해 준다. 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인으로, HTML 요소의 크기에..

CSS 선택자(selector)란? CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자를 사용하며, 복수개의 셀렉터를 연속하여 지정할 때는 쉼표 , 로 구분한다. h1, p { color: red; } 전체 선택자 CSS를 적용할 대상으로 head 요소를 포함한 HTML 문서 내부의 모든 요소를 선택하며, * 기호를 사용한다. * { color: red; } HTML 태그 요소 선택자 CSS를 적용할 대상으로 HTML 요소 이름을 직접 사용하여 선택할 수 있다. h2 { color: teal; text-decoration: underline; } 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 아이디 선택자는 특정 아이디 이름을 가지는 요소만을 선택해주며, 앞에 샵 기호 # 를 붙인다. HT..

@규칙(at-rule)들 Css에서 골뱅이 기호는 스타일 제어 규칙을 의미하며, 스타일 적용시에 사용한다. /* 스타일 시트 인코딩 정의 */ @charset /* 다른 스타일시트를 불러올때 정의 */ @import /* 네임스페이스로 접두사가 붙을때 정의 */ @namespace /* 미디어쿼리를 사용할때 정의 */ @media /* 페이지를 프린트 할때 레이아웃 설정을 정의 */ @page /* 글꼴을 사용할때 정의 */ @font-face /* 애니메이션을 제어하기 위한 정의 */ @keyframes /* 각 디바이스에 화면을 어떻게 표현할건지의 대한 정의 */ @viewport @import 규칙 @import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙으로, 문자 인코딩을 지..

\n\nbody { background-color: lightyellow; }\np { color: red; text-decoration: underline; }"}],["code",{"code":".text-red {\n color: red;\n border: 1px solid #bcbcbc;\n padding: 10px;\n}\n\n.text-red button {\n color: inherit;\n}\n\n.text-red p {\n border: inherit;\n padding: inherit;\n}"}]],"markups":[["a",["href","https://meyerweb.com/eric/tools/css/reset"]],["a",["href","https://necolas.github..

CSS(Cascading Style Sheets)란? CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 스타일 시트 언어로, 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다. HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 하지만, CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다. CSS 기본 구조 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다. 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리키며, 선언부는 하나 이상의 선언들을 세미콜론 ; 으로 구분하며 중괄호 { } 를 사용해 전체를 감싼다. 각 선언은 CS..