퍼블리싱 아카이브

용도 공통된 스타일을 반복적으로 사용하기보다 한 번 선언하고 여러번 사용하고 싶을 때 @extends 문법을 쓴다. 예시1) 클래스를 선언하여 extend하는 법 => css 파일에서도 존재하는 클래스 //scss .btn{ width: 100px; height: 100px; padding: 20px; } .btn-green{ @extend .btn; color:rgb(196, 253, 196) } //css .btn, .btn-green { width: 100px; height: 100px; padding: 20px; } .btn-green { color: rgb(196, 253, 196); }/*# sourceMappingURL=main.css.map */ 예시2) 가상클래스 %를 선언하여 exten..

숨김 콘텐츠 디자인에서 보이지 않는 정보이더라도 콘텐츠의 정보와 내용을 이해하기 위해 필요함. diplay: none 속성을 이용하면 애니메이션이 통하지 않는 것과 같이 해당 속성을 사용하여 콘텐츠를 숨길 경우, 스크린 리더 등 보조기기가 인식할 수 없는 문제가 생긴다. //화면의 초점이 해당 영역에 머물면서도 스크린 리더가 정보를 읽을 수 있게 함 .ally-hidden{ position:absolute !important; clip:rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap; } 스크린 리더의 가상초점 이용

피그마 디자인을 완성했을 때 이것을 제플린으로 옮기는 방법을 활용해 보겠다. 제플린은 디자이너가 피그마, XD, 포토샵, 스케치로 만든 디자인을 화면에 그대로 구현할 수 있도록 도와주는 툴이다. 1. 먼저 내보내고 싶은 프레임을 선택한 뒤, 제플린 플러그인을 설치해 실행해준다. 2. Export 버튼을 누른 뒤 잠시 기다린다. 3. 프레임 내보내기가 완료되면 오른쪽의 아이콘을 클릭한다. 4. 제플린에서 HTML, CSS 코드를 참고할 수 있다. Alt 를 누르고 요소를 클릭하면 %단위로 padding과 margin을 확인할 수 있다.

1. 인라인 스타일 조작 Hello! World! 2. class로 조작(className, classList) 실제로 퍼블리싱을 하는 과정에서 클래스를 조작하는 일이 많다. 미리 CSS문서에서 'on클래스가 붙는 경우'와 '그렇지 않은 경우'로 나누어서 스타일을 지정해둔 뒤, 제이쿼리나 자바스크립트 문법을 통해 class를 조작하여 스타일을 변경 시키는 경우가 많다. 1) className 요소 노드의 className 프로퍼티를 참조하면 class attribute 값을 문자열로 반환한다. 요소 노드의 className 프로퍼티에 문자열을 할당하면 class attribute 값을 할당한 문자열로 변경한다. Hello! World! 2) classList classList 프로퍼티는 class att..

HTML, Javascript ID Check! Password Check! Close CSS button { padding: 40px; font-size: 48px; color: blue; background-color: yellow; border: none; border-radius: 5px; cursor: pointer; margin-right: 100px; } #alertBtn { display: none; } #text { color: blue; font-size: 36px; background-color: yellow; } /*# sourceMappingURL=alert.css.map */

지난 포스팅은 @import를 사용해서 .scss(.sass) 파일을 분리하는 것을 공부해보았다. 그런데 최신버전에서는 @import를 쓰는 대신 @use와 @forward를 쓰라고 한다. @use와 @import는 어떻게 다를까? 그리고 왜 @import 대신 @use, @forward를 쓰는 것이 나을까? 1. @import를 쓰면 생기는 문제 지난 포스팅에서 이야기했듯이 규모가 큰 프로젝트일수록 .scss 파일을 따로 분리해서 사용한다. 예를 들어 배경색은 _bg.scss 파일로, 변수들은 _var.scss 이런식으로 따로 정리해서 모아둔다. 그러다보면 변수명도 겹칠 때가 있을지모른다. 배경색의 메인컬러를 지정하고 싶어서 $main-color라고 변수를 만들어 놨는데 폰트 색을 지정할 때도 $mai..

1. Partial(파일분리, @import 사용하기) 소스에 반복되는 부분들을 분리, 분산시켜서 모듈화시키는 기능. SCSS나 Sass를 사용하면, 프로젝트가 커질수록 유지보수와 수정이 어려운 CSS의 단점을 보완해 준다. SCSS/Sass 파일을 @import 해서 스타일 별로, 기능별로 파일을 분리하여 사용할 수도 있다. 이러면 코드를 관리하기도 편해진다. (@import는 CSS에서도 자주 사용한다. 구글 웹폰트 같은 거 사용할 때 자주 씀) ** @import하는 파일명 앞에는 _(언더바)를 붙여야 한다. 언더바를 붙이지 않는다면 분할 된 파일들 모두가 컴파일 되기 때문에 여러개의 .css 파일이 나눠서 저장된다. 그러나 SCSS/Sass 파일 이름 앞에 언더바를 붙여서 파일명을 저장하면, SC..

1. 믹스인(Mixins)은 왜 사용하는가? 스타일 시트를 작성할 떄, 비슷하거나 동일한 스타일을 반복해서 사용해야 하는 때가 있다. 믹스인을 사용하면 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다. 2. 믹스인 사용하기(@mixin, @include) @mixin 지시자로 스타일을 지정하고 @include를 사용해 해당 믹스인을 호출하여 사용한다. 이는 물론 CSS로 컴파일하면 보이지 않는다. mixin을 통해 box-style을 지정하고 .one, .two에서 해당 스타일을 호출했다. mixin을 호출하면서 인자를 사용하여 사용할 수도 있다. //SCSS @mixin box-style($bg-color){ width: 100px; height: 100px; display: flex; just..

1. Maps ( ) 괄호 안에 Key: Value 의 형태로 저장하여 사용한다. Key는 고유해야 하지만 Value는 중복이 가능하다. 변수를 각각 선언하는 대신, 관련있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있다. 안녕하세요! 계묘년 새해복 많이 받으세요! 이번 해는 돈 많이 버세요! //SCSS $font-size: ("h1" : 48px, "h2" : 28px, "p":18px); section{ h1{ font-size: map-get($font-size, "h1"); } h2{ font-size: map-get($font-size, "h2"); } p{ font-size: map-get($font-size, "p"); } } //CSS section h1 { font-size:..

1. Lists(목록형 변수) 리스트는 순서가 있는 값이다. lists의 요소들을 쉼표나 공백 또는 / 로 구분하여 생성하고, 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식한다. 빈 lists를 만들 때나 lists에 들어있는 값이 하나인 경우, [] 나 ()를 사용하여 생성한다. lists 값의 인덱스는 1부터 시작한다. 첫번째 두번째 세번째 //SCSS $main-color: orange; $font-color:white; $btn-width: 100px, 200px, 300px; button{ &:nth-child(1){ color:$font-color; background:$main-color; width: nth($btn-width,1); // width: 100px..