git 으로 clone 한 icarus theme 를 사용하고 있다. 스타일과 코드를 수정하려면 아래 2개 사이트의 정보가 필요할 것 같다.

1. bulma.io
   • https://bulma.io/
2. inferno
   • https://github.com/ppoffice/hexo-component-inferno

layout 관련

기본 레이아웃은 layout.jsx 이다.과련해서 bulma 의 CSS 정의를 살펴보면 도움이 된다.

• Bulma sizes: https://bulma.io/documentation/columns/sizes/
• https://www.geeksforgeeks.org/bulma-different-column-sizes-per-breakpoint/?ref=ml_lbp

컬럼 수에 따른 조절…

icarus/layout/layout.jsx 에서 컬럼수로 폭을 조절하는 것을 상대적으로 정해주니 좀 더 시원해 졌다.

1
2
3
4
5
6
7
8
9
10
11
12

<div class="columns">
    <div class={classname({
        column: true,
        'order-2': true,
        'column-main': true,
        'is-four-fifths': columnCount === 1,
        //'is-12': columnCount === 1,
        'is-four-fifths-tablet is-four-fifths-desktop is-four-fifths-widescreen': columnCount === 2,
        'is-three-quarters-tablet is-three-quarters-desktop is-three-quarters-widescreen': columnCount === 3
        //'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
        //'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
    })} dangerouslySetInnerHTML={{ __html: body }}></div>

style 관련

responsive.styl

화면 폭 수정

themes/icarus/include/style/responsive.styl

• Javascript code determines the page width.

1
2
3
4

+fullhd()
    .is-2-column .container
        max-width: $widescreen - 1 * $gap
        width: $widescreen - 1 * $gap

style.styl

전체 스타일 시트는 themes/icarus/source/css/style.styl 에서 외부 .styl 파일을 을 import 해서 적용했다. 변경을 위해서 themes/my_icarus_custom 이란 폴더를 만들어 사용한다.

• themes/icarus/source/css/style 아래 추가할 스타일 파일을 만들어 사용한다.

1
2
3
4
5

hexo ROOT/
    |----- themes
            |
            |----- icarus/
                        source/css/my_bg.styl

배경이미지 적용

1. themes/icarus/source/css/style.styl 파일에 다음을 적용

1
2

// my custums
@import '../../include/style/my_bg'

2. 배경 이미지는 hexo/source/images/ 아래에 저장했다.

3. my_icarus_custom/bg.styl 파일에 CSS 스타일 작성

1
2
3
4
5
6
7

body {
  background-image: url("/images/vlcsnap-2023-05-16-14h44m58s614.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

포토샵으로 Collages 를 만드는 과정을 해보았다.

1. 찢어진 틈 사이의 이미지 콜라쥬 효과 만들기

1. 찢어진 틈 사이의 이미지 콜라쥬 효과 만들기

스케치북을 찢은 사이로 사진이 보이게 하는 효과를 내보자.

{:width=”800”}

클리핑 마스크는 원본 이미지에 다른 이미지를 합성할 때 유용하다.

클리핑 마스크 Clipping Mask

Clipping-Mask는 원본의 특정 영역에, 클리핑 마스크로 다독거린 이미지로 매스킹해서 깔끔하게 합성한 이미지를 표현한다. 그래서 클리핑 마스크는 원본 이미지에 다른 이미지를 합성할 때 유용하다. 원본 이미지에서 일분 영역만을 Clipping-Mask 이미지로 대입해서 표현할 수 있다.