Blank_D

패딩 [padding] 이란? 요소 내부 여백(공간)을 지정하는 단축 속성을 뜻한다. 패딩은 내부 여백이 생기는 만큼 요소의 크기가 커지는 것이 특징이다. 01. 기본 값 패딩의 기본 값은 3가지로 구성되어있다. - 0 : 내부 여백 없음 - 단위 : px, em, vw 등 단위로 지정 - % : 부모 요소의 가로 너비에 대한 비율로 지정 02. 소스 작성예시 .container .item { width: 100px; height: 100px; background-color: orange; border: 4px solid pink; } .container .item:first-child { padding: 20px; } 결과 코드를 작성하면 위와 같은 결과 값을 얻을 수 있다. 간단히 설명하자면 위에 있..

마진 margin ? 요소의 외부 여백(공간)을 지정하는 단축속성 특징 - 음수 및 양수를 사용할 수 있다. 값 - 0 (외부 여백 없음) - auto (브라우저가 여백을 계산) = 가운데 정렬 - 단위 (px, em, vw) - % (부모 요소의 가로 너비에 대한 비율) 잘 사용하지 않음. 소스 작성예시 .container { } .container .item { width: 100px; height: 100px; background-color: orange; margin: 10px; } 소스풀이 - 가로 세로 100px 인, 정사각형의 상하좌우 모두 동일하게 바깥여백(margin)을 10px을 줘라. 또한, 마진은 각각의 방향을 선택하여 여백을 줄 수도 있다. .container { } .contai..

CSS 표현 단위 단위의 종류 01. px [픽셀] - 화면의 표현할 수 있는 하나의 점 - 가장 많이 사용한다. 작성 예시) div { width: 300px; height: 300px; background-color: orange; } 가로와 세로가 300개의 점을 가진 오렌지 색의 박스로 생성된다. 02. % [상대적 백분율] - 어떤 기준을 가지고, 1~100까지 백분율로 나타내는 값 - 일반적인 기준은 브라우저를 따르지만, 부모와 자식의 관계에서는 자식은 부모 크기를 기준으로 사이즈가 조정된다. .parent { width: 300px; height: 300px; background-color: orange; } .child { width: 50%; height: 50%; background-c..

CSS 속성 [Property] 01. 박스모델 - HTML요소의 기본적인 모양을 만드는 것. - 가로,세로 너비 및 내 외부 여백 등을 가진 박스 기본구조 width [가로] / height [세로] 기본 값(요소에 이미 들어있는 속성의 값)은 = auto (브라우저가 자동으로 너비를 계산) 단위 : px, em, vw 등 단위로 지정하며 주로 사용하는 값은 px max & min 속성 max-width / max-height : 요소가 커질 수 있는 최대 가로/세로 너비 사용할 수 있는 값 : none(최대 너비 제한 없음) , auto , 단위 (px, em, vw 등) 특징 - 일반적으로 사용하는 값은 none & 단위를 지정해준다. - auto 값은 잘 사용하지 않는다. min-width / m..

개요 CSS의 기본적인 문법안내 들어가며 HTML이 웹의 구조를 짜는 일이라면, CSS는 기본 구조의 스타일을 잡는 역활을 한다. 이 챕터에서는 기본적인 CSS의 문법에 대하여 작성했으며, CSS관련해서 공부하는대로 작성할 예정이다. 내용에서 나오는 화면예시는 Codepen 에서 작성한 코드를 그대로 캡쳐하여 이해를 돕도록 하였다. 내용 가장 기본적인 예시로, div 태그에 원하는 문장을 넣은 후, 아래 CSS 코드를 적용하면 왼쪽에 있는 결과값이 출력되는 것을 볼 수 있다. 해당 CSS 는 3가지의 스타일을 잡은 것으로 내용은 아래와 같다. div 태그는 다음과 같은 특성을 가져라! 글씨크기는 50 px (font-size: 50px;) 컬러는 파란색 (color: blue;) 글씨의 장식은 밑줄 (t..