본문 바로가기

분류 전체보기

 (137)
Sass(Scss) 더 알아보기 Sass 7-1 패턴 - 7개의 폴더, 1개의 파일 이란 뜻으로, 7개의 폴더를 나눠 최종 산출물을 한 파일로 만든다는 뜻입니다. - 다른 프레임워크에서는 프레임워크에 맞춰 작업하기도 합니다. - 7 folder 1) base/ : 가장 기본이 되는 스타일이 들어가있습니다. 2) components/ : 버튼이나 드롭다운 등 각각의 스타일을 정의합니다. 3) layout/ : header, footer, sidebar 등의 레이아웃 스타일을 관리합니다. 4) pages/ : component와 layout을 묶어 페이지의 스타일을 관리합니다. 5) themes/ : 다크모드 등의 테마를 관리합니다. 6) abstracts/ : Sass 함수, 변수 등을 관리합니다. 7) vendors/ : bootstr..
SASS https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com Sass 란? Syntactically Awesome StyleSheets 의 약자로, 컴파일에서 Css 파일을 만드는 스타일 시트 언어입니다. Sass를 사용함으로서, 가독성, 유지보수, 성능, 중복코드 방지 등 다양한 면에서 이점을 얻을 수 있습니다. - nesting 구조 /* css */ p{ color: red; } p span { color: blue; } a:hover, a:..
CSS 반응형 디자인 PC와 모바일의 화면 비율은 다릅니다. 따라서 PC에 맞춘 웹 디자인은 모바일에서 보기 적합하지 않습니다. 반면, 모바일에 맞춘 웹 디자인 또한 PC에서 사용하기는 적합하지 않은경우가 많습니다. 따라서 화면의 비율에 따라 디자인이 바뀌는것을 반응형 디자인이라고 합니다. 다른 디자인 방법으로는 적응형디자인이 존재하는데, 적응형 디자인 같은 경우는 디바이스에 따라 웹 페이지를 따로 만드는 한편, 반응형 디자인은 웹의 크기에 따라 디자인이 변화합니다. Media Query - @media @media media-type and {media-feature-rule} { /* CSS rules */ } /* 예시 */ body{ background-color: blanchedalmond; } @media scre..
CSS Grid - 단위 fr - fraction, grid의 가로 길이와 세로의 길이를 비율로 나눌때 사용합니다. - 1:3:2 의 비율로 grid를 구성하려면 1fr 3fr 2fr 의 형식으로 만들 수 있습니다. - 절대길이와 함께 명시한다면, 남은 길이를 나눠갖게 됩니다. 예를 들어 100px 1fr 2fr 이라고 하면 100px을 제외한 나머지 길이를 1:2 로 나눠갖게 됩니다. min-content - 최소 content, 가장 최소한으로 차지할 수 있는 길이값입니다. - 내부 item의 크기에 딱 맞는 크기의 값만큼만 할당됩니다. mas-content - 최대 content, 차지할 수 있는 최대한의 크기를 지정할 때 사용합니다. - 부모값에서 가장 최대한으로 차지할 수 있는 값을 얻습니다. grid-template-..
CSS Grid - 단일 아이템 속성 grid-row & grid-column /* 1행부터 3행까지 차지하는 item */ grid-row-start : 1; grid-row-end: 4; /* 4행까지 늘어나는 item */ grid-row-start: span 4; /* grid 이름을 이용한 확장 */ grid-row-start: [grid_name] 2; - grid-[ row | column ]-start 와 grid-[ row | column ]-end 의 단축속성입니다. - grid의 선을 기준으로 작동합니다. grid-row-start & grid-column-start - 행/열 내 item에 설정하는 옵션입니다. - 지정한 숫자의 선이 item의 시작을 의미합니다. - n 번째 행/열부터 시작하는 item을 지정하려면 n..
CSS Grid - 컨테이너 설정 justify-content & align-content - 바깥쪽 컨테이너가 안쪽 컨테이너보다 커서 남는 여백이 존재해야 적용됩니다. - flex 레이아웃에서는 각자 주축/교차축 에 대한 정렬방법을 지정했습니다. - grid 레이아웃에서는 행 / 열에 대한 item들의 배치방법을 결정합니다. justify-content - columns의 배치 방법을 설정합니다. - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다. align-items - rows의 배치 방법을 결정합니다. - start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용..
CSS Grid grid layout은 flexbox과 유사합니다. 하지만 flexbox는 여러개의 item들이 주축에만 존재합니다. 반면, grid는 2차원 구조로, 컨테이너 내에 격자형으로 item들을 집어넣을 수 있습니다. grid의 구성 - grid는 행을 뜻하는 row와 열을 뜻하는 column, 그리고 행과 열 사이의 공백을 의미하는 gutters 가 존재합니다. grid layout 사용하기 /* 1. 2행 3열 그리드 레이아웃 */ .container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } /* 2. grid-template-area로 세부 설정하기 */ .container-grid-area{ di..
CSS Animation - 다수의 스타일을 전환하는 애니메이션을 적용합니다. - 유저의 액션에 따라 A에서 B로만 행동하는 transition과는 다르게, keyframe을 사용하여 다양한 액션의 세트를 만들 수 있는 속성입니다. keyframes @keyframes slidein{ /* 처음상태 */ from{ margin-left: 100%; width: 300%; } /* 이후 상태 */ to{ margin-left: 0%; width: 100%; } } @keyframes identifier{ 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } - 애니메이션에서 작동하는 중간절차를 의미합니..

티스토리툴바