먼저 아래와 같은 HTML 코드가 있다고 가정하면,

<div id=newlist><ul>
<li>첫번째 리스트입니다.</li>
<li>두번째 리스트입니다.</li>
<li class=othercheck>클래스를 다르게 지정한 리스트입니다.</li>
</ul></div>

먼저, 기존 불릿을 감추고 :before를 사용해서 새로운 불릿을 만들어 보겠습니다.

#newlist ul {
  list-style: none;
}
//* standard Unicode method *//

#newlist ul li:before {
content: "\2713";
color:#3740ff;
padding-right:5px;
}

//* if you use FA5 *//
#newlist ul li:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f14a";
color:#3740ff;
padding-right:5px;
}

#newlist .othercheck:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f4da";
color:#3740ff;
padding-right:5px;
}

Div를 만들고 BG 이미지로 이용하는 방법은 2가지의 문제점이 있음.

  1. srcset 이미지를 활용할 수 없음
  2. SEO 차원에서 Image에 Alt text 를 부여할 수 없음

따라서, 이미지에게 Width 값과 Height 값을 부여한 후, CSS를 이용하여 Cover 이미지처럼 활용할 수 있슴.

object-fit: cover;
object-position: 50% 50%;

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
font-family: 'Noto Sans KR', sans-serif;

다국어 페이지는 html에서 콘텐츠의 언어를 'lang' 태그로 명시하고 다음을 스타일 시트에 더하시면 됩니다.

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
/*  한국어 */
:lang(ko) {
  font-family: 'Noto Sans KR', sans-serif;
}
/* 일본어 */
:lang(ja) {
  font-family: 'Noto Sans JP', sans-serif;
}
/* 중국어 (간체) */
:lang(zh-Hans) {
  font-family: 'Noto Sans SC', sans-serif;
}
... 생략 ... 
<body>
.... 생략 ....
<div lang="ko"> ... 한국어 콘텐츠</div>
<div lang="ja"> ... 일본어 콘텐츠</div>
<div lang="zh-Hans"> ... 중국어 간체 콘텐츠</div>

아래의 코드를 코드 스니핏을 이용해서 적용함

.oxy-stock-content-styles img, .ct-inner-content img {
  max-width: 100%;
  height: auto;
}

Code Snippet에 다음의 CSS를 적용

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
    display: none !important;
}

선택자는 이미지 검사를 통해 확인하면 됨.

How to Setup Oxygen: Best Global Settings (Automatically Responsive!) - YouTube

스타일시트 생성 및 아래 CSS 적용
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em)

html {
   font-size: 62.5%;
}

Global Settings > Headings > Font-size를 모두 지울것

Fluid-responsive font-size calculator (websemantics.uk)

상기 Calculator의 세팅을 Units: REM, CSS method: Clamp로 설정하고, Viewport:를 32~128로 설정한 후 원하는 REM Range를 설정하면 됨. 참고로 1REM은 10px임.

/* h1~h6 */
clamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 1.6667)), 4.8rem)
clamp(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.0417)), 3.8rem)
clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.8333)), 3.2rem)
clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.625)), 2.6rem)
clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.625)), 2.2rem)
clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.4167)), 1.8rem)
/* body text */
clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.2083)), 1.6rem)

Global Styles / Sections & Columns 에서 Section Container Padding의 Top/Bottom 값을 Clamp를 이용하여 적용, 좌/우 값은 2 rem 정도로 수정함.

clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 5.2083)), 10rem)

Columns Padding의 단위를 none으로 하고, 값을 모두 삭제할 것.

예를 들어 섹션에 배경이미지 위해 멋진 오버레이 패턴을 올리고 싶다면 해당 섹션의 CSS 편집창에 다음의 코드를 삽입합니다.

background: url(https://3.doogak.com/wp-content/uploads/sites/5/2021/03/bg_pattern.png) repeat, url(https://3.doogak.com/wp-content/uploads/sites/5/2021/03/sec1_mbg.jpg) center; background-size: 5px, cover;

background 속성에 url(패턴이미지 경로) repeat, url(배경이미지 경로) center;

background-size 속성에 적절한 px값과 cover속성을 부여한다.

1. FA CDN 주소 가져오기

https://fontawesome.com/account/cdnFA 홈페이지에 접속해서 CDN 주소를 가져와서 적용할 페이지에 삽입합니다. (안해되 되는 지 테스트중)
또는, FontAwesome 플러그인을 활성화합니다.

2. 필요한 FA Icon 찾기

https://fontawesome.com/icons?d=gallery&m=freeFA 홈페이지에서 필요한 아이콘을 검색합니다.
이때 필요한 것은 2가지 입니다.
1) 아이콘이 3가지 스타일 중 어떤 스타일인지
2) 아이콘 코드번호

3. 적용하기

가상요소에는 늘 content라고 하는 스타일이 들어갑니다. 말 그대로 컨텐츠를 넣는 공간으로 큰 따옴표 안에 내용을 삽입해야 합니다. 따라서 FA 코드앞에  (역슬래쉬, 원화로 표시됨)를 붙여서 content안에 입력합니다.

여기에 더하여 font-family와 font-weight를 작성해 주어야 하는데, font-family는 무조건;
font-family: "Font Awesome 5 Free";
이라고 입력합니다.

font-weight는 FA font의 스타일을 말하는데, Solid(fas), Regular(far), Light(fal) 이렇게 3가지 타입이 있습니다. 각각 font-weight를 900, 400, 300으로 적용해야 합니다.

clamp() 속성을 이용하여 글꼴크기가 Container의 사이즈에 따라서 유동적으로 변하도록 할 수 있습니다.

clamp() 속성은 최소값, vw값, 최대값의 3가지 속성을 설정합니다.

media (max-width: )는 page-width 값을 참조하여 설정합니다.

/* media max-width는 page-width로 조정함 */

@media (max-width: 1300px) {
  h1 {
    font-size: clamp(24px, 4.31vw, 56px);
  }
  h2 {
    font-size: clamp(22px, 3.46vw, 45px);
  }
  h3 {
    font-size: clamp(20px, 2.77vw, 36px);
  }
  h4 {
    font-size: clamp(18px, 2.31vw, 30px);
  }
  h5 {
    font-size: clamp(16px, 1.85vw, 24px);
  }
  h6 {
    font-size: clamp(14px, 1.54vw, 20px);
  }
}

상기 설정에서 vw값은 아래 링크된 사이트에서 Viewport Width값과 px값을 입력하여 쉽게 구하실 수 있습니다.

PX to VW

먼저 Patternify에 가서 패턴을 생성한 후 PNG 이미지를 다운로드합니다.

http://www.patternify.com/

오버레이를 적용하고자하는 Element의 before: 섹션에 다음의 CSS를 삽입합니다.

content: "";
background: url('/wp-content/uploads/2017/05/tex2.png') repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 2;

이때 적용대상이 되는 요소의 layout position은 relative로 설정해야 합니다.

만약 컬러를 삽입하고 싶다면 아래의 CSS를 응용하여 적용합니다.

content: "";
background: url('/wp-content/uploads/2017/05/tex2.png') repeat, rgba(189, 105, 130,0.3);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 2;

이 포스팅의 아래의 글을 참고하여 포스팅 되었습니다.

Overlay Your Images With A Pattern Or translucent Color

power-switchmagnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram