카테고리 없음

l_row, l_col 레이아웃 클래스

김딸기* 2024. 8. 7. 19:21
/* Reset */
ul {
  margin: unset;
  padding: unset;
}

h2 {
  margin: unset;
}

li {
  list-style-type: none;
}


 

  • ul (unordered list)와 h2 (heading level 2)의 기본 여백(margin)과 패딩(padding)을 unset으로 재설정하여 브라우저의 기본 스타일을 제거합니다.
  • li (list item)의 기본 리스트 스타일을 제거하여 불릿 포인트를 없앱니다.

 

Components

/* Components */
body {
  background-color: #222;
}

.section {
  max-width: 800px;
  margin: 60px auto;
  border: 8px solid dodgerblue;
  padding: 20px;
  border-radius: 12px;
}

.section h2 {
  color: dodgerblue;
  margin-bottom: 20px;
}

설명

  • body 태그의 배경색을 짙은 회색(#222)으로 설정합니다.
  • .section 클래스는 다음과 같은 스타일을 적용합니다:
    • 최대 너비를 800px로 제한하여 콘텐츠가 화면에 중앙에 위치하도록 합니다.
    • 상하 여백을 60px로 설정하고, 좌우 여백을 자동으로 설정하여 수평으로 가운데 정렬합니다.
    • 테두리를 dodgerblue 색상으로 8px 두께로 설정합니다.
    • 내부 패딩을 20px로 설정하여 콘텐츠가 테두리와 떨어져 있도록 합니다.
    • 테두리의 모서리를 12px로 둥글게 설정합니다.
  • .section 클래스 내의 h2 태그는 다음과 같은 스타일을 적용합니다:
    • 텍스트 색상을 dodgerblue로 설정합니다.
    • 하단 여백을 20px로 설정하여 제목과 다음 요소 사이에 공간을 만듭니다.

 

공통 컴포넌트

/* 공통 컴포넌트 */
.component {
  text-align: center;
  line-height: 180px;
  height: 180px;
  background-color: #ddd;
  border-radius: 12px;
  font-size: 32px;
}

설명

  • .component 클래스는 공통 스타일을 정의하여 여러 요소에서 사용할 수 있도록 합니다.
    • 텍스트를 중앙 정렬합니다.
    • 줄 높이를 180px로 설정하여 텍스트가 세로로도 중앙에 배치되도록 합니다.
    • 높이를 180px로 고정합니다.
    • 배경색을 밝은 회색(#ddd)로 설정합니다.
    • 테두리 모서리를 12px로 둥글게 설정합니다.
    • 폰트 크기를 32px로 설정하여 텍스트를 크게 보이도록 합니다.

 

 

 


/* inline-block 버전 */
.inline-block .l_row {
  font-size: 0;
  margin: 0 -10px -20px -10px;
}

.inline-block .l_col {
  display: inline-block;
  width: 33.333333%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

1. Inline-block 버전

설명

  • .l_row는 font-size: 0으로 설정하여 공백 문자로 인한 간격 문제를 해결하고, 네거티브 마진을 사용하여 좌우 패딩을 조정합니다.
  • .l_col는 display: inline-block으로 설정하여 블록처럼 동작하되, 행 내에 여러 열을 배치합니다. 너비는 33.333333%로 3개의 열을 맞추며, 패딩과 박스 사이징을 적용합니다.

특징

  • CSS의 기본 속성을 사용하여 호환성이 좋습니다.
  • 간단한 레이아웃 구조를 구현할 수 있습니다.

장단점

  • 장점: 모든 브라우저에서 잘 동작하며, 학습 곡선이 낮습니다.
  • 단점: font-size: 0과 같은 트릭이 필요하고, 요소 간의 공백 문제를 해결해야 합니다.

 

 


/* flex 버전 */
.flex .l_row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  margin: 0 -10px;
}

.flex .l_col {
  width: 33.333333%;
  padding: 0 10px;
  box-sizing: border-box;
}

2. Flex 버전

설명

  • .l_row는 display: flex와 flex-wrap: wrap으로 플렉스 컨테이너를 생성하여 자식 요소들이 자동으로 줄 바꿈을 합니다. row-gap을 사용하여 행 간의 간격을 설정합니다.
  • .l_col는 고정된 너비를 가지고, 패딩과 박스 사이징을 적용합니다.

특징

  • Flexbox를 사용하여 보다 복잡한 레이아웃을 쉽게 구현할 수 있습니다.
  • 행 내의 요소 간격 조절이 용이합니다.

장단점

  • 장점: 레이아웃 조정이 쉽고, 수직 정렬 및 간격 조절이 용이합니다.
  • 단점: 구형 브라우저 (예: IE9 이하)에서 지원되지 않습니다.

 


/* grid 버전 */
.grid .l_row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

3. Grid 버전

설명

  • .l_row는 display: grid로 그리드 컨테이너를 생성하며, grid-template-columns를 통해 3열의 그리드를 정의합니다. gap을 사용하여 그리드 셀 간의 간격을 설정합니다.

특징

  • CSS Grid를 사용하여 복잡한 2차원 레이아웃을 쉽게 구현할 수 있습니다.
  • 레이아웃 정의가 직관적이며 유연합니다.

장단점

  • 장점: 복잡한 레이아웃을 간단하게 구현할 수 있으며, 행과 열 간의 간격 조절이 직관적입니다.
  • 단점: 구형 브라우저 (예: IE11 이하)에서 지원되지 않습니다.

 

 

실무 코드 vs 이상적인 코드

실무 코드: 현재 상황 내에서 이용 가능한 자원을 최대한 활용하여 개발된 코드.

  • 맥락: 특정 상황과 제약 조건을 고려했을 때 가장 효과적인 해결책.
  • 효율성: 맥락을 제거하면 비효율적인 코드로 보임.
  • 초점: 이상적인 코드보다는 문제 해결에 중점을 둠.

이상적인 코드: 일반적으로 권장되는 표준안.

  • 효율성: 효율적이고 유지 보수하기 쉽게 설계됨.
  • 초점: 제약 조건이 있는 실제 상황에서는 항상 최선의 해결책이 아닐 수 있음을 인지해야 함.

 

정리 

  • 아이디어에 집중: 베스트 프랙티스에 얽매이기보다는 창의적으로 문제를 해결하는 것에 집중. 어떤 아이디어로 문제 해결을 하였는가!
  • 맥락의 중요성: 가장 효과적인 해결책은 상황에 따라 달라질 수 있음을 이해.
  • 자원 활용: 원하는 결과를 달성하기 위해 이용 가능한 자원(같은 결과를 만들어내는 다양한 기법)을 최대한 활용.

실무 코드는 특정 제약 조건에서 발생할 수 있는 유연성과 창의성이 필요함을 인식함으로써 문제 해결에 있어 보다 전문성있는 접근을 할 수 있게 됩니다.