본문 바로가기

CSS36

[SCSS]초 간단 정리 scss 변수파일 만들고 사용하는 방법 개발자 퍼블리셔라면 필수로 알아야 하는 지식!

scss를 사용하면서, CSS로 트랜스컴파일하지 않고 scss파일들에서만 사용하는 변수를 저장하기 위한 전용파일을 만들고 사용하는 방법에 대해서 살펴보겠습니다. _variable.scss파일에 black 키워드를 가지는 변수를 만들고, 다른 scss파일에서 이 변수를 통해서 background-color를 검정색으로 적용해 보는 예시로 살펴보겠습니다. 결과는 아래 사진입니다. 그럼, 작업을 순서대로 살펴보겠습니다. 1. '_'가 들어간 scss파일은 css로 트랜스컴파일에 대상이 되지 않습니다. 예를 들어서 map_control.scss는 css로 트랜스컴파일되지 않습니다. css로 트랜스컴파일되지 않는 특성을 이용해서 어차피 scss 파일들만 사용하는 변수파일에 이름을 '_'를 넣어서 만들어 줄 수 있.. 2021. 4. 23.

SASS 사용 방법- 정말 편리하고 간편하게 css 개발 가능!

SASS도 '언어'입니다. CSS는 프로젝트의 규모가 커지고, html 요소와 그 요소들을 style해주는 css 코드는 많아 질수록 관리가 어려워지게 됩니다. sass는 큰 프로젝트일 경우에 유용합니다. SASS를 사용할 경우 이점. 계층적으로 코드를 작성할 수 있어서 코드를 보기가 편해집니다. css 속성의 변수 작성(mixin) 및 조건문 사용이 가능합니다. 성능적인 이점은 없습니다. 그보다, 필요 없습니다. SASS의 큰 특징이라면 브라우저는 표준 css만 읽을 수 있으므로, SASS에 문법에 맞는 코드를 작성하고 CSS로 트랜스컴파일링을 해야한다는 겁니다. 하는 방법은 밑에 설명에 나와 있습니다. SASS 적용 방법 1. npm 초기화 $ npm init -y 2. sass 라이브러리 설치 $ .. 2021. 4. 21.

[CSS] box-sizing 설정 알아보기

box-sizing css 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. 보통 border를 설정하게 되면, 기존에 요소의 너비와 높이에 border의 두께를 더해서 요소가 화면에 보여집니다. 이 기본 설정이 box-sizing: content-box입니다. 요소에 border를 주더라도, 요소의 크기가 border에 영향을 받지 않게 하려면, box-sizing: border-box를 주면 됩니다. box-sizing: content-box box-sizing: content-box;는 border 바깥 쪽으로 'border'의 크기가 커집니다. 마치 margin을 준 것처럼요. .child_container { box-sizing: content-box; width: 100px; borde.. 2021. 4. 17.

[CSS] 텍스트 다루기-2 자간, overflow 줄 바꿈 퍼블리셔나 프론트 개발자라면 반드시 알아야 하는

letter-spacing word-break overflow-wrap letter-spacing 글자 간격 조절하는 옵션. CSS 속성은 글자 사이의 간격(자간)을 조절합니다. div { letter-spacing: 10px; } 옵션 값을 위처럼 letter-spacing: 10px;을 주게되면, 글자 사이의 간격이 10px만큼 떨어져서 화면에 그려집니다. letter-spacing 설명. /* */ letter-spacing: normal; /* 값 */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* 전역 값 */ -- letter-spacing: normal; 현재 글꼴의 기본 간격. /* 값 */ 기본 간격에 추가할 글.. 2021. 4. 17.

[CSS] 블록에 scroll주는 법 프론트 개발자라면 반드시 알아야 하는

height: 100px; overflow: scroll; 2021. 4. 15.

CSS 반드시 알아야 하는 기초 개념 면접 필수 질문

웹 퍼블리셔 또는 프론트 개발자 신입 면접에서 다루는 기본 개념 꼭 물어봅니다. margin과 padding의 차이점 margin : border를 기준으로 바깥 여백을 주는 것. //margin : 상하 좌우 margin : 0 auto; // -> 가로 가운데 정렬. padding : border를 기준으로 안 쪽 여백을 주는 것. // padding: 상하 좌우; position position : static 기본 페이지 레이아웃을 따릅니다. 기본값입니다. (default)요소를 일반적인 문서 흐름에 따라 배치합니다. position : relative 자기 자신을 기준으로 Offset이 적용됩니다. top, right, bottom, left를 기준으로 Offset이 적용됩니다. position.. 2021. 4. 8.

CSS 적용 우선순위 프론트엔드 개발자라면 반드시 알아야하는 CSS 우선순위

마크업 작업과 CSS 작업 그리고 vue.js프레임워크를 사용해서 현업에서 개발을 하면서도, 이제야 CSS 스타일 적용 우선순위에 대해서 공부하게 되네요. 매번 중복되는 요소에 style이 들어가서 우선적으로 style을 적용하기 위해서 !important를 남발했던 저 스스로 반성하게 되는 것 같습니다. 그럼, 스타일 적용 우선순위에 대해서 알아보겠습니다. 1. 속성 값 뒤에 !important 붙이는 속성. 2. HTML에서 style옵션을 준 경우 3. #id 로 지정한 속성 4. .클래스, :추상클래스로 지정한 속성 5. 태그이름으로 지정한 속성 6. 상위객체에 의해 상속된 속성 상위객체에 의해 상속된 속성 VS .클래스 끼리에서의 우선순위는 상위객체에 의해 상속된 속성의 스타일이 우선 적용됩니다.. 2021. 4. 3.

프론트엔드 개발자와 퍼블리셔라면 반드시 알아야 하는 CSS 단위

px 가장 편리하게 기본적으로 사용할 수 있는 단위입니다. PX은 숫자 그대로의 절댓값 고정 크기입니다. 숫자의 크기에 맞게 웹에 보여줍니다. 반응형 웹을 개발한다면, 메인으로 사용하지 않는 것이 좋습니다. rem(= root em) 상대적인 크기 조절이 가능하기 때문에 반응형 웹사이트를 작업할 때 많이 사용 됩니다. rem 단위는 html 요소의 크기의 몇 배인지로 크기를 정합니다. 예를 들어서 html 폰트 크기를 14px로 설정한다면, 여기서 사용하는 rem은 14px 단위로 계산이 일어납니다. 2rem은 28px이겠죠? html { font-size: 14px; } div { font-size: 2rem; // 14 * 2 = 28px; } html에서 사이즈를 지정하지 않으면 기본적으로 시스템 .. 2021. 4. 3.

[CSS] html 조건 요소 자동배치(grid-auto-flow)

/* Keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; 아래의 코드를 주게 되면, 추가되는 html 요소에 대해서 한 줄에 옆으로만 요소를 추가하게 됩니다. 요소가 추가되는 부모 요소의 크기는 고정되고 자식 요소들의 크기가 줄어들면서 요소들이 추가되게 됩니다. grid-template-column 속성 없이, 아래 코드 속성만 줘도 작동합니다. grid-auto-flow: column; 1개 요소만 있을 경우. 2번째 요소가 채워졌을 경우. 2021. 3. 8.

[CSS] 박스 그림자지게 하는 방법

div 박스에 선이 아닌, 그림자를 지게하는 방법입니다. CSS 키워드는 box-shadow입니다. 전 후 box-shadow: ; 옵션 설명. 첫 번째와 두 번째 옵션입니다. 그림자의 offset을 설정합니다. 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 0이 되어 테두리가 선명해집니다. 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 0(그림자와 요소 크기 동일)입니다. 그림자 음영의 색상 ex) 전. 아무런 옵션 없이 단순히 영역만을 만든다면, 아래 사진처럼 선으로만 구분되는 영역이 만들어 집니다. 후. box-shadow: 0 6px 6px 0 gray; div { width.. 2021. 3. 1.

티스토리툴바