SCSS / @each 반복문으로 태그 쉽게 만드는 방법, CSS Flex를 이용해서 태그 리스트까지 만들어봅시다 ( 태그 정렬, 줄넘김 한방에 해결하기! )

 

SCSS
@each (반복문)
텍스트를 태그로 만들어 사용하기

---

줄넘김 처리 설정
flex-wrap

기본형	줄바꿈 - 범위가 넘어갈경우 아래로	줄바꿈 - 역순
flex-wrap: nowrap;	flex-wrap: wrap;	flex-wrap: wrap-reverse;
넘치면 오른족으로 쭈욱 연결됩니다.	컨텐츠가 영역 범위를 넘어갈 경우 위에서부터 차례대로 줄바꿈이 됩니다.	컨텐츠가 영역 범위를 넘어갈 경우 위에서부터 차례대로 줄바꿈이 되지만, 역순 즉 아래쪽에 더 많은 컨텐츠를 배치하게 됩니다.

 

---

_mixin.scss

// 텍스트 태그 만들기
// @each $각각 정의된 변수값 in $정의된 변수 데이터 그룹 
// 클래스명, 모서리라운드사이즈, 좌우여백, 상하여백, 폰트크기, 행간높이, 폰트두께, 폰트색, 선색, 배경색
@each $class, $br, $pdh, $pdv, $fs, $heg, $fw, $color, $borderclolor, $bg in $tagSetting {
  .tag.#{$class} {
	border-radius: rem($br); 
	padding: rem($pdv) rem($pdh);
	font-size: rem($fs);
	line-height: rem($heg);
	font-weight: $fw;
	color: $color;
	border:0.5px solid $borderclolor;
	background-color:$bg;
  }
}

 

_variables.scss

// 컬러지정
$black:#000000;
$white:#ffffff;
$primary:FFD814;

// 태그 사용
// 클래스명, 모서리라운드사이즈, 좌우여백, 상하여백, 폰트크기, 행간높이, 폰트두께, 폰트색, 선색, 배경색
$tagSetting :
  'new' 8 16 8 14 16 400 $white $black_0 $black_0,
  'best' 6 16 8 14 16 400 $black_0 $primary $primary,
  'line' 8 16 8 14 16 400 $black_0 $black_0 $white,
  'normal' 8 16 8 14 16 400 $primary $black_0 $black_0,
 ;

 

 

_tag.scss

.tag-list{
  display: flex;
  gap: rem(4);
  flex-wrap: wrap; // 줄바꿈
}

 

 

style.scss

@import 'abstracts/mixin'; // 믹스인
@import 'component/tag'; // 태그

 

 

index.html

<div class="tag-list">
  <div class="tag new">New</div>
  <div class="tag best">Best</div>
  <div class="tag line">자체제작</div>
  <div class="tag line">주간 1위</div>
  <div class="tag line">재구매율 1위</div>
  <div class="tag normal">2+1</div>
</div>

 

---

SCSS 폴더 구조 예시는 여기서 확인

 

SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리

 

시멘틱 태그 구조가 궁금하시다면 여기서 확인

 

시맨틱 태그란? 기본 개념부터 기능 태그까지 Semantic Tags를 알아보자!