CATEGORIES
스크린샷) 빨간 점선은 홀수번째 배경만 스타일은 부여하였음# css 원하는 순서 및 홀수, 짝수에만 스타일css를 사용하여 스타일을 부여하는 경우 몇 번째 또는 홀수나 짝수에만 스타일을 추가하고 싶은 경우가 있습니다. 어떻게해야할까요?이 경우 매우 유용한 선택자 방법으로 특정 순번이나 홀수, 짝수 요소에만 스타일을 부여하는 nth-child() 속성을 사용할 수 있습니다. 이 방법을 사용하여 게시판에서 일부 리스트에만 스타일을 줄 때도 많이 사용됩니다. Element:nth-child(선택될 위치값)Ex) p:nth-child(2n-1) { style code }사용방법은 위와 같이 특정 요소의 css선택자에 :nth-child()를 추가합니다. 그럼 아래 예제를 참고하세요.# nth-child() 속성 예
Last Modified : 2018-07-25 13:26:30
넓리 사용되는 입력폼 중 하나인 input 태그는 다양한 속성을 가지고 있습니다. 그 중에서도 사용자가 아무것도 입력하지 않았을때 팁으로 텍스트를 보여주는 속성이 바로 placeholder 속성입니다.# input 태그 placeholder 색 바꾸기이 속성은 아래와 같이 사용됩니다. 아래를 보시면 여기에 입력하세요란 텍스트가 있죠.질문: 당신의 이름은 무엇입니까?이처럼 input 태그 안에는 브라우저 디폴트값으로 색깔이 보일 수 있습니다. 즉, 브라우저의 디펜던시로 기본 컬러값이 설정되어 있는거죠. 만약 이 색상을 바꾸기 위해서는 어떻게 해야할까요? 먼저 이를 바꾸기 위해서는 pseudo 선택자를 사용해 가능합니다. 예를들면...input::-webkit-input-placeholder { color:
Last Modified : 2020-01-20 14:58:51
html 문서에서 css를 사용하여 특정 요소의 크기를 원하는 크기만큼 조절할 수 있는 방법을 알아봅니다.엘리먼트의 크기가 너무 크거나 작은 경우 크기를 조절해야합니다. 하지만 동일한 비율로 크기간 간단하게 조절할 수 있다면 편리할텐데요 이 경우 css의 zoom 프로퍼티를 사용합니다.# CSS zoom Propertycss의 zoom 프로퍼티는 원하는 요소(태그)의 크기를 확대하거나 축소(조절)하게 해줍니다. 사용 방법이 간단하다는 장점이 있는데요 간단하게 원하는 크기를 숫자로 입력하거나 normal 등의 문자 입력만으로 쉽고 빠르게 적용할 수 있죠.div { zoom: 2; }간단한 사용방법 및 문법은 위와 같습니다. div 태그를 2배 크기로 설정하였음을 의미하죠. 이처럼 숫자를 사용하는 방법이 가장
Last Modified : 2019-08-06 19:58:17
만약 네모난 영역의 요소가 존재하고 그 영역의 크기가 width 값이 300px 그리고 height 값이 300px 이라고 가정해보겠습니다. 이때 정해진 width 값과 height 값은 내부의 padding 또는 border에 영향을 받아 사용자가 설정한 위 값보다 더 커지는 경우가 생길 수 있습니다. 이 때 css의 box-sizing 속성은 박스 형태 레이어는 크기를 결정하는 방법을 결정하며 내부 영역의 padding, border 값을 전체 width 또는 height에 포함시킬지를 선택할 수 있게합니다.box-sizing 속성은 해당하는 영역의 크기를 어떻게 결정할 것인지 선택할 수 있습니다. 이때 선택 가능한 값은 아래와 같으며 이 CSS를 사용하면 다양한 형태의 레이아웃을 구성하는데 매우 도움이
Last Modified : 2018-07-25 13:36:25
CSS 선택자 중에서 nth-child와 nth-of-type 속성은 매우 자주 사용되는 속성이다. 이 두 속성은 해당하는 태그에서 원하는 순번에 해당하는 태그만 속성을 지정할 수 있다는 장점을 가지고 있다. 이 두 속성의 차이점은 무엇인지 알아보겠다.nth-child와 nth-of-type의 가장 큰 차이점은 바로 해당하는 태그의 순서를 말하는지 아니면 부모 속성에서 특정 태그를 가진 자식 속성에서 몇번째 해당하는지의 차이라고 보면된다. 말로하면 쉽게 이해하지 못할 수 있으므로 아래 예제를 살펴보자. 풀어서 얘기하면...nth-child : 모든 자식의 순서에서 찾음nth-of-type: 해당하는 자식 태그 요소에서의 순서를 찾음만약 자식 요소 중에서도 특정한 태그를 선택하고 스타일을 부여할 경우에는 nt
Last Modified : 2020-05-10 17:03:16CSS 에서 자주 사용되는... 많이 활용되는 선택자 중 하나로 last-child 선택자를 들 수 있습니다. first-child와 함께 말이죠~ 마지막 요소에만 특정 스타일을 지정할 경우 last-child 선택자를 사용할 수 있습니다. 예를들어 만약 p 태그가 나열된 태그들 중 마지막에 해당하는 p태그에 스타일을 부여하려면? 아래와 같이 사용가능합니다.p:last-child { 스타일 속성과 값; }#1 마지막 요소 선택자 예제보기아래 예제를 봐주세요. 아래는 6개의 동일한 p 엘리먼트(요소) 중에서 마지막 요소만 배경색으로 붉은 색을 적용하였습니다. 다른 태그들은 적용되지 않고 오직 p태그에만 적용됩니다.<html><head><style type="text/css">.test {background:#
Last Modified : 2016-01-19 18:39:29CSS를 사용하여 콘텐츠를 추가하는 방법에 대하여 알아봅니다.텍스트 또는 기호 등을 html 문서가 아닌 방법으로 추가하려고 합니다. 자바스크립트를 사용하여 노드를 추가할 수도 있겠지만 CSS를 사용할 수도 있습니다. CSS의 pseudo 선택자를 이용하면 됩니다.# CSS pseudo 선택자 사용하여 콘텐츠 추가하기콘텐츠를 추가할 엘리먼트를 ::after, ::before 선택자를 사용하여 추가합니다. 그리고 content 속성을 사용하여 원하는 콘텐츠 요소의 앞, 뒤에 특정 문장를 추가할 수 있습니다. ! 주의할 점css 문서에 사용된 텍스트는 css 문서 인코딩을 따르므로 한글 등을 사용할 때 폰트가 깨져서 나타나는 문제가 발생할 수 있습니다. 이때는 css 인코딩 선언을 통해 utf-8 등을 사용해야
Last Modified : 2019-08-07 14:14:32
css를 사용하여 텍스트가 매우 긴 경우 원하는 줄 만큼만 보여주는 방법에 대하여 알아봅니다. 또 생략표시(...)로 표기하는 방법도 같이 알아봅니다. 어떻게 하면 될까요?! 언제 사용할까?전체를 다 보여줄 수 없이 요약(?)해 보여주는 리스트 형태의 글에서는 원하는 줄 만큼만 보여주는 방법이 가장 많이 쓰입니다. 이 때 생각할 부분은 몇 줄까지만 보여줄지와 어떻게 구현할까 두 가지 입니다. 생각할 수 있는 몇 가지 방법을 알아봅니다.# 멀티라인... 두 줄의 이상의 텍스트에 생략기호를 적용하는 방법가장 효과적인 방법으로 생략 기호를 적용하는 방법을 생각할 수 있습니다. 바로 css에 text-overflow: ellipsis 스타일 속성을 적용하는 방법이죠. 하지만 만약 한 줄이 아닌 경우에는 적용하기 어
Last Modified : 2020-04-25 00:03:38
css를 사용하여 웹브라우저의 텍스트를 드래그하거나 더블 클릭하여 선택할 수 있습니다. 만약 텍스트 선택을 막거나 더블 클릭 등을 바꾸려면 어떻게 할 수 있는지 알아봅니다.# CSS user-select 프로퍼티 알아보기브라우저에서 드래그나 더블 클릭을 사용한 텍스트 선택 등을 막으려면 몇 가지 방법이 있습니다. 자바스크립트를 사용 할 수 있고 CSS에서도 제공하는 user-select를 사용할 수 있습니다. user-select 사용방법은 아래와 같습니다.user-select: auto | all | none | text;user-select는 이처럼 몇 가지 값을 선택할 수 있으며 기본값은 auto입니다. 각각의 옵션 기능을 알아보겠습니다.auto : Default값으로 브라우저 허용시 텍스트 선택 가능
Last Modified : 2019-12-05 20:56:00스크롤바를 지정 및 삭제(숨기기, 안보이게 하기)하는 방법입니다. 스크립트를 사용해 반응형 웹을 만들때 많이 사용됩니다. 참고로 IE 8 이하에서는 overflow가 안되니 스크립트를 쓰거나 position을 relative로 바꿔주는 등 다른 우회 방법을 찾으셔야 합니다^^Ex)- 문서태그의 경우overflow-x: none; // 좌우 스크롤바 숨기기overflow-y: none; // 상하 스크롤바 숨기기overflow: auto; // 스크롤바 생성- iframe의 스크롤인 경우scrolling: no;
Last Modified : 2015-05-14 10:46:44
간단하게 예를들어보겠습니다. 만약 크기가 100px, 30px인 버튼을 만든다고 가정합니다. 그런경우 버튼 안에 들어갈 텍스트를 중간에 위치시키기 위해 알맞은 line-height 속성을 적용합니다. height가 30px이므로 line-height: 30px이 적당할 것입니다.하지만 문제가 나타나는데... 영문의 경우 중간에 위치한 것으로 보이지만 한글의 경우 조금 내려가보입니다. 분명 height, line-height 모두 30px인데 말이죠... 이 이유는 무엇일까요??? 아래의 두 버튼 이미지를 보시죠.두 버튼의 크기는 동일하게 width: 100px, height: 30px, line-height: 30px;위에 보시면 한글로 적힌 라인하이트가 1px 위로 올라가면 더 좋지 않을까라는 생각을 하
Last Modified : 2019-02-07 00:58:09
CSS를 사용하는 애니메이션이 가능합니다. 이때 animation 프로퍼티를 사용할 수 있는데 계속해서 반복하는 것이 아니라 만약 마지막에 해당하는 상태를 계속 유지하려면 어떻게 하는지 알아봅니다. CSS에서 애니메이션을 구현할 때 매우 자주 사용됩니다.# CSS animation 마지막 상태 유지하기기본값으로 css의 animation은 같은 동작을 계속 반복합니다. 하지만 설정에 따라 마지막 상태를 유지할 수 있는데 이때 사용하는 설정으로 animation-fill-mode를 사용할 수 있습니다.animation-fill-mode: forwards;이와같이 animation-fill-mode에 이처럼 forwards를 적용하면 마지막에 사용된 css의 상태가 유지되게됩니다.forwards를 사용할 경우
Last Modified : 2019-11-27 11:00:51웹페이지를 만들때 CSS를 적용하는 방법을 알아봅니다. 어떻게 CSS를 적용할 수 있을까요?CSS 파일을 적용하기 위해서는 파일내에서 직접 코드를 작성하는 인라인(inline) 방식과 외부 파일을 불러오는 방법으로 link 태그와 rel속성, 또는 @import를 사용하는 방법 두 가지가 있습니다. 그럼 외부 파일을 불러오는 방법에 대하여 알아보기 위해 아래 예제를 봐주시기 바랍니다.A. link 태그를 사용하는 방법<link rel="stylesheet" href="test.css" />B. @import url을 사용하는 방법<style>@import url("test.css");</style>일반적으로 A의 방법을 많이 사용합니다. 그리고 link 태그를 사용하고 disable 속성을 사용하면 해당 파
Last Modified : 2019-01-08 05:49:43CSS 선택자에 대하여 알아봅니다. CSS의 선택자는 아래와 같이 4가지로 크게 나뉩니다.공통선택자타입선택자아이디선택자클래스선택자여기서 제일 상위의 선택자가 바로 오늘 알아볼 공통 선택자입니다. 공통선택자는 무슨 역할을 할까요?# CSS 공통 선택자가 하는 일공통 선택자는 다른 선택자와 조금 다릅니다. 일반적으로 선택자가 요소를 선택하여 필터링 하기 위함이라면 공통선택자는 모든 요소 및 그 하위 요소를 선택하여 스타일 지정하는 것이 목적입니다.즉, 공통선택자에 의하여 해당하는 모든 요소에 스타일 지정을 가능하게 합니다.# CSS 공통선택자 예제보기* { color: #666, font-size: 12px; }아래처럼 일부 요소를 선택하고 그 하위의 모든 요소를 선택할 수도 있습니다.ul li * { colo
Last Modified : 2017-04-26 10:50:07
CSS의 선택자 :nth-of-type() 그리고 :nth-last-of-type()에 대하여 자세히 알아봅니다.위 두 가지 CSS는 모두 선택자 속성입니다. 특정 엘리먼트 요소를 선택할 때 사용하며 사실 많이 사용되는 선택자 속성은 아닙니다. (nth-child, first-child, last-child 등이 많이 사용됨)하지만 정해진 순서에 따라 규칙적으로 스타일을 적용하는 경우 nth-of-type()을 사용하면 매우 쉽고 빠르게 스타일을 정의할 수 있습니다. 왜냐하면 nth-of-type()은 부모를 기준으로 하지 않고 자신이 속한 형제 요소로 규칙을 정의하기 때문입니다.그럼 아래는 이 두 선택자에 대하여 좀 더 자세히 알아보도록 하겠습니다. 이 둘은 어떤 차이점이 있고 어떻게 사용해야 할까요?
Last Modified : 2019-11-11 11:54:27CSS3에서 추가된 가상선택자 :target의 사용방법을 알아봅니다.가상선택자 :target은 활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있습니다. 간단한 사용방법은 아래처럼 사용됩니다. 그럼 아래 예제소스에서 더 자세하게 알아봅니다.div:target { color: red; }# CSS3 :target 예제보기아래는 예제에 사용된 html, css 코드입니다. 먼저 html 코드를 봐주세요. href 속성의 link를 클릭하면 해당 위치로 이동하면서 css :target에 적용된 스타일이 반영됩니다.<div class="view"> <div id="no1" class="no">div 01</div> <div id="no2" class="no">div 02</div> <div
Last Modified : 2019-08-21 12:03:24CSS의 미디어 쿼리(Media Query)는 IE 구버전에서 정상적으로 동작하지 않는다. 만약 IE 8 에서 미디어 쿼리를 사용하려면 어떻게 해야할까? 사실 가장 좋은 방법은 IE 8을 지원하지 않는 방법이다. 그 이유는 간단한데 더 이상 MS에서 Support하지 않기 때문에 보안 이슈가 발생할 수 있기 때문이다...어쨌든 이를 해결하기 위한 좋은 대안이 있는데 이는 바로 Google에서 제공하는 오픈소스를 활용하는 방법이다.이 방법을 사용하면 대부분의 미디어 쿼리가 잘 동작함을 알 수 있다. 물론 완벽을 보장할 수 없으나 개인적으로 기대 이상의 미디어 쿼리를 보여준다. 이를 적용할 경우 해당 소스를 cdn 또는 서버에 저장하여 사용할 수 있다. 해당 소스는 아래 링크에서 받을 수 있다.* Link UR
Last Modified : 2016-04-01 18:34:34
CSS3의 animation 속성을 사용하여 Carousel 인터페이스를 구현하는 방법을 알아봅니다. 홈페이지에서 Carousel을 사용하는 이유는 주요 콘텐츠를 순서에따라 좌우로 이동하며 보여줄 수 있습니다. 아무래도 제한된 공간에서 강조할 콘텐츠를 가장 효과적으로 보여줄 수 있죠. 사용자 경험 측면에서도 효과적입니다.먼저 Carousel을 구현하기 위하여 생각할 부분은 아래와 같습니다.i. 애니메이션은 어떻게 구현할 것인가?ii. 자동으로 다음으로 넘어가는 코드는?애니메이션을 구현하기의 경우 스크립트를 사용할 수 있으나 여기서는 가급적 스크립트 사용을 최소화 해보려고합니다. 그래서 필수적인 부분만 스크립트를 쓰고 나머지는 모두 CSS를 쓰되 특히 CSS3의 animation과 @keyframes 쿼리를
Last Modified : 2019-08-25 20:59:03CSS를 사용하면서 가장 많이 나타나는 이슈 중 하나라고 개인적으로 생각합니다. 바로 overflow: hidden 적용에 따른 layer가 보이지 않는 버그 또는 이슈사항입니다.만약 부모 요소가 overflow: hidden 속성이 적용된 경우 자식 요소의 레이어는 부모 요소의 내부로 제안됩니다. 하지만 다양한 디바이스 환경에서 다이나믹환 레이어를 적용해야되는 경우 이는 큰 제약사항이 될 수 있습니다. 이를 해결하는 방법은 무엇이 있을까요?# 부모 요소의 overflow: hidden을 제거하는 방법가장 간단한 방법입니다. 하지만 overflow를 부모 요소에 적용한 경우 그 이유가 있을 것이라 생각할 수 있습니다. 일반적으로 overflow 속성은 자식 속성의 영역을 부모가 가지지 않는 경우 적용하기 위
Last Modified : 2018-07-09 20:30:32안녕하세요! 모바일 웹페이지 제작을 위한 디바이스별 CSS 미디어쿼리(media query)를 아래에 정리하고 있습니다. 미디어 쿼리는 반응형 웹을 구현하는데 매우 중요한 css 스킬입니다. 처음 등장하였을 때는 기준이 되는 기준 resolution이 없었으나 현재는 많이 다릅니다. 아래와 같은 기준이 많이 쓰이지 않죠...요즘은 모바일의 경우 786px을 기준으로 구분하는 것이 대부분입니다. 테블릿과 랩탑의 경우는 비슷하기 때문에 굳이 구분할 필요는 없습니다. 그렇다면 각각의 디바이스에서 적용 가능한 resolution size를 알아보도록 하겠습니다.1. iPhone- Resolution : 320 x 4802. iPhone 4 이상 Retina 디스플레이- Resolution : 320 x 480-
Last Modified : 2018-03-14 02:22:30웹사이트를 개발하는 과정이 반복되고 길어지면 CSS의 코드의 양이 늘어나게됩니다. 이때 꼭 필요한 CSS가 아닌 실제 사용되지 않음에도 불구하고 계속 남아있는 CSS 코드가 발생할 수도 있는데 이를 효과적으로 제거, 삭제하는 방법은 어떤게 있을까요?# purifycss찾아보니 purifycss 등의 어플리케이션이 존재하더군요 ~ npm을 사용해 간단하게 인스톨하고 실행하는 것이 장점같습니다. 아쉬운 점은 다들 그렇듯 이것 역시 수정을 해준다기 보다는 현재 실제로 사용되는 것이 어떤 것인지 알려주는 역할을 합니다. 자동으로 모두 제거해주고 기존 CSS를 수정해주거나 바로 사용할 수 있는 뭔가를 만들어 주면 정말 편할 것 같습니다.# 브라우저의 Audits를 활용하기Audits 메뉴는 브라우저 개발자 도구에 존
Last Modified : 2018-07-09 20:30:48제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg"> <div class="thumbImg"></div> </li></body>* 스크립트 코드// 이미지 배경으로 삽입하기thumbEles = $('li[data-imgnam
Last Modified : 2015-11-26 15:37:50
CSS를 사용하여 애니메이션 효과를 만드는 방법에 대하여 알아봅니다. 어떻게하면 애니메이션을 만들 수 있을까요?CSS3에서는 Animation을 구현할 수 있도록 animation을 속성을 제공합니다. 이 CSS 속성은 웹프론트에서 animation을 구현할 때 transition과 함께 가장 많이 사용되는 애니메이션 방법입니다. 이 방법을 사용하면 매우 쉽게 애니메이션을 만들 수 있으므로 꼭 알아두어야 합니다. 그럼 아래에서 animation 속성을 어떻게 사용하는지 자세히 알아봅니다.# CSS3 Animation 구현, animation 프로퍼티 알아보기먼저 animation 프로퍼티를 사용하는 방법입니다.animation: name delay times direction; 위 코드는 아래처럼 사용
Last Modified : 2019-08-06 20:01:16
CSS를 사용하여 텍스트에 특별한 효과를 만들 수 있습니다. 이번에는 무지개 효과를 만드는 방법에 대하여 알아봅니다. 어떻게 하면 무지개 효과를 만들 수 있을까요? 아래에서 확인해보세요. # CSS 텍스트 무지개 효과 구현하기텍스트를 강조하는 방법으로 볼드 효과나 색 또는 그림자 효과를 많이 사용합니다. 하지만 제목 등에 좀 더 강조하려는 목적으로 또 다른 효과를 원하는 경우 무지개 효과를 생각해 볼 수 있습니다. 아래는 텍스트에 css를 사용하여 무지개 효과를 적용하는 방법입니다.먼저 이를 구현하기 위해 아래의 css 프로퍼티를 사용해야 합니다.background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);//
Last Modified : 2019-08-02 20:19:12LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?# LESS에서 가상클래스 선택자 적용하기아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.div { width: 100px; height
Last Modified : 2017-09-14 12:42:22
css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?# CSS Property pointer-eventscss를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다..prevent-click { pointer-events: none; }이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.none // 클릭 이벤트를 적용하지 않음auto // 브라우저 자동으로 선택함inherit // 상속 되어짐참고로 만약 none의 값을 사용할
Last Modified : 2019-08-06 21:59:57
제이쿼리의 메소드 css()에 대하여 알아봅니다. css() 메소드는 어떻게 적용하고 어느 경우에 사용할 수 있을까요?# jQuery css 메소드는?css 메소드는 선택한 DOM 엘리먼트에 인라인 방식으로 스타일을 추가하거나 가지고 있는 값을 가져올 수 있습니다. 이때 값을 추가하는 경우 태그에 style 어트리뷰트가 추가되어 원하는 스타일이 설정됩니다.@ 변경 전<span>Webisfree.com</span>@ 변경 후<span style="color: red">Webisfree.com</span>간단한 css를 사용하는 문법은 아래와 같습니다.$(element).css();이처럼 태그에 인라인 방식(inline)으로 스타일을 추가하는 방법은 css()와 attr('style')을 사용하는 방법 두 가지
Last Modified : 2019-08-14 08:08:48CSS preprocessor LESS의 자주 사용되는 문법 및 방법은 무엇이 있을까요?# 자식 요소에 간단하게 스타일 부여하기p { color: #fff; span { color: #f00; }}위와 같은 방법으로 짧은 코드로 자식 요소에 스타일 추가가 가능합니다.에 스타일 추가가 가능합니다.
Last Modified : 2017-04-19 13:56:59CSS에서는 선택자로 ::를 기호를 사용해 pseudo 선택자를 지정합니다. 그런데 자바스크립트에서 ::after 또는 ::before와 같은 pseudo를 선택하려면 어떻게 할까요?
Last Modified : 2017-09-21 00:20:02CSS의 전처리기 css인 SCSS에서 자주 사용되는 @mixin 그리고 @inclue에 대하여 알아보려고 합니다.@mixin@include이 둘은 sass, scss에서 자주 볼 수 있는데요 어떻게 그리고 언제 사용하는지 알아봅니다.# @mixin @include 알아보기먼저 두 가지 @mixin와 @include는 항상 함께 사용되며 @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있습니다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능합니다. 이때 설정에는 @mixin을 그리고 사용할 때는 @include를 사용하면 됩니다. 아래 코드를 봐주세요.@mixin box-default { padding: 20px 30px; margin-bottom: 20px;}위에서는 @m
Last Modified : 2020-05-13 15:03:54선택한 요소를 가로로 정렬하는 방법은 간단합니다. 하지만 만약 세로로 정렬하려면 어떻게 해야할까요?가로 정렬의 경우 text-align을 사용하는 방법이 있지만 모든 요소에 vertical-align: middle을 선언한다고 원하는 가로방향 정렬이 되지 않습니다.어떻게해야 가능할까요?
Last Modified : 2017-09-21 00:19:12CSS의 전처리기 언어인 SCSS를 사용하는 방법 중 다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로 @extend를 사용한 스타일 확장 방법입니다.# SCSS의 스타일 확장 알아보기, @extend전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.@extend <가져올 스타일>문법은 위와 같이 간단하며 가져올 스타일을 명시하면 됩니다.이 방법은 매우 유용합니다. 특히 컴포넌트 등의 인터페이스를 사용할 때도 간단히 확장해 사용할 수 있고 아니면 아이콘 등의 비슷한 그룹끼
Last Modified : 2020-04-30 21:36:45
아래는 SCSS를 사용하여 스타일을 선언할 때 어떻게 변수를 선언하고 변수 선언과 관련된 다양한 방법들을 알아보려고 합니다.# scss의 변수 선언하기scss에서도 역시 변수를 선언하고 사용할 수 있습니다. 그렇다면 변수 선언을 왜 할까요?동일한 컴포넌트 UI에 동일한 스타일을 유지할 수 있다.버튼이나 아이콘에 적용된 스타일을 모든 페이지에서 한 번에 바꾸기는 쉽지 않습니다. 이 경우 변수를 사용하여 지정해두면 간단하게 변수의 값만 변경해 모든 페이지의 스타일을 한 번에 변경해 적용할 수 있습니다. 그리고 모든 변수들을 variable.scss 등의 파일을 만들어 한 번에 모아서 관리하기도 합니다. 이런 이유로 유지보수, 고도화에 유리합니다. ! scss 변수 선언의 방법변수 선언시 아래와 같이 $ 키워드
Last Modified : 2020-05-27 17:16:17