• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Front-end/CSS(SASS,SCSS)28

728x90
[CSS]css 최신문법에서 추가되는 기능과 설명, 호환성 여부 CSS 기능 중 주목할 만한 몇 가지와 그 설명들입니다.브라우저에서 지원가능한 시기에는 구지 SASS를 사용할 필요가 없는 날이 오겠네요. 1. CSS Nesting설명:Sass와 같은 CSS 전처리기에서 제공되던 네스팅(Nesting) 기능이 이제 CSS 표준으로 도입되고 있습니다. 사용법:.container { color: black; .child { color: red; }} 장점: 코드를 더 간결하게 작성할 수 있고 구조적으로 이해하기 쉬움. 지원 여부:Chrome: 부분 지원 (플래그 설정 필요)Firefox: 미지원 (개발 중)Safari: 미지원 (예정)Edge: Chrome 기반으로 부분 지원호환성 팁: Sass 또는 PostCSS 같은 전처리기를 활용해 네스팅을 사용 가능. 2..
[CSS]버튼이나 링크에 애니메이션 제공해주는 라이브러리 버튼이나 링크에 마우스를 올렸을 때 적용할 수 있는 여러 애니메이션 효과를 제공하는 라이브러리입니다. 다양한 버튼 애니메이션을 구현해주며, 버튼 제작시 참고용으로도 괜찮은거 같습니다.https://ianlunn.github.io/Hover/ Hover.css - A collection of CSS3 powered hover effects ianlunn.github.io설치방법사용하려면 먼저 라이브러리를 포함시켜야 합니다. 두 가지 방법으로 사용할 수 있습니다:(1) CDN으로 포함하기HTML 파일의  (2) 직접 다운로드하여 사용하기https://github.com/IanLunn/Hover 에서 파일을 다운로드합니다.프로젝트에 hover.css 파일을 포함시킵니다.HTML 파일에 해당 CSS 파일을 링크..
[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: 포커스를 포함한 하위 요소를 가진 요소..
반응형