공백.

무엇이든 적고, 기록하고 기억하는

CSS 6

[FE] 새싹에서 나무까지 - CSS 내부여백 [Padding]

패딩 [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; } 결과 코드를 작성하면 위와 같은 결과 값을 얻을 수 있다. 간단히 설명하자면 위에 있..

성장일기/Web 2022.02.02

[FE] 새싹부터 나무까지 - CSS 외부여백 [margin]

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

성장일기/Web 2022.02.02

[FE] 새싹부터 나무까지 - CSS 단위

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..

성장일기/Web 2022.02.02

[FE] 새싹부터 나무까지 - CSS 속성 [박스모델]

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..

성장일기/Web 2022.02.02

[FE] 새싹에서 나무까지 - CSS 선언방식

개요 CSS 를 선언하는 방식 및 각각의 장점과 단점에 대해 설명한다. CSS 선언방식 CSS의 선언방식은 총 4가지로 구성되어 있다. [내장방식 | 인라인방식 | 링크방식 | @import 방식 ] - 1. 내장방식 html 문서 내 - 장점 별도의 CSS 파일을 만들지 않아도, HTML 에서 바로 적용할 수 있다. - 단점 CSS 내용이 많아질 경우, 한번에 처리하기 쉽지않고, 유지보수가 어렵다. 그렇기 때문에 프론트엔드 개발방식은 HTML , CSS , JS 파일을 따로 구분하여 관리하는 것이 일반적이다. 2. 인라인방식 HTML의 요소에 전역속성인 style 속성을 추가하여 직접 스타일을 작성하는 방식 전역속성이란? -작성예시 - 장점 별도로 요소를 찾는 행위를 할 필요가 없다. - HTML의 선..

성장일기/Web 2022.02.02