공백.

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

전체 글 10

[회고] 2023년을 뒤돌아 보며 - 성장편

들어가며 회고 글을 2024년이 되어서 쓰는 것도 조금 웃기긴 합니다만.. 늦었다고 생각할 때가 가장 빠른 것이라는 명언에 힘입어(?) 제가 다짐한 것들을 실행해 보고자 이렇게 글을 써봅니다. 2023년을 뒤돌아 보면, 정말 다사다난했고 개인적으로 많은 것을 경험했고 깨달은 것들이 많은 한 해였습니다. 현재 진행하는 업무에 대해 현타를 느끼며 여러 가지 성장통도 겪고, 많은 사람들은 대하고 헤어지고 내 한계를 느껴서 미끄러지는 것을 반복하고 매년마다 그렇지만 유독 2023년은 그런 한 해로 지나간 것 같아요. 그런 2023년에 내 마음에 남는 가장 3가지 키워드로 회고를 풀어내보고자 합니다. 원래는 한번에 모든 키워드를 풀어내보고자 했습니다만,, 너무 길어질 것 같아서 몇 가지로 나눠서 이야기를 풀어보겠..

성장일기/기획 2024.01.01

[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