오늘도 조으네💜

HTML5 , CSS3

SCSS에는 다양한 내장 함수를 제공해 준다. 여러 가지 내장 함수가 있는데 이 중 몇 가지를 알아보자. 📌 mix(color1, color2) : color1, color2를 섞어서 나온 색상이 출력된다. .box { $color: royalblue; width: 200px; height: 100px; margin: 20px; border-radius: 10px; background-color: $color; &.built-in { background-color: mix($color, red); //보라색이 출력된다. } } 📌 lighten(color, 수치) : color의 수치에 해당하는 밝기로 색상이 출력된다. .box { $color: royalblue; width: 200px; height:..

2023. 9. 24.

HTML5 , CSS3

SCSS는 CSS의 단점을 보완하기 위해 등장한 스크립트 언어이다. 프로젝트의 규모가 커지고 복잡해질수록 CSS 또한 방대해지고 복잡해져서 유지보수가 힘들어진다.🤦‍♀️ 이러한 CSS의 단점을 보완하여 복잡한 작업을 쉽게 할 수 있게 해 주고, 코드의 재활용성과 가독성을 높여주기 위해 등장한 것이 바로 SCSS이다. SASS도 있는데, SCSS와의 차이점을 꼽자면 중괄호와 세미콜론을 사용하느냐의 차이가 있다. SASS는 중괄호과 세미콜론을 대신해 들여 쓰기로 구문을 분리하고 작성한다. 그러다 보니 CSS문법에 익숙한 퍼블리셔들은 SASS의 문법이 낯설게 느껴진다. SCSS는 CSS와 동일하게 중괄호와 세미콜론을 사용하고, CSS와 더 높은 호환성을 보이기에 SCSS를 더 선호한다. 📌 SCSS 주석 SC..

2023. 9. 24.

HTML5 , CSS3

보통 레이아웃을 짤 때, 요소 사이들의 공간을 주기 위해 margin을 사용했었다. margin은 인접한 요소들의 존재 여부와 상관없이 항상 스타일이 적용된다는 특징이 있다. 의도된 여백이라면 괜찮겠지만,, 그렇지 않은 경우에는 이를 해결하기 위해 불필요하게 특정 요소에는 여백이 생기지 않게 추가로 제어해주어야 하는 번거로움이 있었는데, 이를 해결할 수 있는 방법이 있다, 바로 Gap!! 갭이다!! gap은 인접한 요소가 있을 때만 여백을 만든다! gap은 내부 children 요소들이 일적한 간격으로 떨어져 위치하도록 사용하는 속성이다. margin과 비슷한 역할을 하는 것 같지만, gap은 엘리먼트 요소 사이에만 공간을 만든다는 차이가 있다. 예전에는 gap 속성을 지원하는 브라우저가 많지 않았기에 ..

2022. 11. 15.

HTML5 , CSS3

사용자 지정 CSS 속성은 CSS 저작자가 정의하는 개체로, 이 개체에는 문서 전반적으로 재사용할 임의의 값을 담는다. 복잡한 웹사이트의 경우 방대한 양의 CSS를 가지고 있는데, 많은 값을 반복적으로 사용하는 경우가 많다. 예를 들어 폰트의 색상, 배경 색상, 테두리 색상 등... 수백 곳 서로 다른 위치에서 동일한 속성값을 사용한다면, 추후 유지보수에 의해 그 속성값을 바꿔야 하는 경우 일일이 그 값들을 찾아서 하나씩 바꿔야 하는데, 이는 시간도 걸릴 뿐더러 실수도 많을 것이다. 이 때, 사용자 지정 CSS를 사용하면 CSS전반에 걸쳐 사용되는 임의의 값을 변수에 저장해두고, 여러 곳에서 참조하여 사용이 가능하다. 전체 수정을 하게 될 경우에도 사용자 정의 CSS의 속성값만 수정해주면 전체 반영이 되..

2022. 9. 2.

HTML5 , CSS3

✨ SVG란? SVG는 확장 가능한 벡터 그래픽으로 2차원 그래픽을 표현하기 위해 만들어진 xml파일 형식의 마크업이다. SVG는 텍스트 편집기에서 css, js로 수정이 가능하다는 장점이 있다. 또한, 벡터 기반으로 확대 축소해도 품질이 떨어지지 않는다. 👀 SVG 사용법 1️⃣ img 태그 사용 SVG는 이미지 태그 사용과 동일하게 삽입할 수 있다. 2️⃣ background-image 사용 .potion { width: 300px; height: 120px; background: url('potion.png'); /* svg 미지원 브라우저 대응 */ background: url('./potion.svg') no-repeat; } 이 두가지 방식의 단점은 CSS로 SVG내부를 제어할 수 없다. 따라..

2022. 9. 1.

HTML5 , CSS3

pointer-event 속성을 사용하면 css hover/active 상태, javascript의 click/cursor/mouse 등의 이벤트에 응답하는 방식을 제어할 수 있다. .avoid-clicks { pointer-events: none; } pointer-event 속성은 11개의 가능한 값을 사용하지만 몇가지를 제외한 모든 값은 SVG와 함께 사용하도록 예약되어 있다. HTML 요소에 유효한 값은 다음과 같다. /*키워드 값*/ pointer-events: auto; /*비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.*/ pointer-events: none; /*HTML 요소에 정의된 클릭, 상태 등 커서 옵션들을 비활성화시킨다.*/ pointer-events: visiblePai..

2022. 9. 1.

HTML5 , CSS3

이미지 최적화의 중요성 웹페이지에서 자바스크립트 파일을 제외하고 나머지 바이트는 이미지가 차지한다고 해도 과언이 아닐 정도로 이미지의 비중이 높은 편이다. 이미지의 최적화는 바이트를 절약하고, 사이트의 성능을 향상시키며, 콘텐츠 렌더링의 시간을 단축시키는 데에 목적이 있다. 특히, 모바일 사용자가 늘어남에 따라 이미지 최적화의 유무가 웹 사용성에 큰 영향을 준다. 이미지 확장자 종류 JPG(JPEG) JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭하여 사진이나 예술 분야에서 많이 사용한다. JPG는 표현 색상도(24비트, 약 1600만 색상)가 뛰어나다. JPG의 경우 손실 압축 방식을 ..

2022. 8. 25.

HTML5 , CSS3

웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다. 웹폰트가 나온 이유 웹사용자 시스템에 특정 폰트가 없다면, 웹제작자가 의도한대로 UIUX를 표현할 수 없다. 웹폰트를 사용하면 사용자가 특정 폰트를 설치하지 않아도 웹제작자가 원하는 폰트를 웹페이지에 구현할 수 있다. 가독성 높은 웹폰트를 제공하여 사용자의 가독성을 높일 수 있다. 웹폰트의 문제점 웹폰트의 확장자는 크게 5가지가 있다. EOT, WOFF, WOFF2, SVG, TTF/OTF 가 있으며, 각각의 확장자는 웹 브라우저 지원 범위에 따라 다양하게 쓰인다. 웹폰트의 용량에 따라 다운로드하는 시간만큼 렌더링이 느려 진다. 한글 폰트는 용량이 크며,..

2022. 8. 25.