RAMY, LEE - 은은한 조약돌이 되기 위한 정진의 길.

[WEB] 웹 브라우저 좌측 하단 URL 상태바 없애기.(a 태그 href 주소 상태 팝업)

RAMY,LEE — Tue, 7 Dec 2021 01:10:24 +0900

안녕하세요~! 레미 입니다.

A link로 마크업된 항목들에 마우스 over하면, 브라우저 창 좌측 하단에

링크 연결된 url의 주소가 뜨는 걸 볼 수 있는데요.

프로젝트에 따라 해당 상태바를 안보이게 처리 해달라는 경우가 있었습니다.

01웹 브라우저 좌측 하단 URL 상태바 없애기

위 예시 이미지를 보시면 좌측 하단에 Url이 뜨는게 보이시죠?

저 부분을 간단한 제이쿼리를 사용하면 안보이게 뚝딱 처리할 수 있답니다.

Code

$("body").on('mouseover', 'a', function (e) {

var $link = $(this),

href = $link.attr('href') || $link.data("href");

$link.off('click.chrome');

$link.on('click.chrome', function () {

window.location.href = href;

}).attr('data-href', href) //href에 지정된 링크 연결을 유지 시킵니다.

.css({ cursor: 'pointer' })

.removeAttr('href'); // 이 부분이 브라우저에서 뜨는 Url 상태바를 안보이게 처리합니다.

});

하지만, 위 코드를 사용할 때 주의해야할 점이 있습니다.

모든 a 태그 대상으로 이벤트를 생성하기 때문에

특정 이벤트가 걸려있거나, Url 상태바를 표시 해야하는 a 링크엔 부가적인 조치가 필요합니다.

$("body").on('mouseover', 'a', function (e) {});

에서 'a' 셀렉터 부분을 'a:not(.enable-url)', 'a.enable-url' 등과 같이 특정 a 태그를 제외하고 선택해주시면 됩니다.

Info

위 코드는 2021.12.09 기준 Chrome, Edge, IE11+, Opera 최신 버전 브라우저에서 동작합니다.

출처

https://stackoverflow.com/questions/23800165/remove-move-the-google-chrome-bottom-left-status-bar-link-address-bar/28206011#28206011

[Gulp] 걸프를 활용하여 프론트엔드 개발 환경 조성하기 #2 (feat. 리액트)

RAMY,LEE — Sun, 18 Apr 2021 15:14:13 +0900

05Test file 생성

- src 폴더 하위에 폴더 구성을 지난번에 잘 마치셨죠~? 이번엔, 그 하위에 실제로 사용할 파일을 생성할 차례입니다.

니꼬쌤의 안내에 따라 위와 같이 만들었습니다. 파일에 대한 상세 설명은 아래를 참고해주세요!

그러나, 절대적인 것은 아니니, 다르게 바꾸셔도 괜찮습니다.

1. src\ index.pug //서버에 뜰 프레임 페이지이며 build 후 html 파일됩니다.

2. img\ 이미지 파일

3. js\ main.js , util.js

4. partials\ footer.pug // 모듈화 시킨 footer pug 파일.

5. scss\ _reset.scss, _variables.scss, style.scss // 기본 reset css, 반복적으로 사용되는 variables css, 주요 스타일이 들어갈 style css

6. templates\ layout.pug // 레이아웃 페이지

이렇게 구성하신 파일들은 앞으로 gulp를 통해 컴파일 또는 트랜스파일링 되어서 build 폴더에 생성될거에요.

06테스트 파일에 가짜 내용 작성하기.

- 생성하신 파일에 테스트를 위한 내용을 채워 넣을 단계입니다! 아래 내용들은 테스트를 위해 작성하는 내용으로 큰 의미 없는 내용들입니다!

1. util.js 파일

- 아래와 같이 입력해주세요. 저희는 최신 모던 자바스크립트인 ES6를 사용해서 작성할거에요.

즉, 해당 코드는 IE나 구형 브라우저에서 바로 이해할 수 없기 때문에, BABEL이라는 컴파일러를 사용해 변환 시켜줄 예정입니다.

export const random = max => Math.floor(Math.random() * max);

2. main.js 파일

import { random } from "./util";

const rOne = random(10);
const rTwo = random(20);

console.log(`${rOne} ${rTwo}`);

3. layout.pug

- Pug 파일은 HTML의 아쉬운 점을 보완하여 사용할 수 있는 템플릿 엔진입니다.

Info

Pug 란?

Pug는 Node.js의 템플릿 엔진으로서, HTML code를 최소화 시키도록 도와주고, 반복되는 부분을 분리하여 사용할 수 있게 해줍니다. 자바스크립트를 사용할 수 있기 때문에 변수에 따라 출력을 달리하게 할 수도 있습니다. 즉, HTML에서 할 수 없는 것들을 지원함으로써 서버에서 받아온 데이터를 더 효과적으로 보여여줄 수 있습니다.

pugjs.org/api/getting-started.html

Getting Started – Pug

Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an

pugjs.org

Pug를 사용해서 페이지 레이아웃 파일을 작성합니다. HTML 작성법과 매우 유사합니다.

<!doctype html>
html(lang="ko")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        link(rel="stylesheet", href="css/style.css")
        title Gulp Test
    body 

        block content 

        include ../partials/footer

        script(src="js/main.js")

4. index.pug

- 최종 index.html 파일이 될 index.pug를 작성합니다.

extends templates/layout

block content 
    img(src="img/gulp.svg")
    h1 Awesome Minimalism ♥♥

5. footer.pug

- 매 페이지 반복되는 부분인 footer를 작성합니다.

footer#footer
   span I'm footer!!

6. _reset.scss

- 초기화 css를 scss로 작성합니다. 파일명 제일 앞에 붙은 언더스코어(_)는 모듈화된 reset을 최종 scss 파일에서 import하여 사용할 수 있게합니다.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

7. _variables.scss

- 변수에 저장하거나, 함수형태로 만든 반복적으로 사용되는 스타일을 여기에 작성합니다.

$red: #eb4a4b;

8. style.scss

- 최종 스타일을 지정할 파일입니다. 여기에 reset, variables를 import하여 작성합니다.

@import "_reset";
@import "_variables";

body {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding:30px 0;
    background-color: $red;
}
body * {
    color:#fff;
    font-size: 20px;
}
body > img  {
    display: inline-block;
    margin-bottom:50px;
}

07gulp 명령어 지정하기.

- 지난 1편에서 gulp와 gulp-cli를 설치하셨지요? 이제 그걸 사용하기 위해 package.json에 명령어를 2가지 지정해줍니다. dev는 작업 시 사용되고, build는 build 작업 진행 시 사용합니다.

위 명령어를 사용하는 방법은 3가지 정도가 있습니다. 저는 yarn을 사용합니다.

1. npm으로 "npm run-script 지정명령어" 를 사용한다.

2. yarn의 경우 "yarn 지정명령어"로 사용한다.

3. gulp 직접 실행한다. "gulp 지정명령어"

08gulp file 셋팅 및 babel 설치

- 설치한 걸프를 사용하기 위해선 gulpfile.js에 gulp 패키지를 불러와야합니다. 우선,

gulpfile.js 파일을 package.json 파일과 동일 레벨에 생성합니다. 그 후, 해당 파일에 걸프를 불러올건데요,

"const gulp = require("gulp");" 이렇게 사용하면 걸프를 사용할 수 있지만, 최신 모던 자바스크립트 형태가 아니기에

저희는 babel을 설치하여 최신 형태로 불러 오도록 하겠습니다.

1. 파일명을 "gulpfile.babel.js"로 변경해주세요. 그 후, 해당 파일에 아래와 같은 코드를 입력해줍니다.

import gulp from "gulp";

2. ".babelrc" 라는 이름으로 package.json과 동일 레벨에 파일을 생성합니다. 파일 내부엔

아래와 같은 코드를 입력해줍니다. 바벨을 사용하기 위해 앞으로 설치할 프리셋을 지정해주는 작업입니다.

{
	"presets": ["@babel/preset-env"]
}

3. babel을 yarn으로 설치합니다.

- 여러개를 묶어서 설치하면 편리하나, babel에선 잘되지 않아서 저는 각각 개별적으로 설치를 진행했습니다.

babel 앞에 오는 @는 최신 버전의 babel을 뜻합니다. 아래 3개 모두 개발 과정에서만 필요하기 때문에 "--dev" 플래그를 붙여 devDependency에 설치합니다.

//각각 설치할 때 
yarn add --dev @babel/core
yarn add --dev @babel/register
yarn add --dev @babel/preset-env

2차 세팅을 이렇게 마무리 짓고, 다음 포스팅에서 만나뵙도록 하겠습니다.

[Gulp] 걸프를 활용하여 프론트엔드 개발 환경 조성하기 #1

RAMY,LEE — Tue, 30 Mar 2021 00:12:48 +0900

안녕하세요. 레미입니다 ‍

이번엔 걸프를 활용한 개발 환경 조성 방법 시리즈를 올리려고합니다.

노마드 코더의 강의를 정리한 내용이에요.

Info

Gulp ?

Node.js와 npm 기반의 태스크 러너이며, 소형화, 연결(concatenation), 캐시 버스팅(cache busting), 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화하기 위해 사용된다.

프론트 작업을 몇가지만 꼽아보자면,

1. 브라우저 별 css prefixer 붙이기

2. sass 컴파일링

3. 이미지 압축

4. js 트랜스파일링(es6 to es5)

5. css, js 압축(경량화)

6. 웹서버 띄우기

7. 유닛 테스트

등등이 있습니다. 걸프를 사용한다면 위 작업들을 자동화 시켜 한번에 처리가 가능합니다.

노마드의 니꼬쌤이 강의를 진행하시며 어메이징 ~ 뷰티풀 ~ 감탄사를 몇 번씩 표현하곤 하셨는데요.

세팅을 마치고 나니 저도 니꼬쌤과 같은 마음이 되었습니다.

걸프는 정말 어메이징 합니다! 차근차근 진행할테니 따라와주세요.

01초기 설치 (window 기준)

- gulp를 사용하려면 패키지 매니저 설치가 필수입니다! 걸프, 그리고 그와 관련된 패키지들을 설치하고 관리해야하기 때문입니다. (니꼬쌤 강의에선 npm으로 시작하나, 강의 도중 yarn으로 변경이 됩니다. 둘 중 편한걸 사용하시면 되지만,

저는 강의를 편하게 따라하기 위해 yarn으로 사용했습니다.)

01Package Manager 설치

- npm 설치 :

npm은 node.js 의 기본 패키지 매니저입니다. node.js를 설치하시면 기본적으로 npm 명령어를 사용 가능합니다.

아래의 사이트에서 LTS버전의 node.js를 내 컴퓨터에 맞는 버전으로 다운 받은 후 설치합니다. (저는 Windows Installer의 64bit를 받았습니다.)

nodejs.org/ko/download/

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

설치가 제대로 되었는 지 확인 하는 방법은 명령프롬프트(cmd) 창을 켜서 "node -v"를 입력하시면 버전 정보를 볼 수 있습니다.

아래 이미지를 참고해주세요.

- yarn 설치 :

yarn의 설치 방법은 3~4개 정도 있으나 여기선 npm으로 설치하는 방법을 안내해드리겠습니다.

vs code와 같은 에디터의 터미널이나 명령 프롬프트에서 설치하셔도 무방합니다.

저는 걸프 환경을 만들기 위한 폴더를 생성했기 때문에 vs code의 터미널에서 설치를 진행했습니다.

아래 명령어를 입력해주세요. (여기서 -g는 -global로 전역설치를 의미합니다. npm, yarn의 경우 모든 프로젝트에서 두루 사용되기 때문에 전역적으로 설치해줍니다.)

npm install -g yarn

yarn 설치 확인도 npm과 동일합니다. 터미널창에 "yarn -v"을 입력한 뒤 버전 정보가 나온다면 정상적으로 설치되었습니다.

02프로젝트 폴더 생성

- 프로젝트 폴더를 생성합니다. 저도 gulp 환경 전용 테스트 폴더를 아래와 같이 구성하였습니다.

블러 처리된 것들은 추후 설명되어질 파일 또는 폴더입니다.

큰 가지로 살펴보자면, "GULPTEST" 라는 프로젝트 폴더 아래 src, build 폴더가 존재합니다.

사진에선 src 폴더만 보이는데요. build는 모든 세팅을 마친 후 빌드 자동화를 거쳐서 생성될 것입니다.

아래와 같이 구성해주시면 됩니다.

03gulp package 설치

- 본격적으로 걸프를 사용하기 위해 패키지를 설치합니다. 패키지를 설치하면 콘솔에서 걸프를 호출할 수 있게 도와줍니다. gulp를 사용하기 위해선 gulp-cli가 꼭 필요합니다. gulp-cli와 gulp 동시에 설치도 아래와 같이 가능합니다.

yarn에선 다중 패키지 설치시 패키지명 사이에 스페이스바로 공백만 입력해주시면 됩니다.

"--dev" 플래그는 devDependency로만 설치한다는 의미입니다. 이걸 사용한 이유는

gulp는 애플리케이션 개발 과정까지만 필요하기 때문입니다.

yarn add --dev gulp-cli gulp

yarn으로 gulp-cli, gulp를 정상적으로 설치완료 하시면 "node_modules" 폴더, "package.json", "yarn.lock" 파일이 자동으로 생성됩니다. 사진 우측을 보시면, devDependency 안에 설치된게 보이실거에요.

04yarn init -> package.json 파일 생성하기

- package를 관리해 줄 package.json 파일을 생성합니다. 이 파일은 yarn init을 진행하면 자동으로 생성됩니다.

하지만, 저희는 위 순서에서 gulp를 설치하며 이미 생성이 되었죠? 순서를 바꿔서 init을 먼저 진행하셔도 됩니다.

gulp 설치 후 init을 진행하면 package.json파일에 프로젝트 정보를 입력하는 작업을 하게됩니다.

터미널 창에 아래와같이 입력해주세요.

yarn init

위 명령어를 입력하면 기본적인 정보를 입력하라는 메세지가 아래와 같이 나옵니다.

question name (gulptest): my project name
question version (1.0.0): my project version
question description: my project description
question entry point (index.js):
question git repository: 
question author: author name 
question license (MIT):
question private:

저희는 테스트용이니 간단하게 프로젝트 이름과 설명만 입력하고, 그 외의 것들은 엔터를 치고 넘어 가셔도됩니다.

여기까지 1차 세팅을 마무리 짓고, 다음 포스팅에서 만나뵙도록 하겠습니다.

[IOS] 아이폰 X(10) 노치(Notch) 화면 어플 safearea 이슈 해결하기

RAMY,LEE — Tue, 23 Mar 2021 00:24:59 +0900

ios app 정상 화면

안녕하세요! 레미입니다.

4년전 작업했던 앱에서 본문을 스크롤링하면 상태바와 홈버튼 영역에 컨텐츠가

그대로 노출되는 이슈가 발생하였습니다. 홈버튼 영역의 경우 스크롤링을 하지 않아도 화면 로드시 컨텐츠가 노출이

되어 하단 버튼이 붕 - 떠보이는 현상이 있었습니다.

해당 앱은 특정 서비스가 메뉴로서 들어간 화면이었습니다. 그래서 다른 메뉴의 화면은 정상적으로 표현되나,

저희 화면만 문제가 있어서 해결하는데 좀 더 집중한 작업입니다.

그래서 기록차 글로 남겨봅니다.

&nbsp;ios app 문제화면

1차 테스트

01정상적으로 표현되는 다른 화면과의 차이점 찾기

- safe area 이슈를 구글링하면, meta viewport 태그에 "viewport-fit:cover" 속성을 추가하라는 글을 찾을 수 있습니다. head 태그도 따로 관리가 되고 있었기 때문에 먼저 확인해 보았습니다. 허나, 다른 화면은 위 속성이 없었습니다.

- css의 차이점을 찾아보았습니다. 헤더 영역 고정 형태가 달랐습니다.

저희 헤더는 비고정이었고, 다른 화면은 고정이었습니다. 이 부분은 고정해달라는 요청도 함께 받은 상태였습니다.

02차이점 맞추기 및 테스트

- 헤더 영역을 고정 형태로 바꾸었고, "viewport-fit:cover" 속성을 추가한 뒤 관련 css 속성을 추가 해보았습니다.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

// iOS 11.0 버전
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
// iOS 11.2 이상
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

/* 위 속성만 넣어도 기본 padding 값이 있어서 늘어납니다. 값을 더 추가하면 기본값 + 더한값 표현 됩니다.*/

.header {
	padding: 0 0 calc(constant(safe-area-inset-top) + 5px);
    padding: 0 0 calc(env(safe-area-inset-top) + 5px);
}
.footer {
    padding: 0 0 calc(constant(safe-area-inset-bottom));
    padding: 0 0 calc(env(safe-area-inset-bottom));
}

&nbsp;ios app 위아래 확장 화면&nbsp;

해결은 되었으나, 저희가 원하는 방향이 아니였습니다.

위 방법으로는 헤더, 푸터 영역이 그대로 확장되는 방식이었습니다.

위 방법에서 조금 더 나아가서 생각한 방법도 시도 해보았습니다.

확장되는 형태라면 header에 검정색 배경을 깔고, header inner 태그에 header 스타일을 넣는건데요.

이것도 실패였습니다. 흡.

첫 화면 로드했을때는 성공한 듯 했지만, 스크롤링하니 여전히 컨텐츠가 노출되더라구요..

확장되는 형태의 앱들도 요즘 많이 보입니다. 하지만, 다른 화면과 일관성있는 view를 제공해야하기 때문에

다른 방법을 찾아야만 했습니다.

해당건을 요청한 개발자분들이 프로젝트지에 계셨고, 테스트 폰도 없는 상태셨기 때문에.

직접 프로젝트지에 테스트폰을 가지고 방문했습니다.

2차 test(방문) -> 이슈 해결

- 서로 떨어져 있는 상태에서 커뮤니케이션 하는것은 매번 해도 어려운 것 같습니다. 열심히 노력해도 서로 전달하고싶은 바를 100% 충족한다는건 쉽지 않더라구요. 그래서 테스트폰을 가지고 지원을 갔습니다.

1차에서 했던 test를 전부 다시 해보기로 했습니다.

01정상적으로 표현되는 다른 화면과의 차이점 찾기

- css의 차이점을 찾아보았습니다. 여기서 큰 차이점을 발견했습니다!! 아래 표를 보시죠.

	같은점	차이점
저희 화면	헤더 고정	- 컨테이너 영역 높이 100% - 헤더 높이 만큼 padding-top으로 밀기
다른 화면	헤더 고정	- 컨테이너 영역 높이 100% - 컨테이너 자제를 position:absolute한 뒤, 헤더 높이 만큼 top값을 부여

저희는 헤더를 고정한 뒤, 컨테이너 영역을 padding-top으로 헤더 영역에서 밀어냈고,

다른 화면은 position을 이용해서 밀어냈습니다. 아예 시작점을 밀어낸 것이죠.
margin-top 값으로 처리해도 가능합니다.

padding으로 밀게 되면 밀리긴 하나, 기본적으로는 컨테이너가 늘어나는 것이기에 height:100% + padding-top 값으로 인해 100% 이상이 되어서 상태바와 홈버튼 영역까지 확장된 것이 아닐까 생각해봅니다.

02차이점 맞추기 및 테스트

- 위에서 찾은 방법대로 컨테이너 영역에 아래와 같은 값을 부여 하였습니다.

.container {
	position:absolute;
    top:50px;/* 헤더 높이 값을 넣어주세요. */
    left:0;
    right:0;
    bottom:0;
    height:100%;
}

홈버튼 영역의 경우 bottom:0; 으로 지정하면 됩니다. 여기서 조금 더 신경써야 하는 부분은 footer 영역이 비고정일 경우는 상관 없지만, 고정일 경우 컨테이너 하단 항목 일부가 잘려보일 수 있습니다.

그래서 컨테이너 하단에 padding-bottom값을 적당히 넣어서 밀어주어야 잘 표현될거에요.

Info

한 앱에 footer 항목 고정/비고정이 동시에 존재할 경우엔 최상위 부모 태그에 화면별 클래스를 부여하여 padding-bottom 값을 조정해주면 됩니다.

*** 결론적으로 저는 스타일 조정으로 위 상황을 해결 했지만, 앱 개발 프레임워크(저희는 모피어스를 사용했습니다.)

최신 업데이트 버전에선 padding, margin, position 무엇을 넣든 상관없이 safearea 관련 함수를 사용해서 컨트롤하면 쉽게 해결됩니다. 위 이슈는 업데이트를 받지 못한 구 버전 프레임워크를 사용하여 생긴 문제였습니다.
본사의 다른 앱을 통해 테스트해본 후에 알게되었어요.

인터넷이 불가한 프로젝트지에서 바로 최신 버전으로 업데이트하는 것은 어렵기 때문에 추후 가능한 방법을 찾아봐야겠습니다.

결론적으로 보면 간단한 문제였지만, 해결하는 과정에서 얻게된 ios safe area에 대한 지식과 개발자분과의 소통 경험만으로도 의미있는 작업이었다고 생각합니다.

* Jae-seong, Jeong 님의 아이폰 목업 (https://dribbble.com/shots/3803481--FREE-iPhone-X-Mockup) 을 사용하여 본문의 예시 이미지를 만들었습니다.

[Fullcalendar]풀캘린더 플러그인에서 툴팁 사용하기.(버전 4, 5 두 가지)

RAMY,LEE — Sat, 13 Feb 2021 02:53:03 +0900

fullcalendar with tooltip - v5

안녕하세요! 헤이즈입니다.

회사에서 최근까지 사용하던 버전은 v4였습니다.

해당 버전에서 툴팁이 필요하여 해당 홈페이지의 Docs를 참고 하였는데요.

최신 버전인 v5도 작년에 정식 출시가 되었더라구요.

대부분은 최신 버전을 사용하시겠지만,

간혹 저희 회사 처럼 사용빈도가 낮아 구버전을 쓰고 계신분들이 있을 수도 있다는 생각에

v4, v5 두가지 툴팁 설정 방법을 기록용으로 포스팅합니다.

v4(구버전)에서 툴팁 사용하기

01기본설정

- v4에서는 npm/yarn, download, cdn 3가지 설치 방법을 제공합니다. 설치는 이미 마치셨다는 가정하에 시작하겠습니다. 설치 다음 단계는 초기화입니다. 풀캘린더에서 안내하는 기본 초기화 코드는 아래와 같습니다.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

    <script src='fullcalendar/core/main.js'></script>
    <script src='fullcalendar/daygrid/main.js'></script>

    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
      });

    </script>
  </head>
  <body>

    <div id='calendar'></div>

  </body>
</html>

Info

풀캘린더는 기능을 플러그인 단위로 나누어 제공합니다. 필요한 기능만 골라서 사용한다는 장점이 있으나, 해당 기능 css/js도 나뉘어 있어 3개의 기능이 필요하면, 각각의 파일을 불러와야합니다. 그리고, 스크립트 내에서 플러그인에 아무것도 호출하지 않으면, 기능하지 않습니다. dayGrid/timeGrid 등을 지정해야합니다.

02툴팁 옵션 추가

- 툴팁 옵션을 추가하기 이전, 툴팁 구현을 위해 필요한 js 파일이 있습니다. "Popper.js", "Tootip.js" 입니다. 이 파일은다른 플러그인 소스입니다. v4 Docs에선 파일을 제공하는 대신, 해당 플러그인 사이트 링크로 안내 합니다.

허나, 연결된 페이지 내용은 이미 사라져 빈 페이지가 나옵니다.

현재 1.x 버전은 홈페이지 내에선 npm으로 받는 방법만 안내되고 있습니다. cdn이나 파일로 다운받아 사용하시길

원하신다면, 풀캘린더 tooltip 데모 페이지에서 개발자 도구로 head에 추가된 cdn을 복사하거나 cdn을 새 페이지로 열어 소스를 긁어서 사용할 수는 있습니다만, 후자의 방법으로 하기 보다는, npm을 통해 받거나 또는 최신 버전을 사용하시길 추천합니다.

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
<script>

     //fullcalendar
	 document.addEventListener('DOMContentLoaded', function() {
     var calendarEl = document.getElementById('calendar');

     var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid',  'resourceTimeline' ],
      locale: 'ko',
      header: {
          left: '',
          center: 'title',
          right: ''
        },
      height: 650,
      defaultDate: '2020-05-12',
      editable: true,
      eventLimit: true, // allow "more" link when too many events

      
      events: [
        {
          title: '[영업부] 2020년 하반기 영업실적',
          description: '2020년 하반기 영업실적 안내입니다.',
          start: '2020-05-01T14:00:00',
        },
        
        //tooltip
      	eventRender: function(info) {
          var tooltip = new Tooltip(info.el, {
			title: info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로 가져옵니다. 
            // title: info.event.title, 이벤트 타이틀을 툴팁으로 가져옵니다. 
            placement: 'top',
            trigger: 'hover',
            container: 'body'
          });
        }
   
        });

    calendar.render();
  });
</script>

Info

v4 버전의 툴팁 스타일은 따로 CSS 파일이 없습니다. 그래서 fullcalendar 측에서 예제를 작성하며 추가한 스타일을 아래에 추가하였습니다. 아래 스타일을 변형해서 사용하세요.

  /*
  i wish this required CSS was better documented :(
  https://github.com/FezVrasta/popper.js/issues/674
  derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
  */

  .popper,
  .tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
  }
  .style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
  }

  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: #FFC107;
  }
  .style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: 5px;
  }
  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }
  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }

- 여기까지 따라 오셨다면 v4 버전에서 툴팁을 잘 띄우셨으리라 생각합니다. 고생하셨습니다.

v4 fullcalendar demo site

fullcalendar.io/docs/v4/event-tooltip-demo

Event tooltip with eventRender - Demos | FullCalendar

Edit in CodePen Event tooltip with eventRender and Tooltip.js

fullcalendar.io

v5(최신버전)에서 툴팁 사용하기.

01기본설정

- v5에서도 npm/yarn, download, cdn 3가지 설치 방법을 제공합니다. 설치는 이미 마치셨다는 가정하에 시작하겠습니다. 설치 다음 단계는 초기화입니다. 풀캘린더에서 안내하는 기본 초기화 코드는 아래와 같습니다.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

Info

v5에서도 기능을 플러그인 단위로 제공하지만, css/js 파일을 일일히 로드할 필요가 없습니다. main.css/.js에 모든 패키지를 포함합니다. 스크립트 내에서 플러그인을 선언하지 않으면, 기본적으로 "dayGridMonth" 로 표현됩니다.

02툴팁설정

- v5에서도 툴팁을 구현하기 위해 2가지 파일이 필요합니다. v5에선 Docs에 툴팁에 관한 안내가 제대로 없어서 좀 헤맸습니다. 2.x 대 버전의 "popper.js"와 "tooltip.js" 새 버전(?)인 "tippy.js" 두개의 파일이 필요합니다.

풀캘린더 내에서 지정하는 방법은 아래 코드를 참고해주세요.

<script src="js/main.js"></script>
<script src="js/locales-all.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>

    //fullcalendar
	 document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        initialDate: '2021-02-12',
        locale: 'ko',
        headerToolbar: {
            left: '',
            center: 'title',
            right: 'prev,next today'
        },
        height: 650,
        editable: true,
        dayMaxEventRows:true,

        eventDidMount: function(info) {
            tippy(info.el, {
                content:  info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로 가져옵니다. 
            });
        },

        events: [
            {
            title: '[영업부] 2020년 하반기 영업실적',
            description: '2020년 하반기 영업실적 안내입니다.',
            start: '2021-02-01',
            },
        ],
    
        });

    calendar.render();
  });
</script>

Info

v5에선 함수명들이 많이 바뀌었습니다. 이점 주의하여 사용하는 버전의 맞는 함수명을 사용해주시기 바랍니다.

tippy.js를 사용하면 기본 툴팁 스타일이 지정되어 있어 v4에서 처럼 기본 스타일을 지정할 필요는 없습니다.

- 풀캘린더는 이슈사항에 대한 피드백이 빠르고, 버전 업그레이드도 활발한편인 것 같습니다. 사용하시면서 생기는 이슈사항은 fullcalendar 깃허브를 참조하시면 좋을 것 같아 아래 링크 올려드립니다.

github.com/fullcalendar/fullcalendar/issues

fullcalendar/fullcalendar

Full-sized drag & drop event calendar. Contribute to fullcalendar/fullcalendar development by creating an account on GitHub.

github.com

* v5 툴팁 데모 페이지는 존재하나, "popper.js", "tippy.js" 파일이 아닌 구버전 파일을 사용한 예제라서 링크는 생략하겠습니다.

[Text highlight] ::selection pseudo selector 를 사용하여 텍스트 파란색 하이라이트 색 변경 또는 제거하기.

RAMY,LEE — Sun, 24 Jan 2021 23:03:22 +0900

안녕하세요~ 레미입니다.

오늘은 매우 간단한 css 팁을 데려왔어요.

웹사이트에서 기사와 같은 텍스트를 드래깅하면 아래 이미지와 같은 파란색의 배경 + 흰색 글자 색상을 볼 수 있습니다.

브라우저에서 기본적으로 제공되는 스타일이에요.

그 색상을 "::selection" 이라는 선택자로 손쉽게 변경할 수 있는데요.

배경, 글자색 뿐만아니라 더 다양한 항목의 색상과 모양을 바꿀 수 있다는 점이 재밌어요.

저도 이 글을 포스팅 하기 위해 찾아보며 더 자세히 알게 되었습니다.

"::selection" 소개

- 글자를 마우스로 선택하거나 드래깅했을 때 특정 태그에 스타일을 적용할 수 있는 가상 선택자입니다.

사용 방법

- css에 아래 예시와 같이 설정할 수 있습니다. "::selection"만 사용 시 모든 태그에 적용되며, 특정 태그에 지정하여 사용도 가능합니다. 모든 태그는 input 요소 내부의 텍스트도 포함이 됩니다.(select는 제외)

/* Make selected text gold on a red background */
::-moz-selection {/* Legacy Firefox syntax (version 61 and below) */
  color: gold;
  background-color: red;
}
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

::selection 선택자로 사용할 수 있는 css 속성.

1. color : 글자 색상
- 단독 적용 시, 글자 색상만 변경되고 기본 파란색 배경은 사라집니다.

2. background-color : 배경 색상

- 단독 적용 시, 배경 색상만 변경되고 글자 색상은 검정색으로 표현됩니다.

3. cursor : 커서 모양

- 커서 모양도 변경할 수 있다고 나오지만, "::selection"에 지정 시 나오지 않았습니다. 태그 자체에 지정하면 문제 없이 표현됩니다.

4. caret-color : 텍스트 필드에서 깜빡이는 입력 커서 색상

- 텍스트 입력폼의 깜빡이는 커서 색상을 변경할 수 있다고 하지만, "::selection"에 지정 시 나오지 않았습니다.

input, textarea등의 태그에 직접 적용해야만 커서 색상을 변경할 수 있습니다.

5. outline : 엘레먼트의 아웃라인 색상 및 모양

- "::selection"에 지정 시 나오지 않았습니다.

6. text-decoration : 텍스트 장식 설정

- "::selection"에 지정 시 나오지 않았습니다.

7. text-emphasis-color : 텍스트 강조 마크 색상

- "::selection"에 지정 시 나오지 않았습니다.

8. text-shadow : 텍스트 그림자 설정

- 단독으로 지정해도 나오고 color, background-color와 함께 지정해도 표현됩니다.

브라우저 지원 범위

- 최신 브라우저에선 대부분 지원되며, 파이어폭스 61이하 버전에선 "-moz-" 벤더 프리픽스가 필요합니다.

IOS 운영체제에선 safari, chrome 브라우저 모두 지원하지 않습니다.

captured image from caniuse

[Highcharts] 하이차트 그래프 기본 옵션으로디자인 예쁘게 변경하기 - (6~7 종류 차트 + 자주사용하는 옵션)

RAMY,LEE — Sun, 17 Jan 2021 20:49:31 +0900

데이터 시각화를 위한 차트 플러그인 중 가장 오래, 많이 사용 해왔던 차트가 highcharts 입니다.

저희 회사에선 2년전까지만 해도 개발자들이 직접 구현을 하였고, 저는 폰트, 색상 등 디자인과 최대한 비슷하게

구현하도록 가이드만 따로 전달하곤 했어요.

디자인과 얼~추 비슷한 모양새만 한 차트를 보며 이건 안되겠다 싶어 직접 만지작 거렸고,

이제는 디자인을 반영한 차트를 직접 그려서 작업 전달을 하고 있습니다.

원하는 방향을 적용하기 위해 api docs와 구글링을 하며 알게된 것들을 나누고,

복기할 요량으로 포스팅 합니다.

자주 사용하는 기본 옵션/세로 스택 컬럼 차트 옵션

stacked column chart

function columStackedBar() {
	//차트 색상 지정
	Highcharts.setOptions({
		colors: ['#a562d4', '#b1b6c1', '#7d8598']
	});
            
	// Set up the chart
	var chart = new Highcharts.Chart({
		chart: {
			renderTo: 'columStackedBar',//차트가 그려질 태그의 ID 지정
			type: 'column',//차트 타입 지정
			margin: [0, 10, 90, 5],//차트 외곽 마진 설정 - 상, 우, 하, 좌
			style: {//차트 전체 스타일 지정
				color: '#444',
			    fontFamily: 'notoSans',
				fontWeight:'400'
			},
			backgroundColor:'rgba(255, 255, 255, 0)'//차트 배경 투명 지정(기본이 흰색으로 되어 있음)
		},
		credits: {enabled: false},//highchart 워터마크 숨김처리
		title:{//차트 타이틀. 미지정시 ''으로 남겨두면 됨
			text: ''
		},
		legend: {//범례
			floating: true,//범례를 차트 영역 위로 띄울 시 true 지정.
			align: 'right',//수평 정렬 지정
              verticalAlign: 'top',//수직 정렬 지정.
              symbolRadius:0,//범례 심볼 radius 지정
              symbolWidth:10,
              symbolHeight:10,
              itemDistance:17,//범례 간 간격 지정.
              itemStyle: {
              color:'#444',
              fontSize: '14px',
              fontWeight:'400'
            },
            x: 10,//가로 위치 지정.
            y: -3,//세로 위치 지정.
       },
		xAxis: [{
        categories: ['첫번째데이터', '두번째데이터', '세번째데이터', '네번째데이터','다섯번째데이터'],
          labels: {
            y: 20,
            style: {
            color:'#444',
            fontSize: '12px'
          },
		},
        lineColor: '#cfcfcf',//x축 선 색상 지정.
        gridLineWidth: 0,// x축 그래프 뒤에 깔리는 선 굵기 지정.(0으로 지정 시 사라짐)
        tickWidth: 1,//x축 label 사이 표지자 너비(0으로 지정 시 사라지며, 차트 타입에 따라 default로 지정되어 있을 수 있음)
        tickColor: '#cfcfcf',
        tickPosition: 'inside'// outside가 default 이며, x축 선 기준 아래를 바라봄. inside는 위를 바라봄.
        }],
        yAxis: [{
          //y axis 왼쪽
            title: {
            text: ''
          },
          labels: {
          	enabled: false//label 미사용 시 false로 지정.
          },
          stackLabels: {//스택 바에 사용하는 label 설정.(stacked bar 필수 설정 옵션)
            enabled: true,
            y:5,
            style: {
              fontSize: '12px',
              fontWeight: '500',
              color:'#444'
            }
          },
          gridLineWidth: 0// y축 차트 뒤에 깔리는 선 미사용 시 0으로 지정.
        }],
        plotOptions: {
          column: {// 컬럼 차트 전체 옵션 지정
                stacking: 'normal',//stacked bar 필수 설정 옵션(default undefined)
                dataLabels: {//컬럼 바 각각의 label 옵션 지정.
                enabled: true,
                style: {
                fontSize:'12px',
                fontWeight:'500',
                textOutline:0,// label 수치의 outline 제거 0으로 지정.

                }
              }
          },
          series: {
              pointWidth: 34 //bar 너비 지정.
          }
		},
        series: [{
          name: '수치1',
          data: [8, 7, 3, 8,5],
          dataLabels: {//바 상단의 수치값 개별 지정.
          enabled: true,
          format: '{y}',//수치 표현 포맷
          color: '#a562d4', 
          align: 'right',
          verticalAlign: 'top',
          //위치 지정
          x:20,
          y: -6,
        }
        }, {
          name: '수치2',
          data: [5, 3, 4, 3, 2],
          dataLabels: {
          enabled: true,
          color:'#b1b6c1',
          align: 'right',
          verticalAlign: 'top',
          //위치 지정
          x:20,
          y: -6,
        }
        }, {
          name: '수치3',
          data: [3, 4, 5, 4, 5],
          dataLabels: {
            enabled: true,
            color:'#7d8598',
            align: 'right',
            verticalAlign: 'top',
            //위치 지정
            x:20,
            y: -6,
          }
        }]
        });
				
  }

- 기본 설정 및 스택 컬럼 바 옵션입니다. 상세 설명은 위 코드를 참고해주세요!

stacked bar를 설정하기 위해서는 stackedLabel과 stacking 설정이 필수입니다.

(스크립트에 지정된 noto sans 폰트는 위 그래프 이미지의 폰트와 다릅니다.)

도넛 차트 옵션

function dounutChart() {
  //차트 색상 지정
    Highcharts.setOptions({
    colors: ['#d470cc','#3f77cb']
  });
  // Set up the chart
  var chart = new Highcharts.Chart({
  chart: {
      renderTo: 'dounutChart',
      type: 'pie',/도넛 차트도 원형이기 때문에 pie로 지정함.
      margin: [0, 5, 5, 5],
      spacingRight:0,//차트 우측 여백 지정(default 10)
      style: {
      color: '#444',
      fontFamily: 'notoSans',
      fontWeight: '400',
    },
  	backgroundColor:'rgba(255, 255, 255, 0)'
  },
  	credits: {enabled: false}, //highchart 워터마크 숨김처리
    title: {
    	text: '',
    },
    legend: {
      layout: 'vertical',//범례 세로 정렬 시 vertical로 지정.(default horizontal)
      align:'center',
      verticalAlign: 'middle',
      x: -4,
      y: -2,
      itemMarginTop: 5,//범례 margin top 지정(bottom도 존재.)
      symbolHeight: 10,
      symbolWidth: 10,
      symbolPadding: 5,
      symbolRadius: 0,
      itemStyle: {
        color: '#444',
        fontSize: '14px',
        fontWeight:'normal'
      }
     },
     plotOptions: {
       pie: {//도넛(파이)차트 전체 옵션 지정.
       dataLabels: {
       enabled: true,
       distance: -20,
       },
       	showInLegend: true//범례 show/hide 설정. (series 내에서 개별 지정도 가능.)
       }
     },
     series: [{
       type: 'pie',
       name:'금감원 취하 현황',
       innerSize: '50%',//도넛 차트 지정시 내부 구멍 너비를 설정.(도넛 차트 필수 지정 옵션)
       data:[
       	{
          name: '수치1',
          y: 47,
          dataLabels: {
            y:-35,
            x: 25,
            color:'#d470cc', 
          }
        },
        {
          name: '수치2',
          y: 34,
          dataLabels: {
          	color:'#3f77cb', 
          }
        }
        ],
        dataLabels: {
          enabled: true,
          format: '<span class="d-label">{point.name}</span> : {y}',//label의 포맷을 "데이터 명 : y"로 지정해서 사용.
          align: 'center',
          //세로 위치 지정
          y:-30,
          x: -40,
          style: {
         	 fontSize: '13px',
            fontFamily: 'notoSans',
            fontWeight: '400',
          }
        }
	}]
});
}

- 도넛 차트 지정에서 제일 중요한 것은 series 옵션 내에서 "innerSize"를 지정하는 것입니다.

0~100% 사이의 값으로 지정이 가능하고, 값이 커질 수록 구멍의 너비가 커집니다.

가로 스택 컬럼 차트 옵션

 function horiStackedBar() {
   //차트 색상 지정
     Highcharts.setOptions({
     colors: ['#3f77cb','#d470cc']
   });
   // Set up the chart
   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'horiStackedBar',
       type: 'bar',//가로 column 지정은 "column"이 아닌 "bar"
       margin: [20, 10, 25, 115],
       style: {
         color: '#444',
         fontFamily: 'notoSans',
         fontWeight:'400'
       },
     backgroundColor:'rgba(255, 255, 255, 0)'
   },
   //highchart 워터마크 숨김처리
   credits: {enabled: false},
   title:{
  	 text: ''
   },
   legend: {enabled: false},
   xAxis: [{
   		categories: ['첫번째데이터', '두번째데이터', '세번째데이터', '네번째데이터','다섯번째데이터',],
        labels: {
        	y: 5,
            style: {
            	color:'#444',
                fontSize: '14px',
             },
		 },
         lineColor: '#cfcfcf',
         gridLineWidth: 0,
         tickWidth: 1,
         tickColor: '#cfcfcf',
         tickPosition: 'inside'
     }],
     yAxis: [{
     	//y axis 왼쪽
        title: {
        	text: ''
         },
         labels: {
         	enabled: false
         },
         stackLabels: {
         	enabled: true,//stacked bar 필수 설정 옵션.
            x:-8,
            y:1,
            style: {
            	fontSize: '12px',
                fontWeight: '500',
                color:'#444'
            }
          },
          gridLineWidth: 0
      }],
      plotOptions: {
      	dataLabels: {
        	enabled: true,
            style: {
            	fontSize:'12px',
                fontWeight:'500',
                textOutline:0,
             }
         },
         series: {
         	stacking: 'normal',//stacked bar 필수 설정 옵션.(default undefined)
            //bar 너비
            pointWidth: 34,
         }
       },
       series: [{
       		name: '첫번째데이터',
            data: [8, 8, 8, 8,5,],
            //바 상단의 수치값
            dataLabels: {
            	enabled: true,
                format: '{y}',
                color:'#3f77cb',
                style: {
                	fontSize:'10px',
                    fontWeight:'400',
                },
                align: 'right',
                verticalAlign: 'top',
                //위치 지정
                x:1,
                y: -20,
             }
             }, {
             	name: '두번째데이터',
                data: [3, 3, 3, 3, 3,],
                dataLabels: {
                	enabled: true,
                    color: '#a562d4', 
                    style: {
                    	fontSize:'10px',
                        fontWeight:'400',
                    },
                    align: 'right',
                    verticalAlign: 'top',
                    //위치 지정
                    x:1,
                    y: -20,
                  }
              }]
			});
				
}

- stacked horizontal bar 설정은 차트의 타입을 "bar"로 설정하는 것부터가 시작입니다.

그 외의 필수 설정은 stackedLabel과 stacking 옵션입니다.

깔대기 차트 옵션

function funnelChart() {
  //차트 색상 지정
  Highcharts.setOptions({
  	colors: ['#7944c9','#575bb9','#3f77cb','#d462cb']
  });
  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'funnelChart',
      type: 'funnel',//깔대기 차트 타입
      margin: [5, 5, 50, 40],
      style: {
        color: '#444',
        fontFamily: 'notoSans',
        fontWeight: '400',
    },
    backgroundColor:'rgba(255, 255, 255, 0)'
  },
  	credits: {enabled: false},//highchart 워터마크 숨김처리
    title: {
    	text: '',
    },
    legend: {
    	layout: 'vertical',
        align:'right',
        verticalAlign: 'middle',
        x: 8,
        y: -2,
        itemMarginTop: 5,
        symbolHeight: 10,
        symbolWidth: 10,
        symbolPadding: 5,
        symbolRadius: 0,
        itemStyle: {
          color: '#444',
          fontSize: '14px',
          fontWeight:'normal'
        }
	},
    plotOptions: {
    	series: {
        	dataLabels: {
            	enabled: true,
                format: '<span class="d-label">{point.name}</span> : {y}',
                align:'left',
                distance: '0',
                softConnector: false,//label과 차트 연결선 옵션(default true)
                connectorWidth:0,//label과 차트 연결선 너비(0으로 지정시 사라짐)
                style: {
                  fontSize: '12px',
                  fontWeight:'normal'
                },
             },
             center: ['40%', '50%'],//plot area 기준 정중앙에 위치한 차트의 위치 조정 옵션. (default x축:50%, y축:50%)
             neckWidth: '80px',//깔대기 하단 목 부분의 너비 지정.
             neckHeight: '25%',//깔대기 하단 목 부분의 높이 지정.
             width: '195px'
         }
	},
    series: [{
    	name: '',
        data: [
        	{
            	name: '첫번째데이터',
                y: 47,
                dataLabels: {
                  x: -225,
                  color:'#7944c9', 
                }
             },
             {
             	name: '두번째데이터',
                y: 34,
                dataLabels: {
                  x: -190,
                  color:'#575bb9', 
                }
             },
             {
             	name: '세번째데이터',
                y: 34,
                dataLabels: {
                  x: -145,
                  color:'#3f77cb', 
                }
              },
              {
              	name: '네번째데이터',
                y: 34,
                dataLabels: {
                  x:-490,
                  color:'#d470cc', 
                }
              },
              ]
        }],
	});
}

- 깔대기 차트 옵션은 구현하려면 추가적인 js 파일이 필요합니다.

* 다운로드 파일 사용 시 (다운로드 링크 : www.highcharts.com/blog/download/)

code\modules\funnel.js

위의 경로에 파일이 존재합니다.

*CDN 사용 시

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>

위와 같이 highcharts.js 밑에 불러와서 사용하시면 됩니다.

세로 컬럼 + 기준선 차트 옵션

function columnWithLine() {
  //차트 색상 지정
  Highcharts.setOptions({
  	colors: ['#21b7fa', '#0357ad','#fa219c', '#1aba00']
  });
  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'columnWithLine',
      type: 'column',
      margin: [0, 30, 30, 30],
      style: {
        color: '#333333',
        fontFamily: 'notoSans'
      },
    backgroundColor:'rgba(255, 255, 255, 0)'
  },
  credits: {enabled: false},//highchart 워터마크 숨김처리
  title:{
  	text: ''
  },
  legend: {
  	enabled: false//범례 미사용 시 false 지정.
  },
  xAxis: [{
    categories: ['수치1', '수치2'],
    labels: {
      y: 20,
      style: {
      	color:'#333',
      	fontSize: '13px'
      },
  	},
    lineColor: '#d1d1d1',
    gridLineWidth: 0,
    tickWidth: 1,
    tickColor: '#d1d1d1',
    tickPosition: 'outside'
 }],
 yAxis: [{
 //y axis 왼쪽
 gridLineWidth: 0,
 title: {
 	text: ''
 },
 labels: {
 	enabled: false
 },
 plotLines: [{//기준점 사용 옵션.
   color: '#fa219c',
   width: 2,
   value: 7,
   dashStyle: 'shortdash',//라인 스타일 지정 옵션
   zIndex: 5,
   label: {
     text: '7',
     align: 'right',
     x: -10,
     y: -6,
     style: {
     	color:'#fa219c',
     }
   }
 },
 {
 color: '#1aba00',
 width: 2,
 value: 4,
 dashStyle: 'shortdot',
 zIndex: 5,
 label: {
   text:'4',
   align: 'right',
   x: -10,
   y: -6,
   style: {
  	 color:'#1aba00',
 	},
 //useHTML: true,
 }
 }]
 }],
 plotOptions: {
   series: {
   	//bar 너비
     pointWidth: 47,//컬럼 너비 지정.
     groupPadding: 0.5//컬럼을 외곽 패딩 지정. 큰 값을 지정하면 컬럼 너비가 줄어들 수 있음.(오른쪽, 왼쪽/default 0.2)  
   }
 },
 series: [{
   data: [10, null],
   name: '첫번째데이터',
   //바 상단의 수치값
   dataLabels: {
     enabled: true,
     format: '{y}',
     color: '#444', 
     align: 'center',
     //세로 위치 지정
     y: 5,
     style: {
       fontSize: '12px',
       fontFamily: 'notoSans',
       fontWeight: 'normal'
     }
	}
   }, {
     data: [null, 5],
     name: '두번째데이터',
     //바 상단의 수치값
     dataLabels: {
       enabled: true,
       format: '{y}',
       color: '#444', 
       align: 'center',
       //세로 위치 지정
       y: 5,
       style: {
         fontSize: '12px',
         fontFamily: 'notoSans',
         fontWeight: 'normal'
       }
     }
   }]
   });
				
}

- 기준선은 x, y, z 축에 모두 지정이 가능하다. 그리하여, 적용하길 원하는 축 옵션 내에 넣어준다.

선의 스타일은 원하는대로 지정 가능 하며, 하이차트에서 지원하는 종류는 총 11가지이다.

해당선의 샘플은 아래 jsfiddle에서 확인 가능하다.

jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/

Highcharts Demo - JSFiddle - Code Playground

jsfiddle.net

커스텀 툴팁 + 파이 차트 옵션

function pieWithCustomPop() {
  //차트 색상 지정
  Highcharts.setOptions({
 	 colors: ['#0093e0','#116cc1','#15baa4','#157270', '#ea8175','#87cd33','#616bcf']
  });
  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'pieWithCustomPop',
      type: 'pie',
      margin: [0, 0, 100, 0],
      style: {
        color: '#333333',
        fontFamily: 'notoSans'
      },
      backgroundColor:'rgba(255, 255, 255, 0)'
    },
    credits: {enabled: false},//highchart 워터마크 숨김처리
    title:{
   	 text: ''
    },
    legend: {
      align:'left',
      verticalAlign: 'bottom',
      width: 300,
      x: -5,
      y:-25,
      itemWidth: 90,
      itemDistance: 0,
      symbolHeight: 10,
      symbolWidth: 10,
      symbolPadding: 5,
      symbolRadius: 0,
      itemStyle: {
        color: '#333',
        fontSize: '14px',
        fontWeight:'normal'
      }
	},
    plotOptions: {
    	pie: {
        allowPointSelect: true,//차트 데이터 선택 유무 옵션.
        dataLabels: {
          enabled: false
        },
        showInLegend: true,
        size: '100%',
     }
   },
   tooltip: {
   		useHTML: true,//툴팁 포맷을 html로 변경할 경우 true로 지정.(default false)
        formatter: function () {//커스텀 tooltip html
        	return '<p class="voc-tit" style="color:' + this.point.color + '">' + this.point.name + '</p>' +
            	'<ul class="voc-list">' +
                '<li>' + '<div class="figures-wrap"><span class="tit">' + '당월' + '</span>'+ '<span class="num">' + this.y + '건'+ '</span></div>' +'</li>' +
                '<li>' + '<div class="figures-wrap"><span class="tit">' + '전월' + '</span>'+ '<span class="num">' + this.y + '건'+ '</span></div>'+'<span class="voc-figures f-down">'+ this.y +'%</span>' +'</li>' +
                '<li>' + '<div class="figures-wrap"><span class="tit">' + '작년' + '</span>'+ '<span class="num">' + this.y + '건'+ '</span></div>'+'<span class="voc-figures f-up">'+ this.y +'%</span>' +'</li>' +
                '</ul>' ;
               }
        },
        series: [{
          type: 'pie',
          name:'금감원 취하 현황',
          innerSize: '40%',
          data:[
            ['첫번째데이터', 28],
            ['두번째데이터', 30],
            ['세번째데이터', 5],
            ['네번째데이터', 65],
            ['다섯번째데이터', 80],
            ['여섯번째데이터', 10],
            ['일곱번째데이터', 50]
          ]
         }]
    });
				
 }

- 커스텀 툴팁은 useHTML을 true로 설정한 뒤, fomatter에 HTML 코드를 넣어주면 됩니다.

하프 도넛 차트 옵션

function halfPie() {
  //차트 색상 지정
  Highcharts.setOptions({
  	colors: ['#008dd7','#c6c6c6']
  });
  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'halfPie',
      type: 'pie',
      margin: [0, 10, 30, 10],
      style: {
        color: '#333333',
        fontFamily: 'notoSans'
      },
      backgroundColor:'rgba(255, 255, 255, 0)'
    },
    credits: {enabled: false},//highchart 워터마크 숨김처리
    title: {
      text: '',
      align: 'center',
      verticalAlign: 'middle',
      y: 70,
      style: {
        color:'#333',
        fontSize: '28px',
        fontFamily: 'Segoe UI',
        fontWeight: 'bold',
        textOutline: false 
      }
    },
    legend: {
      align:'center',
      verticalAlign: 'bottom',
      x: 0,
      y: -75,
      itemDistance: 15,
      symbolHeight: 10,
      symbolWidth: 10,
      symbolPadding: 5,
      symbolRadius: 0,
      itemStyle: {
        color: '#333',
        fontSize: '14px',
        fontWeight:'normal'
       }
     },
     plotOptions: {
     	pie: {
          dataLabels: {
            enabled: true,
            distance: -20,
          },
            startAngle: -90,//하프 도넛 앵글 시작 각도
            endAngle: 90,//하프 도넛 앵글 끝 각도
            center: ['50%', '75%'],
            size: '100%',
            showInLegend: true
           }
        },
        series: [{
          type: 'pie',
          name:'금감원 취하 현황',
          innerSize: '50%',
          data:[
            ['첫번째데이터', 28],
            {
              name: '두번째데이터',
              y: 7.61,
              dataLabels: {
             	 enabled: false
              }
            }
          ],
          dataLabels: {
            enabled: true,
            format: '{y}건',
            color: '#fff', 
            align: 'center',
            //세로 위치 지정
            y:0,
            x: 30,
            style: {
              fontSize: '16px',
              fontFamily: 'notoSans',
              fontWeight: 'bold',
              textOutline: false 
             }
          }
       }]
    });
    //setting title in data fomat(84 부분을 데이터로 변경 해서 사용)
    chart.setTitle({ text: '84' + '<span class="unit"> %</span>' });
}

- 하프 도넛은 일반 도넛 차트와 옵션 설정을 동일하며, plotOptions 내 startAngle, endAngle 만 지정해 주면 됩니다.

지금까지 제가 사용했던 타입별 하이차트 설정 방법이었습니다. 다른 종류의 차트도 많지만,

디자인을 다듬기 위한 기본 옵션 참고용으로 도움이 되었으면 좋겠네요.

[Tip] 티스토리에 올린 글 구글 검색에 띄우기. 구글 서치 콘솔에서 url 검사가 안보일 때 설정 방법.

RAMY,LEE — Thu, 31 Dec 2020 21:20:18 +0900

안녕하세요~ 레미입니다.

오늘은 작업 관련 글이 아닌, 티스토리 블로깅에 유용한 정보를 가지고 왔습니다.

이 곳에 퍼블리싱 관련 정보를 올리기 시작하고 글이 갯수가 많아지는 동안,

방문자의 수는 손에 꼽을 정도로 적었어요. 하하핳

꾸밈없이 유용한 정보를 정리해서 올린 글이었는데 조회수가 너무 적어서 생각이 많아졌습니다.

그래서 오늘은 제가 쓴 글을 직접 구글에 검색을 해봤더니 웬걸?

아예 검색조차 되지 않더라구요. 그래서 구글에 블로그 글 검색되는 방법을 찾아봤어요.

여러 블로그에서 구글 서치 콘솔에서 설정하는 방법은 안내해주셨는데 저는 같은 창을 켜봐도

알려주시는 메뉴가 안보였습니다 ㅠ 그래서 여러 글을 번갈아 봐도 알려주시는 것은 똑같아서

꽤나 헤매였어요. 그러다가 결국 해결했습니다.

구글 서치 콘솔에서 바로 url 검색이 안보이시는 분들은 내 블로그와 구글 콘솔이 미연결되어서 그렇습니다.

티스토리 블로그를 콘솔에 연결하는 방법을 알려드리겠습니다.

방법은 매우 간단하니 아래 캡쳐로 설명된 방법을 따라서 해보세요! :)

1. 티스토리에 로그인한 후 설정 페이지 이동합니다.

2. 좌측 메뉴에서 파란색 박스로 표시된 플러그인 메뉴를 선택합니다.

3. 전체 플러그인 중에서 구글 서치 콘솔 박스를 찾아서 클릭합니다. 그러면 구글 계정으로 연동을 할 수 있는 팝업 창이 뜹니다. 그 후 사용가능한 계정을 연결해주세요. 계정이 연동되면 자동으로 서치 콘솔 페이지가 새 창으로 뜨게됩니다. 그 곳 좌측 메뉴에서 url 검색을 찾을 수 있습니다. (현재 사용중이면 좌측에 사용중이라고 뜨지만, 그렇지 않다면 아무 표시가 없습니다. 사용중으로 변경해주어야 사용할 수 있습니다.)

4. 3번까지 마치신 후 내 블로그로 넘어와서 검색이 안되는 포스팅 url을 복사합니다.

5. 구글 서치 콘솔 사이트로 넘어와서 복사한 url을 검색 창에 붙여넣기 하여 검색 합니다.

6. 구글 색인에서 데이터를 가지고 오는 중이라는 팝업이 뜨면 기다려주세요.

7. 데이터 가져오기가 끝나면, 검색한 내 블로그 글이 구글에 등록되어 있지 않다는 안내가 나옵니다.

여기서 파란 박스로 표시된 "색인 생성 요청"을 클릭합니다.

8. 그리고나면, 색인을 생성할 수 있는지 테스트한다는 안내 팝업이 뜹니다.

9. 색인 생성이 정상적으로 요청이 되면 아래와 같은 팝업이 뜹니다. 확인 버튼을 눌러주세요.

10. 팝업을 닫은 후 페이지를 확인하면 색인 생성 요청됨이라는 표시를 확인하실 수 있습니다.

저는 이렇게 몇 개의 글을 색인 요청해 둔 상태입니다.

내 블로그의 글이 구글에서 검색되는지 바로 알 수 있는 방법은 구글 검색창에 아래와 같이 입력해서 해주시면 됩니다.

저는 오늘 점심 때 쯤 색인 요청을 하였는데 아직 블로그만 뜨는 걸 보니 더 기다려야 하나봅니다.

site: 내 블로그 주소

+ 색인 요청 이후

- 색인 요청 이후 이틀 뒤 구글로 부터 아래와 같은 메일을 받았습니다. 정상적으로 색인 요청이 되었구요.

아래 사진에서 '상위 페이지 확인', '상위 검색어 확인' 버튼을 누르면 본인 계정과 연결된 구글 서치 콘솔 페이지가

바로 뜨게됩니다.

- 아래와 같은 새 페이지가 뜨고, 페이지의 클릭, 노출수, 게재 순위등을 확인 하실 수 있습니다.

허허 저는 아직 매우 소박하네요~

[Select]select tag 기본 스타일(화살표) 변경 방법 3가지.(+ IE pollyfill, 가상선택자 사용시 발생하는 이슈 해결 방법)

RAMY,LEE — Sat, 26 Dec 2020 23:05:41 +0900

안녕하세요! 레미입니다.

select 박스 디자인을 변경하는 3가지 방법을 소개해드리려고 합니다.

구글에서 검색하면 아주 손쉽게 방법을 찾으실 수 있는데요.

제가 직접 겪은 디자인 변경 이슈 해결 방안도 함께 공유해 드리겠습니다.

눈에 잘 띄도록 핑크색 화살표로 변경해보았습니다 :)

1. select 박스 자체의 디자인을 제거 후, background를 활용하여 새로운 화살표 이미지 적용하기.

- 제일 간단하게 사용할 수 있고, 제일 많이 쓰이는 방법입니다.

위 이미지의 핑크색 점선으로 표시한 속성이 핵심입니다.

① select 박스 자체의 화살표 appearance를 제거합니다. IE 대응을 위하여 스타일 추가 적용이 필요합니다.

EX.

select {

-webkit-appearance:none; /* for chrome */

-moz-appearance:none; /*for firefox*/

appearance:none;

}

select::-ms-expand{

display:none;/*for IE10,11*/

}

② select 박스에 준비한 화살표 이미지를 background로 지정해 줍니다.

EX.

select {

background:url('arr_pink.gif') no-repeat 97% 50%/15px auto;

}

* 여기 팁으로 드리고싶은 말씀은 select에 padding 지정 시, 화살표가 위치하는 오른쪽 영역의 패딩값을 화살표 크기+ 3~4픽셀 더하여 더 적용해서 사용하세요. 이미 잘 아시고 계실 수도 있겠지만 만약 왼쪽과 동일한 패딩값을 지정한다면,

옵션값이 길어질 경우 화살표 밑으로 글씨가 침범하여 겹쳐보이는 불상사가 생길 수도 있습니다.

아래 이미지를 참고하세요.

2. select 박스를 다른 태그로 감싸서 디자인 변경하기.

- 일반적으로 div 태그를 이용하여 select를 감싼 뒤, select의 기본 형태인 선과, 배경색을 모두 제거하고 div에 디자인을 입혀서 사용합니다. 개인적으로 이 방법을 제일 애용합니다. div에 디자인 입히는건 자유로우니까요.

① select의 기본 스타일을 제거합니다.

- 여기서도 위 1번에서 쓰인 appearence 속성이 필요합니다.

EX.

select {

width:100%;

height:100%;

padding:0 28px 0 10px;

font-size: 15px;

border:0; //기본 스타일 제거

-webkit-appearance:none; /* for chrome */

-moz-appearance:none; /*for firefox*/

appearance:none;

box-sizing: border-box;//select 박스의 크기 방식 지정.

background:transparent;//배경색 투명 처리

}

select::-ms-expand{

display:none;/*for IE10,11*/

}

② div에 select 디자인을 적용합니다.

EX.

.select-wrap {

width:300px;

height: 28px;

border:1px solid #ccc;

background:url('arr_pink.gif') no-repeat 97% 50%/15px auto;//화살표 이미지지정.

}

* 디자인을 div에 입히는데 왜 패딩값은 select에 지정하나요?

- select는 기본 폼필드 요소로서 웹 페이지 내에서 마우스, tab 등으로 선택시 자동으로 포커스가 들어갑니다.

그리하여, 패딩값을 div에 지정하면 지정한 값만큼 select와 option 박스가 밀려보이는 현상이 생깁니다.

아래 이미지를 참고해주세요.

*혹시, 화살표 이미지를 가상 선택자(::after)에 지정해도 되나요?

- 안됩니다. 이 방법은 제가 직접 시도하고 이슈를 한 번 겪었습니다.

가상선택자에 화살표를 지정하면 이미지를 표시하는데엔 문제 없으나, 이미지 영역을 클릭 시 option 박스가 열리지 않습니다. 이 이슈는 크롬, IE 등 공통적으로 발생하는 사항이니 웬만하면 사용하지 말아주세요.

3. select, option 박스의 디자인을 모두 변경하기.

- 두 가지를 모두 변경하려면, 해당 태그는 사용하지 못한다. 그리하여, 새로운 태그로 마크업을 해서 간단한 제이쿼리와 함께 사용합니다. 이 방법은 작업자마다 조금씩 다릅니다.

EX. (추후 업데이트 예정.)

[Alignment] inline-block사용하여 여백없이 수평 정렬하기.+ flex 레이아웃 사용.

RAMY,LEE — Thu, 24 Dec 2020 00:24:00 +0900

안녕하세요! 레미입니다.

오늘은 수평정렬에 대한 내용을 가져왔어요.

display:inline-block; 실무에서 참 많이 사용합니다.

하지만, 큰 단점 하나를 꼽으라면 자체적으로 3~4 픽셀의 여백을 가지고 있다는 점입니다.

수평 정렬을 시킬 땐 1~2픽셀 차이만 나도 조금 분산되어 보이는 느낌이 드는데요.

3픽셀 이상 차이가 나면 반듯한 느낌을 주기 힘들답니다.

그래서, inline-block으로 지정했을 때 여백을 없애는 방법 3가지+flex layout을 소개해 드리려고 합니다.

위 이미지는 display:inline-block;으로 지정 후, 생기는 3~4픽셀 가량의 여백 예시입니다. 꽤 넓지요?

위 이미지는 아래 소개되는 방법으로 여백을 제거한 예시입니다.

1. float 속성 사용하여 강제로 정렬.

- 단순하게 여백 없이 왼쪽, 오른쪽 정렬이 필요하다면 사용할 수 있는 방법입니다. IE 하위 버전을 지원할 때, 많이 사용 했었습니다. 최신 브라우저 기준으로 작업하는 요즘은 사용 빈도가 많이 줄었어요.

* 특징

1. float 속성은 엘레먼트의 정렬을 강제로 바꿔주기 때문에 유연한 레이아웃을 잡을땐 다루기 어려움.

2. float된 요소의 부모 태그에 float 해제를 해줘야함.

- 그렇지 않으면, 부모 태그의 형제, 자매 요소에도 영향을 미쳐 함께 딸려 올라오기 때문입니다.

EX. float 해제 방법(제일 많이 사용되는 방식입니다.)

ul::after {
  display:block;
  content:' ';
  clear:both;
}

2. 마크업 시 정렬할 태그를 한 줄에 붙여쓰기.

- 제목 그대로 태그를 한 줄에 다닥다닥 붙여서 마크업을 합니다.

이 방법은 차마 못하겠다~ 싶은 분들 계실 것 같습니다. 아래 예시로 들어볼게요.

EX. 태그 한 줄 정렬.

이런식으로 한 줄에 붙여 작성하면 신기하게도 여백이 사라집니다!

*특징

1. 마크업된 HTML을 한 눈에 파악하기 힘들 수 있음.

2. 경우에 따라 한 줄에 붙여서 쓰지 못할 때도 있음.

3. 정렬하는 태그의 부모에 font-size:0; 지정하기.

- 정렬하는 엘레먼트 부모 태그에 font-size:0;을 지정하고, font-size가 필요 시 해당 엘레먼트에 직접 지정합니다.

이 방법은 알게되고 나서 오! 신세계다!라는 짧은 감탄을 한 기억이 있어요.

저희 회사에서는 데이터 조회가 주 목적인 화면들이기에 대부분의 화면에서 테이블을 사용합니다.

그래서 td안에 여러 input요소 들과 label, 그 외 문구들이 자리를 차지해요. 그래서 이 요소들을 여백 없이 깔끔하게

정렬하는게 나름 디자인적으로 중요한 요소가 됩니다. 그래서 이 아이들을 float로 정렬하자니 프로젝트에 따라

td 내부 구성이 차이가 있기에 함부러 할 수가 없었습니다. 그래서 구글링을해서 찾은 방법이 font-size 조정법이었어요.

강제성이 없고, 0으로 지정해도 정렬되는 요소에 직접 font-size를 지정하면 되니 너무 좋더라구요.

현재도 이 방법을 사용하고 있어요.

*특징

1. 부모 요소에 font-size:0;을 지정하면 자식 요소의 font-size까지 영향을 미친다. 그리하여,

자식 요소에 font 지정 필요 시 따로 지정해주어야함.

4. flex layout 사용하기.

- flex 레이아웃 사용 시 여백 없이 정렬 가능합니다. 이 방법은 inline-block으로 정렬하는 방법은 아니지만, 제일 최신의 정렬 방식이라서 같이 추가해보았습니다! 정말,, IE 브라우저만 아니면 엘레먼트 레이아웃 잡는데 FLEX가 짱이십니다.

최신 브라우저만 체크한다면 이 방식을 제일 추천합니다.

*특징

1. 정말 편하게 수직, 수평 정렬을 잡을 수 있으며, 여백 이슈도 없음.

2. FLEX가 제공하는 모든 속성을 무리없이 사용하려면, 최신 브라우저만 사용가능함.

EX. FLEX 사용한 기본 수평 왼쪽 정렬 + 수직 중앙 정렬.

ul {

display:-ms-flexbox;//IE 브라우저 대응
display:flex;
justify-content:flex-start;//start를 사용해도 무방하나, start는 IE 미지원. IE 대응을 위해선 flex-start를 사용해야함.

align-items:center;
}

li {

flex:0 0 100px;//고정된 너비를 가질 경우, flex-shrink/flex-grow 속성을 0으로 지정 후, flex-basis에 고정 값 지정.

}