NewBean의 웹과 콩나무
close
프로필 배경
프로필 로고

NewBean의 웹과 콩나무

  • 분류 전체보기 (499)
    • Programming Language (87)
      • Java (65)
      • C (4)
      • Python (16)
      • R (2)
    • UI & UX (4)
      • Figma (4)
    • Front-End Study (193)
      • HTML+CSS (34)
      • HTML 사전 (6)
      • CSS 사전 (14)
      • Sass (6)
      • 반응형 웹 (8)
      • JavaScript (52)
      • TypeScript (8)
      • React (29)
      • Next.js (9)
      • Angular (1)
      • Vue.js (23)
      • Vite (2)
      • Node.js (1)
    • Back-End Study (101)
      • DBMS (28)
      • Linux (43)
      • Git & GitHub (15)
      • Express (7)
      • Postman (4)
      • REST API (2)
      • PHP (0)
      • Grafana (2)
    • Computer Science (14)
    • 정보처리기사 (76)
      • 1. 요구사항 확인 (1)
      • 2. 화면 설계 (1)
      • 3. 데이터 입출력 구현 (1)
      • 4. 통합 구현 (1)
      • 5. 인터페이스 구현 (1)
      • 6. 프로그래밍 언어 활용 (1)
      • 7. SQL 응용 (1)
      • 8. 서버 프로그램 관리 (1)
      • 9. 소프트웨어 개발 보안 구축 (1)
      • 10. 애플리케이션 테스트 관리 (1)
      • 11. 응용 SW 기초 기술 활용 (1)
      • DB (65)
    • 잡다한 말 (6)
    • 기타 (5)
    • 내가 읽은 책 (5)
    • 없어진 글모음 (7)
  • 홈
  • 방명록
  • 깃허브
  • 포트폴리오
& 선택자

& 선택자

& 선택자 1. & 선택자 - CSS에서 부모 요소를 나타내는 선택자 - 주로 Sass(SCSS)와 같은 CSS전처리기에서 사용 - 중첩된 선택자를 나타내는데 사용됨 2. 예시 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.

  • format_list_bulleted Front-End Study/Sass
  • · 2023. 9. 23.
  • textsms
@function

@function

@function 1. @function - 사용자 정의 함수를 만들어 스타일 시트에서 재사용 가능한 코드를 작성하는데 사용 - 스타일 속성을 계산하거나 값을 조작할 수 있으며, 더욱 유연한 스타일링 가능 2. 사용법 See the Pen Tistory_Front-End Study_Sass_@function_2. 사용방법 by NewBean0312 (@newbean0312) on CodePen.

  • format_list_bulleted Front-End Study/Sass
  • · 2023. 9. 19.
  • textsms
@mixin

@mixin

@mixin 1. @mixin - 재사용 가능한 코드 블록을 정의하는 데 사용되는 기능 - 스타일 규칙을 그룹화하고 필요할 때 재사용할 수 있음 2. 형식 - 스타일 규칙은 중괄호('{ }')안에 작성되며, CSS 속성과 값을 포함할 수 있음 @mixin 믹스인 이름 { // 스타일 규칙 } See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 by NewBean0312 (@newbean0312) on CodePen. See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 2 by NewBean0312 (@newbean0312) on CodePen.

  • format_list_bulleted Front-End Study/Sass
  • · 2023. 6. 29.
  • textsms
Variables (변수)

Variables (변수)

Variables (변수) 1. Variables (변수) - 재사용 가능한 값을 저장하고, 참조하기 위해 사용 - 변수를 사용하면, 동일한 값이 반복되는 것을 방지하고, 유지보수성을 향상시킬 수 있음 2. 정의 방법 - '$' 기호를 사용하여, 변수명을 지정하고 값을 할당 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.

  • format_list_bulleted Front-End Study/Sass
  • · 2023. 6. 28.
  • textsms
Sass 7-1 패턴

Sass 7-1 패턴

Sass 7-1 패턴 1. Sass 7-1 패턴 - Sass 가이드라인에서 제시한 모듈화 방식 ※ 파일명에 _가 붙는 경우, @import 되어 사용될 것으로 파 sass/ | |- abstracts/ ||- _variables.scss# Sass 변수 ||- _functions.scss# Sass 함수 ||- _mixins.scss# Sass 믹스인 ||- _placeholders.scss# Sass 플레이스홀더 | |- base/ ||- _reset.scss# 리셋/정규화 ||- _typography.scss# 타이포그래피 규칙 | -# 기타. | |- components/ ||- _buttons.scss# 버튼 ||- _carousel.scss# 캐러셀 ||- _cover.scss# 커버 ||- _..

  • format_list_bulleted Front-End Study/Sass
  • · 2023. 6. 28.
  • textsms
Sass

Sass

Sass 1. Sass(Syntactically Awesome Style Sheets) - 웹 개발에서 사용되는 CSS 전처리기(Preprocessor) - CSS의 기능을 확장하고, 개발자가 더 효율적으로 스타일을 작성할 수 있도록 도와줌 2. Sass의 특징 - 기존의 CSS 구문을 확장하여 변수, 중첩 규칙, 믹스인(mixin), 상속 등의 기능을 제공 - 시타일 시트 작성을 간소화 - 코드의 재사용성과 유지보수성을 향상 - 복잡한 스타일 구조를 간결하게 표현하여, 프로젝트의 개발 속도를 향상 3. Sass의 문법 - Sass는 두가지 문법을 제공 - SCSS (Sassy CSS) - 기본의 CSS와 비슷한 문법을 사용하며, 확장된 기능을 적용할 수 있음 - 중괄호('{ }')와 세미클론(';')을..

  • format_list_bulleted Front-End Study/Sass
  • · 2023. 6. 28.
  • textsms
  • navigate_before
  • 1
  • navigate_next
공지사항
  • 문의 (juv6262@naver.com)
전체 카테고리
  • 분류 전체보기 (499)
    • Programming Language (87)
      • Java (65)
      • C (4)
      • Python (16)
      • R (2)
    • UI & UX (4)
      • Figma (4)
    • Front-End Study (193)
      • HTML+CSS (34)
      • HTML 사전 (6)
      • CSS 사전 (14)
      • Sass (6)
      • 반응형 웹 (8)
      • JavaScript (52)
      • TypeScript (8)
      • React (29)
      • Next.js (9)
      • Angular (1)
      • Vue.js (23)
      • Vite (2)
      • Node.js (1)
    • Back-End Study (101)
      • DBMS (28)
      • Linux (43)
      • Git & GitHub (15)
      • Express (7)
      • Postman (4)
      • REST API (2)
      • PHP (0)
      • Grafana (2)
    • Computer Science (14)
    • 정보처리기사 (76)
      • 1. 요구사항 확인 (1)
      • 2. 화면 설계 (1)
      • 3. 데이터 입출력 구현 (1)
      • 4. 통합 구현 (1)
      • 5. 인터페이스 구현 (1)
      • 6. 프로그래밍 언어 활용 (1)
      • 7. SQL 응용 (1)
      • 8. 서버 프로그램 관리 (1)
      • 9. 소프트웨어 개발 보안 구축 (1)
      • 10. 애플리케이션 테스트 관리 (1)
      • 11. 응용 SW 기초 기술 활용 (1)
      • DB (65)
    • 잡다한 말 (6)
    • 기타 (5)
    • 내가 읽은 책 (5)
    • 없어진 글모음 (7)
최근 글
인기 글
최근 댓글
태그
  • #Git & GitHub
  • #Vue.js
  • #react
  • #리눅스
  • #html+css
  • #Python
  • #JavaScript
  • #Java
  • #정보처리기사
  • #DBMS
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바