IT 정보공간 - front-end & publisher

1. Star 핵 : IE6, IE7

일반적으로 *뒤에 스타일을 적어주면 IE6 과 7에서만 적용이 된다.

.selector {margin:100px; *margin:90px;}

2. _(언더바) 핵 : IE6

정말 사용할 일이 많은 언더바 핵, 크로스브라우징 작업을 하다보면 정말로 쓸일이 많은 아주아주 유용한 핵이다. 크로스브라우징 하려면 절대적으로 꼭 알아야 할 핵

.selector {margin:100px; _margin:90px;}

3. 응용편

위의 두가지를 이용하면 가각의 브라우져의 구미에 맞게 알맞은 핵을 적용할 수 있다.

우선 호환모드로 작동하지 않게 위의 meta값을 적용해주고

.selector {margin:100px; *margin:90px; _margin:110px;}

위와 같이 스타일시트를 작성하게 되면 IE8 등의 표준에 가까운 브라우져에서는 margin:100px; 이 적용되고 IE7 에서는 margin:90px; 이 적용되며, IE6에서는 margin:110px; 이 적용되게 된다.

핵은 왠만하면 사용하지 않는 것이 가장 좋지만, 어쩔 수 없는 상황에서 깨진 디자인으로 우리의 마음을 해치지 않기 위해서 적절하게 최소화하여 사용하는 것도 건강에는 이로울 것이다.

해상도 : 아래 기재

LG전자:옵티머스G : 1280x768 (WXGA)

옵티머스 뷰 : 1024x768 (XGA)

옵티머스 뷰2 : 1280x768 (XGA)

아이폰5 : 해상도:1136 x 640

갤럭시S3 , 갤럭시 노트 2 : 해상도: 1280 x 720

아이폰4 , 아이폰4S : 해상도: 960 x 640

갤럭시 노트1 , LG전자-옵티머스LTE : 1280 x 800

아이패드 iPad : 해상도: 1024 x 768

아이폰 3GS : 해상도: 480 x 320

해상도 : 800 x 480

삼성전자 - 갤럭시GIO, 갤럭시ACE, 갤럭시ACE PLUS
LG전자 - 옵티머스원, 옵티머스시크, 안드로원
KT테크 - 스마트볼
팬텍(스카이) - 미라크A
모토로라 - 모토믹스
HTC - 레전드

해상도 : 854 x 480

삼성전자

갤럭시NEO, 갤럭시S, 갤럭시S호핀, 갤럭시U, 갤 럭시K, 갤럭시A, 갤럭시S2, 갤럭시S2 LTE, 넥서스S

LG전자

옵티머스Q, 옵티머스Z, 옵티머스마하, 옵티머스블 랙, 옵티머스빅, 옵티머스2X, 옵티머스3D, 옵티머스EX, 옵티 머스Q2, 프라다폰3.0

KT테크

테이크, 테이크2, 테이크 타키
팬택(스카이) : 이자르, 미라크, 베가, 시리우스, 베가X, 베가X +, 베가S, 베가레이서, 베가넘버5

HTC

인크레더블S, 디자이어, 디자이어HD, 넥서스원, 센세이션XL**

델 : 델베뉴, 델스트릭

SK텔레시스 : 리액션, WYNN

아이리버 : 바닐라

해상도 : 960 x 540

모토로라 - 모토쿼티, 모토로이, 모토글램, 디파이

소니에릭슨 - X10, 아크, 레이

해상도 : 1024x600

KT테크 - 테이크 야누스
HTC - 이보4G+, 레이더4G, 센세이션
모토로라 - 레이저, 아트릭스

해상도 : 1280x720

삼성전자 - 갤럭시탭 7.0

기기 실측 사이즈

320 x 480 아이폰4

320 x 530 갤럭시s

400 x 683 갤럭시탭 7인치

800 x 1280 갤럭시10.1

768 x 1024 아이패드

code 태그 이쁘게 출력하기

1. SyntaxHighlighter
2. https://github.com/syntaxhighlighter/syntaxhighlighter/releases
   syntaxhighlighter 다운로드 한후에 아래처럼 적어준다.

간격이 이쁘지 않으면, line-height: 1.7em !important; em 단위를 올려준다.

XRegExp.js , shCore.js 기본으로 호출하고,
필요한 타입의 용도를 스크립트나 태그나 적용한다.
예시 : <script type="syntaxhighlighter" class="brush: js;">
테마는 shCoreEmacs.css css 별로 찾아서 적용한다.

    <script type="text/javascript" src="./syntaxhighlighter/js/XRegExp.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shCore.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushJScript.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushSass.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushCss.js"></script>
    <script type="text/javascript" src="./syntaxhighlighter/js/shBrushXml.js"></script>


    <link type="text/css" rel="stylesheet" href="./syntaxhighlighter/css/shCore.css"/>    
    <link type="text/css" rel="Stylesheet" href="./syntaxhighlighter/css/shCoreEmacs.css" />
    <script type="text/javascript">SyntaxHighlighter.all();</script>

gulp sass nodejs 최신버전 충돌이슈

아래 소스처럼 변경해주면 사용할 수 있다.

  [gulp-sass 4버전]

  ★package.json
  "devDependencies": {
    "gulp": "4.0.2",
    "gulp-sass": "4.0.2",
  },

  ★gulp.js
  const gulp = require("gulp");
  const sass = require("gulp-sass");


  [gulp-sass 5버전]

  ★package.json
  "scripts": {
    "start": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "sass": "^1.50.1"
  },
  "main": "gulpfile.js",
  "author": "",
  "license": "ISC",
  "description": ""

  ★gulp.js
  const gulp = require("gulp");
  const sass = require('gulp-sass')(require('sass'));

nodejs 가 업데이트되면

npm install browser-sync@latest --save-dev 등등 최신 버전으로 모듈을 설치해주는것이 좋다

mixin 으로 체크박스를 화살표를 구현해 보았는데요,
인자값으로 아래 방식처럼 선언해주되,
필수로 받아야하는 값은 값을 비워놓앗어요~
width랑 height 를 입력해서 체크박스를 인터랙션을 구현시켜요

@mixin CkBoxArr1($width,$height,$time:.5s,$state:"start",$type:null) {
  @if($state=="start") {
    animation: CkBoxArr#{$type}_#{$state} $time 0s linear 1 backwards;
  }@else{
    animation: CkBoxArr#{$type}_#{$state} $time 0s linear 1 forwards;
  }
  @keyframes CkBoxArr#{$type}_#{$state}{
    0%{
      width: 0;
      height: 0;
    }
    30%{
      width: 0;
      height: $height;
    }
    100%{
      width: $width;
      height: $height;
    }
  }
}

// 사이즈 조정 및 시작과 끝을 정할수 있다.

@include CkBoxArr1(.08rem,.04rem,.5s,"end");
@include CkBoxArr1(.08rem,.04rem,.5s,"start");

다크모드시 body 에 ID값이나 class 값으로 컨트롤할때

@mixin color_wts($property,$color){
    #{$property}: func_colo_wts($color);
    @at-root body.mint &{
        #{$property}: func_colo_wts($color, mint);
    }
    @at-root body.classic &{
        #{$property}: func_colo_wts($color, classic);
    }
    @at-root body.dark &{
        #{$property}: func_colo_wts($color, dark);
    }
}


@mixin color_wts($property,$color){
    #{$property}: func_colo_wts($color);
    @at-root #{selector-nest("body.mint#{&}")}{
        #{$property}: func_colo_wts($color, mint);
    }
    @at-root #{selector-nest("body.classic#{&}")}{
        #{$property}: func_colo_wts($color, classic);
    }
    @at-root #{selector-nest("body.dark#{&}")}{
        #{$property}: func_colo_wts($color, dark);
    }
}

여기서 포인트는 참조자(&) 을 해당 모드뒤에 써주어서 컨트롤을 다르게 해주면 되요

filter:blur(30px) 으로 써주면 블러효과가 생성된다.

vue3 vite css sourcemap 설정

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd());

    return {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
            },
        },
        css: {
            devSourcemap: true,
        },
        plugins: [vue()],
    };
});

중첩 속에 있는 css를 중첩 밖으로 적용 한다. 어떠한 경우에도 최상단으로 뺀다.

at-root 중첩속에서 또 다시 선언해주면 중첩 밖으로 빠진다.

.at_root_test{
    .cont{
       text-align:center; font-size:12px;
       .lst{
          overflow:hidden;
          li{float:left;}

          @at-root .parent{
            border:1px solid #333; padding:10px;
            .sideBar{
                color: red;
                @at-root body{
                    background: black;
                }
            }
        }
       }
    }
 }

CSS 빌드 후

.at_root_test .cont {text-align: center; font-size: 12px;}
.at_root_test .cont .lst { overflow: hidden;}
.at_root_test .cont .lst li {float: left;}
.parent { border: 1px solid #333; padding: 10px;}
.parent .sideBar { color: red;}
body { background: black;}

이렇게 적용되요

scss 구현 부분

$colors:(
  standard: (
    primary-color-blue: #2aace2,
    mid-blue-color:#2695d2,
    dark-blue-color:#124b62
  ),
  contrasted: (
    primary-color-blue: #177eab,
    mid-blue-color:#1c6f9b,
    dark-blue-color:#124b62
  )
);


@function get-color($key, $type: 'standard'){
  @each $name, $color in map-get($colors, $type){
    @if($key == $name){
      @return $color
    }
  }
}

@mixin get-color($property,$color){
  #{$property}: get-color($color);
  @at-root body.contrasted & {
    #{$property}: get-color($color, contrasted);
  }
}
.className{
  @include get-color(background-color, primary-color-blue)
}

css 빌드후

.className {
  background-color: #2aace2;
}
body.contrasted .className {
  background-color: #177eab;
}

이렇게 출력되요