Front-end/CSS(SASS,SCSS)26

728x90
[CSS]게임하면서 CSS(flex,grid) 공부해보자 Flexbox Froggyhttps://flexboxfroggy.com/#ko개구리가 수련잎에 올라가는거 도와주는 게임 Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.comGrid Gardenhttps://cssgridgarden.com/#ko당근밭 가꾸는 게임 Grid GardenA game for learning CSS grid layoutcssgridgarden.comFlexboxDefensehttp://www.flexboxdefense.com/적들을 물리치는 디펜스게임 Flexbox DefenseYour job is to stop the incoming enemies from getting past your defenses. Unlike ..
[CSS]숫자를 자동으로 증가, 감소시키기 위해 'counters' 사용 CSS 카운터(Counter)는 CSS에서 숫자를 자동으로 증가시키거나 감소시키기 위해 사용하는 기능입니다. 이를 통해 목록 항목이나 페이지 번호와 같은 요소에 번호를 매길 수 있습니다. CSS 카운터는 counter-reset, counter-increment, content 속성을 사용하여 설정하고, 스타일을 적용할 수 있습니다.CSS 카운터 설정 방법counter-reset: 카운터의 초기 값을 설정합니다.counter-increment: 카운터의 값을 증가시킵니다.content: ::before 또는 ::after 의사 요소에서 카운터 값을 표시합니다.예제1. 기본 사용법다음 예제는 번호가 매겨진 목록 항목을 생성합니다. First item Second item Third item 이 예제에..
[CSS]transition 와 animation 차이 CSS에서 transition과 animation은 모두 애니메이션을 만들기 위한 속성들이지만, 각각의 목적과 사용 방식에 있어서 다소 차이가 있습니다.Transition (트랜지션)목적: 요소의 상태 변화를 부드럽게 처리하는 것이 주된 목적입니다. 주로 상호작용에 반응하여 요소의 상태가 변경될 때 효과적으로 사용됩니다. 주요 속성:transition-property: 어떤 CSS 속성에 트랜지션을 적용할지 지정합니다.transition-duration: 트랜지션이 일어나는 시간을 설정합니다.transition-timing-function: 트랜지션의 속도 곡선을 정의합니다.transition-delay: 트랜지션이 시작하기 전에 기다리는 시간을 설정합니다.사용 예시:.box { width: 100..
[CSS]CSS 주요 애니메이션 속성들과 설명 CSS 애니메이션을 구성하는 여러 속성이 있습니다. 각각의 속성은 애니메이션의 동작을 세밀하게 조정하는 데 사용됩니다. 여기서는 주요 애니메이션 관련 속성을 설명합니다. 주요 애니메이션 속성들@keyframes애니메이션의 중간 상태를 정의하는 데 사용됩니다.@keyframes는 애니메이션의 이름과, 각 프레임(0%에서 100%까지)의 스타일을 정의합니다.@keyframes animationName { 0% { /* 시작 상태 */ } 100% { /* 끝 상태 */ }}animation애니메이션을 한 줄로 정의할 수 있는 단축 속성입니다. 여러 개의 개별 애니메이션 속성을 포함할 수 있습니다.예: animation: animationName 2s linear 1s infinite alterna..
[CSS]CSS에서 사용되는 용어들 기본 용어속성 (Property)스타일링에 사용되는 구체적인 스타일 옵션입니다.예: color, font-size, margin, padding값 (Value)속성에 적용되는 실제 스타일 값입니다.예: red, 16px, 10px, auto선택자 (Selector)스타일을 적용할 HTML 요소를 선택하는 구문입니다.예: div, .class, #id, *고급 선택자속성 선택자 (Attribute Selector)특정 속성을 가진 요소를 선택합니다.예: [type="text"], [href*="example"]가상 클래스 (Pseudo-class)요소의 특정 상태를 스타일링합니다.예: :hover, :focus, :nth-child(2)가상 요소 (Pseudo-element)요소의 특정 부분을 스타일링합니..
[CSS]속성 선택자[class*="string"] 종류 및 예제 속성 선택자(attribute selector)는 HTML 요소의 속성 값을 기준으로 요소를 선택하는 방법을 제공합니다. [class*="string"] 선택자는 이러한 속성 선택자 중 하나로, 특정 부분 문자열을 포함하는 클래스 속성을 가진 요소를 선택합니다. 속성 선택자의 종류와 예제를 좀 더 자세히 설명하겠습니다.속성 선택자 종류 및 예제부분 문자열 포함 선택자 ([attr*="value"])속성 값에 특정 문자열이 포함된 요소를 선택합니다.구문: [attr*="value"]예제:div class="intro-heading">div>div class="main-heading">div>div class="footer-heading">div>div class="content">div>style> [c..
[CSS]@media쿼리와 @container container-type의 차이점 container-type와 @media는 각각 CSS에서 반응형 디자인을 구현하는 데 사용되는 방법들이지만, 이 둘은 서로 다른 용도로 사용됩니다. 아래에서 두 가지의 차이점과 사용 예시를 설명하겠습니다.@media@media는 미디어 쿼리로, 뷰포트(브라우저 창)의 크기나 기기의 특성에 따라 스타일을 적용하는 데 사용됩니다. 뷰포트 너비, 높이, 해상도, 방향 등의 특성에 따라 다른 스타일을 적용할 수 있습니다.주요 특징:뷰포트나 기기의 특성을 기준으로 스타일을 적용합니다.전체 페이지 또는 특정 요소의 스타일을 변경할 수 있습니다.예시:/* 기본 스타일 */body { background-color: white;}/* 뷰포트 너비가 600px 이상일 때 스타일 */@media (min-width..
[CSS]:is와 :where 가상클래스 알아보기 :is() 및 :where() 가상 클래스는 CSS Selectors Level 4 사양의 일부로 도입되었습니다. 이들 가상 클래스는 셀렉터를 보다 간결하게 작성하고, 특정성(특이성) 문제를 해결하는 데 유용합니다.도입 시기:is() 및 :where() 가상 클래스는 2019년경 W3C에 의해 CSS Selectors Level 4 사양의 일부로 처음 제안되었고, 이후 다양한 브라우저에 점진적으로 지원되었습니다.브라우저 호환성이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음은 주요 브라우저의 지원 정보입니다.Chrome: 88 이상Firefox: 78 이상Safari: 14 이상Edge: 88 이상Opera: 74 이상사용 예시이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음..
[CSS]display:flex; 일때 자식 요소들에 'order'로 좌우측 위치 변경하기 display:flex; 로 감싼 레이아웃에서 좌측(컨텐츠영역), 우측(사이드영역)이 존재할때 CSS만으로 위치를 바꾸는 방법입니다.float 를 사용했을때는 float:left 혹은 float:right 만 변경하면 가능했지만, display:flex; 로 할경우는 다음과 같이 작성해줘야합니다. 레이아웃 예시HTML 사이드메뉴 내용 레이아웃은 위와 같다고 가정했을때입니다. CSS.container { display: flex;}.contents { width: calc(100% - 30%);}.aside { position: sticky; top: 0; right: 0; align-self: flex-start; ..
[CSS]부모요소가 display:flex; 일때 사이드 메뉴에 position:sticky; 를 적용해보자 부모요소가 display:flex; 일때 사이드 메뉴가 sticky 로 동작하게 하는 방법입니다.구조는 다음과 같습니다.HTML 컨텐츠 내용 사이드 메뉴(이부분이 position: sticky; 가 동작할 영역) 스크롤 하면 aside 영역이 sticky 가 될 부분입니다. CSS.container{ display:flex;}.contents{ width:calc(100% - 30%); /* aside 영역 만큼 빼줌 */}.aside{ align-self: flex-start; /* 이부분 추가 */ position: sticky; top: 45px; right: 0; width: 30%;} flex 컨테이너 내에서 자식 요소들은 기본..
[CSS]반응형 사이트 calc() 함수와 예제 및 계산 방법에 대해 알아보기 calc()는 CSS에서 동적인 계산을 가능하게 하는 함수입니다. 이를 통해 길이, 백분율, 수치 등을 혼합하여 스타일을 동적으로 설정할 수 있습니다. calc() 함수는 CSS에서 다양한 상황에 유용하게 사용됩니다.calc() 함수의 사용법calc() 함수의 기본 구문은 다음과 같습니다:property: calc(expression);여기서 expression은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 등의 산술 연산을 포함할 수 있습니다. 사용 예제1. 너비 계산부모 요소의 너비에서 특정 픽셀 값을 뺀 너비를 설정하고 싶을 때 사용합니다..container { width: 100%;}.content { width: calc(100% - 20px);}이 예제에서 .content 요소..
[SCSS]SCSS 기본 문법과 예시 calc 포함 SCSS(Sass)는 CSS를 더 쉽게 작성하고 관리할 수 있도록 돕는 CSS 전처리기입니다. SCSS는 Sass의 구문 중 하나로, CSS와 매우 유사한 구문을 사용합니다. SCSS의 기본 문법을 몇 가지 예시로 설명하겠습니다.1. 변수 (Variables)변수를 사용하여 재사용 가능한 값을 정의할 수 있습니다.$primary-color: #3498db;$font-stack: Helvetica, sans-serif;body { font-family: $font-stack; color: $primary-color;}2. 중첩 (Nesting)중첩을 사용하여 CSS 선택자를 계층적으로 작성할 수 있습니다.nav { ul { margin: 0; padding: 0; list-style:..
[CSS]input 입력 필드가 자동완성될 때의 스타일을 정의 입력 필드 자동완성이 안나오게 하는 방법과 해당 요소에 스타일 정의하는 방법과 설명입니다. 자동완성 기능을 해제하는 방법 autocomplete='off' 를 넣게 되면, 자동완성 기능이 해제되며, 삭제하면 기본 활성화 됩니다.  자동완성 기능 스타일 정의input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 1000s ease-in-out 0s; -webkit-box-shadow: 0 0 0 30px inset transparent; -webkit-text-fill-color: #00..
[SCSS]프로젝트 SCSS 폴더 및 파일 구조 참고용 모바일에 최적화된 SCSS 구조를 설정하기 위해서는 프로젝트의 폴더 구조와 파일들을 체계적으로 관리하는 것이 중요합니다. 아래는 모바일 중심의 프로젝트에 적합한 SCSS 구조 예시입니다. 이 구조는 SCSS 파일들을 모듈화하여 유지보수가 쉽고, 확장 가능한 형태로 관리하는 것을 목표로 합니다.  프로젝트 폴더 구조 (vue.js 기준)project-root/├── src/│ ├── assets/│ │ ├── styles/│ │ │ ├── abstracts/│ │ │ │ ├── _variables.scss│ │ │ │ ├── _mixins.scss│ │ │ │ ├── _functions.scss│ │ │ ├── base/│ │ ..
[SCSS]mixin을 활용한 모바일 폰트 사이즈 설정(62.5%) CSS(Sass)에서 모바일 초기 셋팅을 위해 62.5%를 기준으로 폰트 크기와 관련된 믹스인과 함수를 설정할 수 있습니다. 이렇게 하면 rem 단위를 더 직관적으로 사용할 수 있게 됩니다. 예를 들어, 1rem이 10px로 설정되어 계산이 간편해집니다. 여기서는 기본 설정과 함께 유용한 믹스인 및 함수를 정의해 보겠습니다.  1. 기본 설정먼저, html 태그의 폰트 크기를 62.5%로 설정합니다. 이렇게 하면 기본 폰트 크기가 16px에서 10px로 변경됩니다.html { font-size: 62.5%; // 1rem = 10px}body { font-size: 1.6rem; // 16px margin: 0; padding: 0;} 2. 폰트 크기 믹스인폰트 크기를 쉽게 설정하기 위한 믹스인을..
[SCSS]@mixin 설명과 예시 @mixin은 Sass에서 사용되는 지시자로, 재사용 가능한 스타일 패턴을 정의하는 데 사용됩니다. @mixin은 일종의 함수로 생각할 수 있습니다. 함수는 코드를 한 번 작성하고 나중에 여러 곳에서 호출하여 재사용할 수 있게 해줍니다. 마찬가지로 @mixin은 스타일 블록을 정의하고 여러 규칙에서 재사용할 수 있도록 합니다.  예제1.예를 들어, 다음과 같이 tab-bar 믹스인을 정의할 수 있습니다.@mixin tab-bar($color, $height) { background-color: $color; height: $height; // 추가적인 탭 바 스타일 설정} tab-bar 믹스인은 탭 바(tab bar) 컴포넌트의 스타일을 생성하는데 사용될 수 있습니다. 이 믹스인은 $color와 $..
[CSS]CSS 유용한 속성 pointer-event, user-select CSS에서 유용하게 사용되는 속성 두가지를 살펴보겠습니다. pointer-eventspointer-events는 CSS 속성으로, 요소가 마우스 이벤트(클릭, 터치 등)를 받을 수 있는지 여부를 제어합니다. 이 속성은 주로 요소가 사용자 상호작용을 받아들이거나 무시하도록 설정할 때 사용됩니다. user-select: noneuser-select: none;은 사용자 경험을 향상시키기 위해 사용자가 특정 텍스트를 선택하지 못하도록 하는 유용한 CSS 속성입니다. 이를 통해 텍스트 선택이 불필요하거나 방지해야 하는 상황에서 유용하게 사용할 수 있습니다. 예시.[disabled],[disabled='true']pointer-events:none;user-select:none;
[CSS]모든 가상 선택자 CSS 가상 선택자에는 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)가 포함됩니다. 모든 가상 선택자의 목록과 간단한 설명을 아래에 제공합니다.가상 클래스 (Pseudo-classes)동적 가상 클래스:hover: 마우스 커서가 요소 위에 있을 때:active: 요소가 활성화되었을 때 (보통 클릭된 상태):focus: 요소가 포커스를 받을 때 (키보드나 마우스에 의해):visited: 사용자가 방문한 링크:link: 방문하지 않은 링크:checked: 체크된 체크박스나 라디오 버튼:disabled: 비활성화된 요소:enabled: 활성화된 요소:focus-visible: 키보드 탐색에 의해 포커스된 요소:focus-within: 포커스를 포함한 하위 요소를 가진 요소..
[SASS]SASS,SCSS 어느것을 사용하면 좋을까? 차이점 살펴보기 초기 버전의 Sass는 들여쓰기를 사용하여 구문을 정의하는 특이한 문법을 가졌습니다.그러나 이러한 문법은 일부 사용자에게 혼란을 줄 수 있었고, CSS와의 호환성이 떨어졌습니다. 이에 따라 나중에 SCSS가 도입되었습니다. SCSS는 CSS와 거의 동일한 구문을 가지고 있기 때문에 CSS를 작성하던 개발자들이 쉽게 스위칭할 수 있었습니다. 또한 SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 구문을 정의하기 때문에 CSS와의 호환성이 더 높았습니다. 이러한 이유로 SCSS가 Sass보다 더 인기 있고 널리 사용되고 있습니다. 결국, Sass와 SCSS는 모두 Sass의 구현 형태 중 하나이며, 프로젝트에 따라 선택할 수있습니다. 그러나 대부분의 경우 SCSS가 더 일반적으로 사용되며, Sass보다 더 널..
[SCSS]SCSS문법과 예시 SCSS (Sassy CSS)는 Sass의 주요 구현 중 하나로, CSS와 거의 동일한 구문을 사용하며 Sass의 모든 기능을 지원합니다. SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 같은 구문을 사용하기 때문에 CSS 코드를 유효한 SCSS로 변환하는 것이 쉽습니다. 1.변수 (Variables)$ 기호를 사용하여 변수를 정의할 수 있습니다.$primary-color: #FF6347; 2.중첩 (Nesting)CSS 선택자를 중첩하여 코드의 가독성을 높일 수 있습니다..container { width: 100%; .header { background-color: #333; color: #FFF; }} 3.Mixin재사용 가능한 코드 조각을 생성하는데..
반응형