💡 새로 알게 된 것

1. CSS 기본 박스 모델과 Padding 완벽 이해하기

CSS에서 모든 요소는 박스 모델을 따르며, 이는 margin, border, padding, content 영역으로 구성됩니다. 특히 방향성을 이해하는 것이 중요합니다.

박스 모델 구성요소

• margin: 요소의 외부 여백
• border: 요소의 테두리
• padding: 요소의 내부 여백
• content: 실제 내용이 들어가는 영역

방향 설정의 기본 원리

CSS에서 방향을 지정할 때는 '시계 방향'을 기억하면 됩니다. 특히 padding과 margin 속성에서 이 원칙이 중요합니다:

/* 순서: 위(Top), 오른쪽(Right), 아래(Bottom), 왼쪽(Left) */
/* 머리글자를 따서 TRBL(TRouBLe)로 기억하기! */

/* 값 지정 방법 */
.element {
    /* 4개 값: 각 방향별 개별 여백 */
    padding: 10px 20px 30px 40px;
    
    /* 3개 값: 상단/좌우/하단 */
    margin: 10px 20px 30px;
    
    /* 2개 값: 세로/가로 */
    padding: 10px 20px;
    
    /* 1개 값: 모든 방향 동일 */
    margin: 10px;
}

실제 활용 예시

/* 네비게이션 메뉴 스타일링 */
.nav-item {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    margin-right: 15px;
}

/* 카드 컴포넌트 스타일링 */
.card {
    padding: 20px;
    margin: 0 10px 20px 10px;
    border: 1px solid #ddd;
}

이러한 방식으로 방향을 지정하면, 레이아웃을 더 직관적으로 구성할 수 있습니다. 특히 컴포넌트를 만들 때 일관된 여백을 유지하는 것이 중요합니다.

2. 개발 환경 설정 팁

VS Code는 개발자들이 가장 많이 사용하는 코드 에디터 중 하나입니다. 효율적인 개발을 위해 자동 저장 기능을 적절히 설정하는 것이 중요합니다.

자동 저장 설정하기

1. VS Code를 실행하고 설정 메뉴를 엽니다
   • Windows: Ctrl + ,
   • Mac: Cmd + ,
2. 검색창에 "Auto Save"를 입력합니다