251125 코딩 [리디자인 템플릿]

리디자인 할 사이트와 느낌이 비슷한 사이트 선정 후 디자인 분석(그리드, 여백, 타이포그래피)하고

코딩으로 구현하기(나중에 내 디자인과 접목할 수 있도록 템플릿 제작)


ㄴ 그리드만 구현한 코드


ㄴ 섹션 분리 구현 (파일이나 섹션마다 이름을 공통적으로 지어놓고 어떤 디자인에서도 변형해서 사용할 수 있도록)


ㄴ 글자 상자 부분, 버튼 -> 자주 사용하는 레이아웃 컴포넌트화 구현(코드펜에 주석 달아놓고 저장)

251125_디자인 모작.zip

0.01MB

 

도드람 몰

 

font-family : 's-core-dream-regular', Malgun Gothic, "맑은 고딕", 

AppleGothic, Dotum, "돋움", sans-serif;

font-size : 12px

 

 

 

 

 

 

 

 

 

 

 

 

 

 

251125 : 상단바 제작

1. 빈 박스 제작으로 정렬

.empty-box {width: 300px;}

2. user 메뉴 제작 
.user-box {padding-right: 25px;}
.user-box>li {
  padding-right: 10px; padding-left: 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  height: 10px;
  display: flex;
  align-items: center;
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 500;
}
.user-box>li:last-child {
  border-right: none;   /* 마지막 항목만 선 제거 */
  padding-right: 0;     /* 필요하면 오른쪽 여백도 빼기 */
}
.user-menu {
  display: flex;
  align-items: center;
}
.user-menu>ul {display: flex;}
.icon-box li {padding-left: 10px;}

 

 

[피드백]

 

 

[문제점]

 

 

[해결 코드]

 

 

[해결 코드]