YoonStudyNote

  • 홈
  • 태그
  • 방명록

SASS/문법 - 중첩 1

문법 - 중첩, 상위 선택자 참조, 중첩 벗어나기, 중첩된 속성정의

1. 중첩 Sass는 중첩 기능을 사용할 수 있다. 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다. /* SCSS */ .section { width: 100%; .list { padding: 20px; li { float: left; } } } .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } 2. Ampersand (상위 선택자 참조) 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다. .btn { position: absolute; &.active { color: red; } } .list { li { &:last-child { margi..

SASS/문법 - 중첩 2021.01.14
이전
1
다음
더보기
프로필사진

YoonStudyNote

  • 분류 전체보기 (501)
    • Android (30)
      • Kotlin (18)
      • Android studio (5)
      • BMI 계산기 (6)
      • 로또번호 추첨기 (1)
    • Intellij (2)
      • 테스트 코드 (0)
      • 문제점해결 (2)
    • SpringBoot (6)
      • JPA (6)
      • 머스테치 (0)
    • React (28)
      • 기초 (10)
      • create reate app 실습 (4)
      • 컴포넌트 (4)
      • state (2)
      • 이벤트 (3)
      • create 구현 (3)
      • REST API (2)
    • Redux (3)
    • NPM (4)
    • Javascript (50)
      • 기초 (15)
      • 연산자 (3)
      • 조건문 (2)
      • 반복문 (0)
      • 함수 (2)
      • 객체 (5)
      • 배열 (6)
      • 프로토타입 & 클래스 (3)
      • 비동기 처리 (10)
      • HTML과 JavaScript 연동하기 (1)
      • 책관리 project만들기 (0)
    • HTTP (3)
    • REST API (5)
    • Ajax (6)
    • ip (2)
    • HTML (80)
      • 기초 (16)
      • 요소 (62)
      • 메타데이터 (2)
    • CSS (84)
      • 기초 (17)
      • 실습 환경 (3)
      • 단위 (3)
      • 속성 - 박스 모델 (10)
      • 속성 - 글꼴,문자 (7)
      • 속성 - 띄움(정렬), 위치 (6)
      • 속성 - 배경 (7)
      • 속성 - 전환 & 변환 (8)
      • 속성 - 애니메이션 & 다단 (8)
      • 속성 - flex (15)
    • HTML & CSS (3)
      • 기초 (3)
    • SASS (23)
      • 문법 - 연산 (5)
      • 문법 - 재활용 (4)
      • 문법 - 확장 (1)
      • 문법 - 함수 (2)
      • 문법 - 조건문 (1)
      • 문법 - 반복문 (3)
      • 문법 - 내장함수 (0)
      • 문법 - 중첩 (1)
      • 문법 - 변수 (1)
    • 부트스트랩 (10)
      • 레이아웃 (1)
      • 컴포넌트 (5)
      • 실습 (2)
      • Bootstrap 활용 (2)
    • github 구버전 만들기 예제에서 개념 확인 (0)
      • head 설정 (0)
      • 공통 (0)
      • header (0)
      • visual (0)
      • feature (0)
      • where is (0)
      • pricing (0)
      • footer (0)
      • 반응형 (0)
    • java (57)
      • GUI (9)
      • 이벤트 처리 (4)
      • 자료형 (7)
      • 자바 기초정리 (5)
      • 제어문 (5)
      • 객체지향 프로그래밍 (10)
    • python (18)
      • 제어문 (1)
      • 파일 (6)
      • 자료 종류 (6)
    • 자바 어플 개발 (20)
      • 기초 (8)
      • JAVA의 사용 (5)
      • 안드로이드 스튜디오 기초 (3)
      • 안드로이도 스튜디오 개념 (4)
    • C (29)
      • 기초 (20)
      • 입출력 (2)
      • 포인터 (4)
      • 문자열 처리 (2)
      • 리스트 (1)
    • Compiler (0)
      • Overview (0)
      • Formal language (0)
      • Regular Expression (0)
    • Computer Structure (9)
      • 컴퓨터 시스템 (8)
    • Data Structure (12)
      • 자료구조란? (1)
      • 구조체 사용 (2)
      • stack (5)
      • list (2)
      • queue (1)
      • 연결리스트 (1)
    • 네트워크 기초 (1)
    • git (0)
    • C++ (4)
      • 프로그램 연습 (4)

Tag

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

컴퓨터 공학과 윤서혜입니다. 주내용은 Front end, Back end, Android 입니다. 다양한 언어 및 알고리즘 설명도 있으니 도움되셨길 바랍니다.

티스토리툴바