Css & Sass & Scss 마카로그

Css & Sass & Scss

Cascading Style Sheet와 CSS 전처리기

CSS-in-JS vs 전통적인 CSS 설계 패턴 비교 컴포넌트 단위 개발이 보편화되면서 CSS 작성 방식도 진화하고 있다. 특히 CSS-in-JS는 최근 많은 프론트엔드 프로젝트에서 선택되고 있는 스타일링 방법 중 하나이다. 하지만 여전히 전통적인 CSS 방식과 비교해 어떤 장단점이 있는지 명확하게 이해하지 못하는 경우가 많다. 이 글에서는 CSS-in-JS와 전통적인 CSS 설계 패턴을 기술적 관점에서 비교

a month ago

7 min read

CSS 자식노드를 일정 간격 띄워서 배치 (inset)개요inset은 태그 요소의 위치를 결정하는 top, right, bottom, left의 축약 스타일 속성이다. 즉 상하좌우를 각각의 css 속성으로 설정하지 않고 inset 하나만 사용하는 것이 가능하다. 사실 inset을 사용하지 않더라도 top, right, bottom, left 등을 사용할 수 있다.문법inset(상 우 하 좌); inset(상하

a month ago

1 min read

CSS 반응형의 새로운 기술 (clamp함수)개요clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하고, 작은 CSS 코드만으로 구현이 가능하기 때문에, 비교적 단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리하다.단, 여전히 반응형 웹을 작성하는 방식은 미디어쿼리가 기본이며 clamp

a month ago

2 min read

CSS 반응형 폰트 사이즈 반응형으로 폰트의 사이즈를 조절 할 수 있는 방법은 여러가지이다.미디어 쿼리를 사용 해도 되지만,미디어 쿼리를 사용 하지 않고 vmin 단위를 사용하여 브라우저의 사이즈가 조절될 때 폰트의 사이즈도 조절이 가능하다./* 미디어 쿼리 사용 */ font-size: 14px; @media screen and (max-width: 500px) { font-s

a month ago

1 min read

CSS 스크롤에 스냅 걸기 스냅 위치로 이동 및 스크롤 동작을 제어하는 기능이 포함된 CSS 내장 모듈이다.<div> <section>1</section> <section>2</section> <section>3</section> <section>4</section> &

a month ago

1 min read

CSS 로딩 스피너 만들기 무언가 액션을 할 때 로딩을 보여주는건 사용자 관점에서 있는게 직관적이고 좋다.CSS 애니메이션 프로퍼티를 사용하여 로딩 스피너를 만들 수 있다.<body> <div></div> </body>@keyframes loading { 0% { transform: rotate(0deg); } 100%

a month ago

1 min read

Sass & Scss 정리 CSS Preprocessor 란?SASS, SCSS, Less, Styleus 등 웹을 코딩하다보면 들어봤을법한 이름이다. 이것들은 CSS 전(예비)처리기 라고 부르는데 보통 CSS Preprocessor라고 부른다. CSS가 동작하기 전에 사용하는 기능으로 선택자 중복될때 편하게 사용할 수 있고 연산, 조건문, 반복문 등등 사용할 수 있다. 하지만 웹은

a month ago

20 min read

CSS 단위 px픽셀 단위로 지정한다.%부모 태그를 기준으로 %단위로 지정한다.rem(root em)최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그이다.em현재의 font-size를 정의한다.body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다.vw뷰포트의 너비 값이다.요소

a month ago

3 min read

요소의 이동과 애니메이션 트랜스폼 (transform)요소의 이동, 회전, 확대, 축소, 비틀기 등의 효과를 부여하기 위한 함수를 제공.transform 속성에 원하는 function들을 값으로 전달하면 됨.transform-origin : 요소의 기준점을 설정. 기본적으로는 50%, 50% (center)transform 속성의 skew()를 사용하는 도중 X축과 Y축을 동시에

a month ago

5 min read

텍스트 그림자와 그라디언트 텍스트 그림자 (text-shadow)해당 속성은 텍스트에 그림자를 넣어준다. 그림자는 해당 Element X축 Y축의 길이와 색상, 블러넓이 조합으로 생성된다.X축은 오른쪽 방향이 +(Plus) / 왼쪽 방향이 -(마이너스)Y축은 아래쪽 방향이 +(Plus) / 위쪽 방향이 -(마이너스)사용법 (ex)div{ text-shadow: 2px 2px 3p

a month ago

2 min read

스타일 상속/적용 우선순위 모든 프로퍼티가 상속되는 것은 아니다.width/height = no margin = no padding = no border = no box-sizing = no display = no visibility = yes opacity = yes background = no font = yes color = yes line-height = yes text-al

a month ago

1 min read

요소의 정렬 float해당 요소를 다음 요소 위에 떠있게 한다. (가리지는 않음)position이 absolute와 병행해서 사용하면 안 됨.widthfloat 적용 시 inline처럼 content의 크기만큼 width가 변경됨.다음 block요소가 그 크기만큼 가로가 작아지는게 아님. (여전히 width 100%)관련 문제float가 선언된 요소와 그렇지 않은 요소

a month ago

2 min read

요소의 위치 position기준, 좌표 프로퍼티 (top, bottom, left, right)static (Default값) : 부모 요소의 위치 기준relative : 자신이 static일 때 기준에서 좌표 프로퍼티만큼 이동absolute : static이 아닌 부모, 조상 요소중 가장 가까운 요소를 기준으로 좌표 프로퍼티만큼 이동.absolute 선언시 block

a month ago

2 min read

박스 모델과 폰트 박스 모델box-sizingbox-sizing의 기본값이 content-box이기 때문에 지정한 width, height는 컨텐츠의 가로, 세로 크기를 지정한다.box-sizing을 border-box로 지정하면 width, height값은 컨텐츠 + padding + border를 포함한 영역을 지정한다. 그렇기에 padding을 높여도 박스의 크기가 커

a month ago

4 min read

CSS 기초 CSS3의 시작HTML5가 '정보와 구조화, CSS3가 'Styling'의 정의'라는 본연의 임무에 충실하도록 명확하게 구분하기 시작함.각자의 문법을 갖는 별개의 언어.HTML과 CSS의 연동 방식Link Style : 외부 CSS파일 연결Embedding Style : head태그 내부에 style태그를 생성 -> style태그 안에 선언Inline

a month ago

4 min read

전상욱

7 팔로워

4 팔로잉

소프트웨어 개발자 전상욱입니다.

태그

CSSReset CSS선택자속성box-sizingbackground그라디언트폰트텍스트positionz-indexoverflowfloatwidth프로퍼티상속우선순위inherit중요도text-shadowlinear-gradient그림자transformtransitionanimationkeyframespx&rememvwvhvminvmaxchexsassscssfunctionforifImportOperationsExtend문자 보간Arguments@include@mixin변수중첩된 속성AmpersandNesting문법컴파일CSS Preprocessor로딩미디어 쿼리clamp미디어쿼리insettoprightbottomleftmarginpaddingcss-in-js패턴비교

최근 댓글

아직 댓글이 없어요