티스토리

비개발자 진입 여정
검색하기

블로그 홈

비개발자 진입 여정

code-ruach.tistory.com/m

개발을 길로 진입하는 중입니다.

구독자
1
방명록 방문하기
공지 비 개발자 진입 여정을 담았습니다 모두보기
반응형

주요 글 목록

  • SCSS / @each 반복문으로 태그 쉽게 만드는 방법, CSS Flex를 이용해서 태그 리스트까지 만들어봅시다 ( 태그 정렬, 줄넘김 한방에 해결하기! ) SCSS @each (반복문)텍스트를 태그로 만들어 사용하기줄넘김 처리 설정 flex-wrap기본형줄바꿈 - 범위가 넘어갈경우 아래로줄바꿈 - 역순flex-wrap: nowrap;flex-wrap: wrap;flex-wrap: wrap-reverse;넘치면 오른족으로 쭈욱 연결됩니다.컨텐츠가 영역 범위를 넘어갈 경우위에서부터 차례대로줄바꿈이 됩니다.컨텐츠가 영역 범위를 넘어갈 경우위에서부터 차례대로줄바꿈이 되지만, 역순 즉 아래쪽에더 많은 컨텐츠를 배치하게 됩니다. _mixin.scss// 텍스트 태그 만들기// @each $각각 정의된 변수값 in $정의된 변수 데이터 그룹 // 클래스명, 모서리라운드사이즈, 좌우여백, 상하여백, 폰트크기, 행간높이, 폰트두께, 폰트색, 선색, 배경색@each $cla.. 공감수 0 댓글수 0 2024. 10. 26.
  • SCSS / @mixin, @for문으로 하단 고정 탭바 만들기 (하단 네비게이션) Scss에서 for문으로하단 탭바 만들기를 해볼께요!하단 탭바는 버튼 갯수가 변경될 여지가 있으므로 for문을 사용해보겠습니다. 보통 직관적인 이름을 사용하는 것을 추천드리며버튼은 3개에서 최대 5개까지만 사용하시길 권장드립니다._mixin.scss// 이미지 경로$imgurl : '../images/';//배경 이미지@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){ background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor; background-size: $width $height; border-radius: $.. 공감수 0 댓글수 0 2024. 7. 9.
  • SCSS / @mixin 아이콘 배경 이미지로 사용하기 ( 아이콘 버튼 ) 믹스인을 활용해서배경이미지로 만들어진 버튼을 만들어 볼께요이미지 삽입보단 편하더라구요._mixin.scss// 이미지 경로$imgurl : '../images/';//배경 이미지//파일명, 가로정렬, 세로정렬, 배경색, 가로사이즈, 세로사이즈, 보더라운드@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){ background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor; background-size: $width $height; border-radius: $boradi;}  _button.scss.btn{ displa.. 공감수 0 댓글수 0 2024. 7. 6.
  • SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리 웹 앱을 만들기 위해서 html 공부하다 알게 된 SCSS수정이 너무 용이해서 신세계를 경험했습니다. 브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일 과정을 거쳐야 합니다.1. SCSS 프로그램 설치비주얼 스튜디오.. 공감수 0 댓글수 0 2024. 5. 6.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.