메로그

크로스 브라우징이란 웹 페이지를 제작할 때, 다른 OS, 브라우저, 기기 등에 관계없이 정상적으로 동작하게끔 페이지를 제작하는 기법을 말합니다. W3C 의 규정에 맞게끔 코딩을 해야 하는데, 이는 MDN(https://developer.mozilla.org/ko/), canisue(https://caniuse.com/) 에서 쉽게 확인할 수 있습니다. 크로스 브라우징을 하는 이유 솔루션 제품을 개발하면서 느꼈던 경험으로, 사용자가 어떤 브라우저를 사용하는지 알 수 없기 때문에, 기본적으로 점유율이 높은 브라우저들은 대부분 지원을 해야 했다. (아마 대부분의 솔루션 제품은 이러한 특성을 지니고 있을 것이다.) 크롬과 엣지에서 다른 화면이 나오거나, 특히 IE 에서 다른 화면이 나오거나 지원하지 않아 오류가..

사이트의 레이아웃을 구성할 때, 사용하는 css 레이아웃 기법으로, 쉽게 수직, 수평 레이아웃 구조를 만들 수 있다. 또한 웹브라우저의 크기에 따라 반응형 레이아웃을 만드는데 효과적으로 사용할 수 있습니다. 최근에는 흔히 사용하는 기법으로, 예를 들어 material-ul의 react의 템플릿을 보면은 이제 flex 기법을 이용한 구조를 쉽게 볼 수 있을 것이다. 구조 flex 의 구조는 flex-container (display: flex 가 설정된 div) 안에 flex-item 들이 들어가는 구조 입니다. 해당 구조가 갖춰져야 안에 items 를 정렬시킬 수 있습니다. flex, inline-flex display: flex, display: inline-flex 를 사용하면, flex contai..

Next.js React 의 CSR 의 단점을 해결하기 위해 Vercel 에서 만든 프레임워크 입니다. 여기서 말하는 단점 중 대표적인 것은 첫 로딩시 지연되는 문제를 말하고 이러한 이유 때문에 SEO 에서 최적화 하기가 어렵다는 문제가 있습니다. SetUp npx create-next-app 설치를 하게 되면 기본적인 Next.js 에서 사용하는 모듈(웹팩, 필수 라이브러리)들이 기본적으로 설치되고 폴더 구조도 형성 됩니다. package.json 안에는 설치한 dependencies 가 있는 것을 확인 할 수 있음. // 개발 모드 npm run dev # or yarn dev /* 개발한 내용을 빌드 시켜 `production` 을 할 준비 react 소스를 js 소스로 변환. build 완료시 ...

조건문 @if, @else 를 사용하여 조건문을 사용할 수 있습니다. scss $black: #000; $border: 1px solid red; @mixin btn_radius($h, $radius: true) { padding: 0 20px; height: $h; line-height: $h; background: yellow; color: $black; text-align: center; @if $radius { border-radius: $h / 2; } @else { border: $border; } } .btn { @include btn_radius(30px, true); } @mixin position($x, $y, $z) { position: absolute; left: $x; top: $..

@for @for 변수 from start to end 의 형태로 작성하며, to 대신 through 를 작성할 수 있습니다. to 는 해당 end 미만으로 반복, through 는 해당 end 이하로 반복합니다. scss @for $i from 1 to 6 { .ic#{ $i } { border: 1px solid red; } } @for $i from 1 through 5 { .ict#{ $i } { border: 1px solid blue; } } css .ic1 { border: 1px solid red; } .ic2 { border: 1px solid red; } .ic3 { border: 1px solid red; } .ic4 { border: 1px solid red; } .ic5 { bor..

Interpolation 보간법이라고도 하며, #{} 을 사용합니다. 클래스에 이름을 여러가지 형태로 사용할 수 있습니다. 또한 @mixin 에서도 사용합니다. scss @mixin bx($position, $wid, $color) { border-#{ $position }: $wid solid $color; } div { @include bx(right, 2px, red) } div { @include bx(left, 2px, blue) } div { @include bx(bottom, 2px, gray) } div { @include bx(top, 2px, green) } css div { border-right: 2px solid red; } div { border-left: 2px solid bl..