먼저 아래와 같은 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가지의 문제점이 있음.
- srcset 이미지를 활용할 수 없음
- 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값을 입력하여 쉽게 구하실 수 있습니다.
먼저 Patternify에 가서 패턴을 생성한 후 PNG 이미지를 다운로드합니다.
오버레이를 적용하고자하는 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;
이 포스팅의 아래의 글을 참고하여 포스팅 되었습니다.