본문 바로가기

Webs352

pre 태그는 마크업의 공백을 그대로 보여줍니다. Reference/HTML 태그는 마크업의 공백을 그대로 보여줍니다. by @webs 2022. 11. 15. 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 태그와 같이 사용됩니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 monospace 폰트로 표현 사용성 ★★★☆☆ 정의(Definition) 태그는 마크업의 공백을 그대로 보여줍니다. 태그는 코드를 표현할 때 태그와 같이 사용합니다. 마크업의 한칸 이상 공백은 브라우저에서 한칸으로 표현됩니다. 두칸이상의 공백을 표현하고 싶다면 를 사용해야 합니다. 줄바꿈과 관련된 태그 및 속성 태그는 텍스트 줄바꿈을 설정합니다. 태그는 의미가 없는 텍스.. 2022. 11. 22.
hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. Reference/CSS hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. by @webs 2022. 11. 19. hyphens hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. 단어에서 줄바꿈이 될때 하이픈(-)으로 연결해주는 작업을 설정하는 방법입니다. 특징 설명 기본값 hyphens : manual 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 여부를 설정합니다. word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. overflow-w.. 2022. 11. 21.
overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. Reference/CSS overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. by @webs 2022. 11. 19. overflow-wrap overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. 태그와 동일한 기능입니다. 한국어는 적용되지 않으며, 영어에 적용됩니다. 특징 설명 기본값 overflow-wrap : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. overflow-wrap 속성은 한국어에는 적용되지 않습니다. overflow-wrap 속성은 태그와 기능이 동일합니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 .. 2022. 11. 21.
word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. Reference/CSS word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. by @webs 2022. 11. 19. word-break word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈을 할 때 단어를 기준으로 할지 말지 여부를 설정 할 수 있으며, 한국어를 기준으로 word-break: keep-all; 속성만 사용 가능합니다. 특징 설명 기본값 word-break : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 여부를 설정합니다. word-brea.. 2022. 11. 21.
white-space 속성은 줄바꿈 및 공백을 설정합니다. Reference/CSS white-space 속성은 줄바꿈 및 공백을 설정합니다. by @webs 2022. 11. 19. white-space white-space 속성은 줄바꿈 및 공백을 설정합니다. white-space: pre 속성은 태그와 기능이 동일합니다. 마크업의 공백은 화면으로 표현될 때 한칸의 공백으로 인식합니다. white-space 속성 마크업상의 공백을 화면에 그대로 표현해 주며, 줄바꿈이나 줄 속성도 설정 할 수 있습니다. 특징 설명 기본값 white-space : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) white-space 속성은 줄바꿈, 공백을 설정합니다. white-space : pre 속성은 태그와 기능이 동일합니다. whit.. 2022. 11. 21.
h1 ~ h6 태그는 각 섹션의 제목을 설정합니다. Reference/HTML ~ 태그는 각 섹션의 제목을 설정합니다. by @webs 2022. 11. 17. ~ ~ 태그는 각 섹션의 제목을 설정합니다. 6단계로 구분하여, 작성하며 순차적으로 작성합니다. 제목 요소는 문서에서 가장 중요한 제목을 설정하며, 보통 한번만 작성합니다. ~ 요소는 단계별로 폰트 사이트와 굵기가 설정되어 있습니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML4 시각적 표현 볼드체 및 글씨 크기 사이즈 사용성 ★★★★★ 정의(Definition) ~ 태그는 각 섹션의 제목을 6단계로 설정합니다. 태그는 가장 높은 단계의 제목이며, 태그는 가장 낮은 단계의 제목입니다. ~ 태그는 글씨 크기를 위해 사용하지 않습니다. 글씨 크기는 CSS의 fo.. 2022. 11. 17.
address 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 15. 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML4 시각적 표현 기울임꼴 사용성 ★★★☆☆ 정의(Definition) 태그는 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등을 표시합니다. 태그는 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다. 태그는 , , , 등 연락처 정보가 필요한 곳에 사용할 수 있습니다. 태그는 연락처와 관련 없는 내용이라면 태그를 사용합니다. 태그는 연락처 정보 보다 더 광범위한 정보를 포함 할 수 없습니다.(시간을 나타내는 time 태그등) 태그는 .. 2022. 11. 17.
trimEnd 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. Reference/Javascript trimEnd() 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 17. trimEnd() trimEnd() 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.trimEnd() 버전(version) ES10 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".trim() //공백 제거하기 let result = " javascript reference ".trimEnd(); // javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) trimEnd() 메서드는 문자.. 2022. 11. 17.
trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다. Reference/Javascript trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. trimStart() trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.trimStart() 버전(version) ES10 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".trim() //공백 제거하기 let result = " javascript reference ".trimStart(); //javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) trimStar.. 2022. 11. 17.
trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다. Reference/Javascript trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. trim() trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.trim() 버전(version) ES5 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".trim() //대문자 변경하기 let result = " javascript reference ".trim(); //javascript reference let result = " 자바스크립트 레퍼런스 ".trim(); //자바스크립트 레퍼런스 let result = " java.. 2022. 11. 17.
padEnd 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. Reference/Javascript padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. padEnd() padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.padEnd() 버전(version) ES8 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".padEnd(길이) "문자열".padEnd(길이, 문자열) "456".padEnd(1, '0'); //456 "456".padEnd(4, '0'); //4560 "456".padEnd(5, '0'); //45600 "456".padEn.. 2022. 11. 17.
padStart 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. Reference/Javascript padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. padStart() padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.padStart() 버전(version) ES8 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".padStart(길이) "문자열".padStart(길이, 문자열) "456".padStart(1, '0'); //456 "456".padStart(4, '0'); //0456 "456".padStart(5, '0'); /.. 2022. 11. 17.
repeat 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다. Reference/Javascript repeat() 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. repeat() repeat() 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.repeat() 버전(version) ES6 결과값(return) 배열(Array) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".repeat(숫자) "javascript reference".repeat(0); //'' "javascript reference".repeat(1); //javascript reference "javascript reference".repeat(2); //.. 2022. 11. 17.
text-overflow 속성은 텍스트가 영역을 벗어 났을 때 속성을 설정합니다. Reference/CSS text-overflow 속성은 텍스트가 영역을 벗어났을 때 속성을 설정합니다. by @webs 2022. 11. 16. text-overflow text-overflow 속성은 텍스트가 영역을 벗어났을 때 속성을 설정합니다. 텍스트가 줄바꿈이 없이 한줄이고 지정한 영역 이외에는 안보이도록 설정해야 text-overflow 속성 설정이 가능합니다. 보통 한줄 효과를 쓸 때 많이 사용합니다. 텍스트가 줄바꿈이 없이 한줄로 표현하려면, white-space: nowrap을 설정하고, 지정한 영역 이외에 안보이도록 설정하려면, overflow: hidden을 설정해야 합니다. 특징 설명 기본값 text-overflow : clip 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(D.. 2022. 11. 16.
text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. Reference/CSS text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. by @webs 2022. 11. 16. text-justify text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. 양쪽 정렬을 할 경우 간격 등에 문제가 생길 수 있기 때문에, 이 부분을 단어 또는 글자 사이에 간격을 조정하여, 정렬을 깔끔하게 할 수 있습니다. 일반적인 영어 보다는 아랍어나 일본어 등에 미세한 조정이 필요할 때 사용합니다. 특징 설명 기본값 text-justify : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. text-justify 속성은 tex.. 2022. 11. 16.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다. Reference/CSS text-indent 속성은 문단 들여쓰기 속성을 설정합니다. by @webs 2022. 11. 15. text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다. 한글에서 들여쓰는 문단의 첫 번째 줄에 빈칸을 만들어 문단이 시작되는 것을 말합니다. text-indent 속성은 빈칸 부분을 설정해 주는 역할을 하며, text-indent: -9999px 속성을 이용하여 글씨를 숨길때 쓰기도 했습니다. 하지만 이 방법은 접근성에 맞지 않으므로 추천하지 않습니다. 특징 설명 기본값 text-indent : 0 적용 text 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) text-indent 속성은 문단 들여쓰기 속성을 설정합니다. text-inde.. 2022. 11. 16.
text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. Reference/CSS text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. by @webs 2022. 11. 9. text-underline-offset text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트에 underline 속성이 설정된 경우와 텍스트 언더라인 스타일이 solid, double, dotted, dashed, wavy인 경우에 설정 가능합니다. 특징 설명 기본값 text-underline-offset : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트 라인과 관련된 속성 text-decorat.. 2022. 11. 15.
footer 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 15. 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크 등을 제공합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. 태그는 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크를 제공합니다. 태그는 연락처 정보를 설정하는 요소가 포함 될 수 있습니다. 섹션과 관련된 태그 태그는 주제별 그룹의 콘텐츠 섹션을 설정.. 2022. 11. 15.
header 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. Reference/HTML 헤더 영역 주제별 영역 내용 독립된 주제 영역 내용 사이드 영역 내용 푸터 영역 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ❌ ❌ ❌ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/sections.html#the-header-element 2022. 11. 15.
aside 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. Reference/HTML 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. by @webs 2022. 11. 15. 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 태그는 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. 섹션과 관련된 태그(Section Related Tag) 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 태그는 주제별 그룹의 .. 2022. 11. 15.
article 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. Reference/HTML 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. by @webs 2022. 11. 15. 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타낼 때 사용하며, 각각의 주제마다 제목도 표시해야 합니다. 태그는 하나의 주제를 나타낸다면, 은 주제를 묶는 독립적인 콘텐츠를 나타내지만, 요소 안에 요소가 올 수 있으며, 요소 안에도 요소가 올 수 있습니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다. 태그는 포럼, 신문기사, 잡지, 블러그 항목, 게시.. 2022. 11. 15.
section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. Reference/HTML section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. by @webs 2022. 11. 14. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 주제별로 제목 요소를 사용하는 것이 좋으며, 문서의 스타일링 요소나, 그룹화 요소가 아닙니다. 스타일 지정 목적이나 그룹화가 필요하다면 태그를 사용합니다. 주요 콘텐츠와 단독으로 콘텐츠를 표현하고 싶다면, , , 요소를 사용하는 것이 적절합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 태그는 식별할 수단이 필요하기 때문에 제목을( ~ )을 설정하는 것을 추천합니다. 태그는 .. 2022. 11. 15.
main 태그는 문서의 주요 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서의 주요 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 14. 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 웹 문서의 핵심이 될 수 있는 내용을 포함하며, 문서에서 한번만 사용이 가능합니다. 개념적 요소의 섹션이기보다는 영역을 표현하기 위한 태그입니다. 그렇기 때문에 DOM 구조에 영향을 미치지 않으며, 정보 제공용을 위한 요소입니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★☆☆ 정의(Definition) 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 태그는 문서의 핵심이 되는 내용을 포함하고 있으며, 사이드 메뉴, 네비게이션 링크, 로고 영역, 검색 영역 등 반복되는 영역은.. 2022. 11. 14.
replaceAll 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다. Reference/Javascript replaceAll 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다. by @webs 2022. 11. 14. replace() replaceAll() 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.replaceAll() 버전(version) ES1 결과값(return) 배열(Array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".replaceAll(찾을 문자열) "문자열".replaceAll(찾을 문자열, 변경할 문자열) "문자열".replaceAll(정규식) "문자열".replaceAll(정규식, 변경할 문자열) "javascript reference".repla.. 2022. 11. 14.
replace 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다. Reference/Javascript replace 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다. by @webs 2022. 11. 10. replace() replace() 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.replace() 버전(version) ES1 결과값(return) 배열(Array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".replace(찾을 문자열) "문자열".replace(찾을 문자열, 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) "javascript reference".replace('javascript', '자바스크립트') .. 2022. 11. 14.
split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다. Reference/Javascript split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다. by @webs 2022. 11. 10. split() split() 메서드는 구분자를 이용하여, 여러개의 문자열(배열)을 반환합니다. 구분자는 문자열에서 끊어야 할 부분을 의미합니다. 정규식 표현도 가능하며, 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. 구분자를 설정하면, 해당 구분자는 삭제되고, 남은 문자열이 배열로 반환됩니다. 특징 설명 유형(type) String.prototype.split() 버전(version) ES1 결과값(return) 배열(Array) 사용성 ★★★★☆ 문법(Syntax) "문자열".split(구분자) "문자열".split(구분자, 제한) on.. 2022. 11. 14.
text-underline-position 속성은 언더 라인의 위치를 설정합니다. Reference/CSS text-underline-position 속성은 언더 라인의 위치를 설정합니다. by @webs 2022. 11. 13. text-underline-position text-underline-position 속성은 언더 라인의 위치를 설정합니다. text-underline이 설정되어 있는 경우 라인의 위치를 under로 설정할 수 있으며, left와 right속성은 글씨가 세로 모드일 경우에 적용이 됩니다. 특징 설명 기본값 text-underline-position : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-underline-position 속성은 언더 라인의 위치를 설정합니다. text-underline-position 요.. 2022. 11. 13.
text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. Reference/CSS text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. by @webs 2022. 11. 9. text-decoration-skip-ink text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. 글씨와 라인이 겹칠 때 어떤 부분을 우선순위로 할지 정해줍니다. 라인의 종류에는 solid, double, dotted, dashed, wavy가 있으며, 글씨 크기나 라인의 크기에 따라 글씨가 겹쳐서 안보이는 경우 설정하기 좋습니다. 특징 설명 기본값 text-decoration-skip-ink : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-decoration-skip-i.. 2022. 11. 12.