CSS 파일은 어느 폴더에 있습니까? 절대 및 상대 링크. 여러 CSS 파일을 하나의 HTML 문서에 연결

28.08.2021

안녕하세요 여러분, 친구들. 오늘은 "CSS 스타일 시트를 HTML 페이지에 연결하는 방법"이라는 가장 간단한 질문에 답하겠습니다.
기사의 비디오 버전:

이렇게 하려면 태그 내용에 다음 줄을 삽입해야 합니다.

설명하겠습니다: 링크 태그를 사용하면 외부 파일을 페이지에 연결할 수 있습니다. rel = “stylesheet” 속성은 포함된 파일이 스타일 시트라는 지침을 제공합니다. Href는 스타일 파일의 경로입니다. 일반적으로 스타일 시트가 그런 식으로 호출되고 연결된 HTML 페이지와 동일한 폴더에 있는 경우 해당 값은 "style.css"입니다.

파일 경로를 지정하는 방법

따라서 CSS 파일이 다른 곳에 있으면 해당 파일의 경로가 다르게 기록됩니다. 더 명확하게 하기 위한 예:
table.css 파일은 HTML 페이지와 동일한 폴더에 있는 스타일 폴더에 있습니다. href = “styles/table.css”
Fonts.css 파일은 CSS 폴더에 있는 스타일 폴더에 있으며, 이 폴더는 HTML 페이지가 있는 위치인 href = “styles/css/fonts.css”에 있습니다.

두 개의 점을 사용하면 원래 위치(html 페이지가 있는 위치)에서 돌아가는 경로를 나타낼 수 있습니다. 따라서 다음과 같이 도달할 수 있습니다.
Href = “../style.css” – 파일은 html 파일보다 한 수준 위에 있습니다.
Href = “../../style.css” – 두 수준 더 높습니다.
Href = “../../../css/style.css” – 3단계 더 높음 + 스타일 파일 자체도 css 폴더에 있습니다.
파일 경로를 설정하는 방법을 완전히 이해하려면 다음 간단한 예제를 이해하시기 바랍니다.

더 이상 사용되지 않는 속성

이전에는 스타일 시트를 연결할 때 링크 태그에 type = “text/css” 속성을 지정해야 했지만 오늘날에는 더 이상 필수 요구 사항이 아닙니다. 브라우저는 이미 모든 것을 완벽하게 이해하고 있습니다. 그러나 이전 브라우저에서 완전한 지원을 받으려면 안전하게 플레이하고 추가할 수 있습니다.

이제 순서대로 고려해 보겠습니다.

앞서 말했듯이 CSS는 html 구조를 디자인하도록 설계되었습니다. 즉, 모양, 색상, 크기, 위치 등을 부여하여 html 코드에 직접적인 영향을 미칩니다.

이 효과를 보장하기 위해 HTML 문서에 CSS 연결이 이루어집니다.

CSS를 포함하는 첫 번째 방법은 링크된 스타일입니다.. 스타일시트를 별도의 파일로 작성할 때 사용됩니다.

이 경우 스타일 시트가 포함된 style.css 파일은 link 태그를 사용하여 head 태그의 html 파일에 연결됩니다.

링크는 단일 태그입니다.

href – 우리에게 친숙한 링크 속성, css/stile.css – 파일 경로와 파일 이름을 나타내는 값

type - 연결할 요소의 유형을 나타내는 속성입니다. 이 경우에는 text/css입니다.

rel은 관계를 정의하는 속성이며 그 값은 일반적으로 스타일시트로 작성됩니다.

이 코드에서는 일반적으로 style.css(연결된 테이블의 이름) 값만 변경됩니다. 테이블이 연결되어 있습니다.

이제 브라우저는 style.css 파일에 작성된 형식으로 html 파일을 표시합니다.

그건 그렇고, 미래를 위해. 하나의 HTML 파일에 원하는 만큼 많은 스타일 시트를 연결할 수 있습니다. 모두 head 태그에 포함되어 있습니다.

그리고 훨씬 더 자주 사용되는 것은 반대로 하나의 테이블이 많은 html 파일에 연결될 수 있다는 것입니다.

이는 스타일 시트를 포함하는 가장 선호되는 방법입니다. 왜냐하면 스타일 시트가 모두 하나의 파일에 있어서 정의하기가 더 쉽기 때문입니다.

또한 동일한 유형의 여러 요소의 스타일을 변경해야 하는 경우 해당 요소를 하나의 그룹 선택기에 모아두면 훨씬 쉽게 수행할 수 있습니다.

사실 웹마스터의 임무 중 하나는 동일한 최종 결과를 유지하면서 코드 양을 줄이는 것이며 별도의 style.css 파일이 이 요구 사항을 가장 완벽하게 충족합니다.

기사 제목을 작성하려면 기사의 크기, 색상, 글꼴 및 기타 스타일을 설정해야 한다고 상상해 보세요. 그리고 각 게시물마다.

style.css 파일에서 스타일을 한 번만 설정할 수 있지만 사이트의 모든 게시물 제목에 대해 적용됩니다.

이제 차이점을 이해하셨나요?

그럼에도 불구하고 스타일을 연결하는 다른 방법도 존재할 권리가 있으므로 해당 방법과 해당 방법이 사용되는 상황을 살펴보겠습니다.

CSS를 연결하는 두 번째 방법은 전역 스타일입니다. HTML 파일에 직접 스타일 시트를 연결(배치)할 수 있습니다.

이는 style 태그를 사용하여 이루어지며, head 태그에서도 첫 번째 경우와 동일한 방식으로 작성됩니다.

제목이 없는 문서

Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.

Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.

Гораздо проще отлаживать документ, если и html и css находятся на одной странице и можно быстро подправить и то, и другое.

Третий способ подключения css — внутренние стили позволяет прописывать стили прямо внутри html тега.

Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.

Применяется он тогда, когда нужно оформить только один элемент контента.

Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span

В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.

Примечание: папку также часто называют директорией или каталогом.

Структура сайта

Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы , изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".

Чтобы вам лучше запомнить, опишем термины отдельно:

Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
Родительский каталог - это папка, содержащая другой каталог.
Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:

요소의 중첩을 보여주는 다이어그램은 다음과 같이 나타낼 수 있습니다.

하위 요소계층 트리에서 그 위에 상위 요소가 있는 요소입니다. 하위 요소라고도 합니다. 어린이.
관련 요소동일한 분기 수준에 있는 동일한 상위 요소의 또 다른 하위 요소입니다. 이러한 요소라고도합니다. 자매 같은, 예에서 이러한 요소는 다음과 같습니다. 그리고 , 그리고 <style> .</li> <li><span>루트 요소</span>- 계층 구조의 최상위 요소( <html>), 다른 모든 요소는 해당 하위 요소입니다.</li> <li><span>상위 요소</span>다른 요소를 포함하는 요소입니다. 때로는 단순히 부모라고 부르기도 합니다.</li> <li>자식은 요소의 직계 자식일 수 있지만 일반적으로 중첩 깊이에 관계없이 다른 요소 내에 중첩된 모든 요소에 대한 일반적인 이름입니다. <head>, <title>, <body>, <p>그리고 <style>요소의 자손입니다 <html>.</li> </ul> <p>이 기사에서는 Joomla 1.5 템플릿에서 가장 필요한 폴더와 파일만 설명할 것입니다. 하지만 앞으로는 (가능한 한 시간이 지나면) 추가 설명으로 기사를 보완할 계획입니다.</p> <h3>Joomla 1.5 템플릿 파일은 어디에 있습니까?</h3> <p>호스팅 또는 서버의 템플릿 폴더 및 파일 위치는 쉽게 확인할 수 있습니다. 모든 템플릿은 특수 폴더에 있습니다 <b>/템플릿</b>. 이는 Joomla 루트 폴더에 있습니다.</p> <p>폴더 열기 <b>/템플릿</b>. 기본적으로 beez, ja_purity, rhuk_milkyway, system과 같은 템플릿이 있는 폴더가 있습니다. 마지막 폴더의 내용을 고려하려면 <b>체계</b>나중에 기사로 다시 돌아오겠습니다. 지금은 rhuk_milkyway 템플릿 폴더의 내용을 살펴보겠습니다.</p> <h3>rhuk_milkyway 템플릿의 폴더 및 파일 목록</h3> <p><b>폴더:</b> <br>1. CSS <br>2.html <br>3. 이미지</p><p><b>파일:</b> <br>1.favicon.ico <br>2.index.html <br>3.index.php <br>4. params.ini <br>5. templateDetails.xml <br>6. template_thumbnail.png</p> <h3>폴더 번호 1. CSS</h3> <p>CSS 폴더에는 템플릿 스타일 파일이 포함되어 있습니다. 여기에서 원하는 만큼 CSS 스타일 파일을 만들 수 있습니다(필요한 경우). 특히 문제의 템플릿에서는 black.css, black_bg.css, blue.css, blue_bg.css, green.css, green_bg.css, ieonly.css, orange.css, orange_bg.css, red.css, red_bg.css, template.css, template_rtl.css, white.css, white_bg.css.</p> <p>정말 많이요? 이 경우 스타일 수는 템플릿의 색 구성표를 변경할 수 있기 때문에 발생합니다. 저는 보통 하나의 파일만 사용합니다. 왜냐하면 직접 템플릿을 만들 때 이렇게 다양한 색상 구성이 포인트가 아닌 것 같아요.</p> <h3>폴더 번호 2. HTML</h3> <p>왜냐하면 Joomla에서는 모든 확장 기능에 필요한 마크업과 자체 스타일을 사용하여 출력할 수 있는 HTML 코드가 있습니다. 개발자는 확장 기능 자체의 파일을 편집하지 않고도 이를 변경할 수 있는 기능을 제공했습니다. 이는 Joomla 또는 확장 기능을 업데이트할 때 변경 사항이 손실되지 않도록 하기 위해 필요합니다. 이렇게 하려면 필요한 파일을 html 폴더에 복사하고 필요에 따라 수정하면 됩니다. 이제 이것이 기사의 내용이 아니기 때문에 이것이 어떻게 올바르게 수행되는지 자세히 설명하지 않겠습니다. :) 그러나 다음 기사 중 하나에서 확실히 설명하겠습니다.</p> <h3>폴더 번호 3. 이미지</h3> <p>여기에 템플릿 이미지가 저장됩니다.</p> <h3>파일 번호 1. favicon.ico</h3> <p>이는 사이트 아이콘인 16x16픽셀 이미지입니다. 아이콘은 브라우저 탭과 관련 검색어에 대한 결과에서 사이트 옆의 일부 검색 엔진에 표시됩니다.</p> <h3>파일 번호 2. index.html</h3> <h3>파일 번호 3. index.php</h3> <p>이 파일은 템플릿의 HTML 마크업용입니다. 여기에는 모듈이 배치될 위치, 구성 요소의 내용이 표시될 위치, 템플릿에 연결될 스타일 파일, 모듈 표시 조건이 기록되어 있습니다. 이 파일은 템플릿의 프레임과 기초에 지나지 않기 때문에 다른 파일보다 더 많이 작업해야 합니다.</p> <h3>파일 번호 4. params.ini</h3> <p>템플릿 설정을 저장하려면 params.ini 파일이 필요합니다. 쓰기 권한 777이 있는 템플릿에 있어야 합니다.</p> <h3>파일 번호 5. templateDetails.xml</h3> <p>templateDetails.xml 파일에는 몇 가지 유용한 기능이 포함되어 있습니다. Joomla 관리 패널을 통해 템플릿을 설치하는 데 사용됩니다. 템플릿 이름, 작성자, 생성 날짜, 버전, 라이센스 등에 대한 정보가 포함되어 있습니다. 템플릿 매개변수.</p> <h3>파일 번호 6. template_thumbnail.png</h3> <p>파일(이미지)은 템플릿의 모양을 보여줍니다. 배포할 때 사이트에 설치하지 않고도 템플릿이 무엇인지 빠르게 확인할 수 있도록 필요합니다. 이미 설치되어 있으면 관리자 패널에서 동일한 기능을 수행합니다.</p> <p>우리는 CSS가 무엇인지 이해하기 위해 조금 노력했던 마지막 강의의 주제를 계속합니다. 먼저 스타일 파일을 생성하여 HTML 파일 옆에 저장해야 합니다. 하지만 웹 사이트를 만드는 과정에서 CSS 확장자를 가진 파일이 여러 개 있을 수 있으므로 해당 파일에 대해 별도의 폴더를 만드는 것이 좋습니다. 그래서 index.html 파일이 저장된 폴더를 열고, 열린 폴더에 폴더를 만들고 이름을 "CSS"로 지정하면 여기에 무엇이 저장되어 있는지 더 쉽게 이해할 수 있습니다. 다음으로, "Notepad++" 편집기인 파일 > 새로 만들기를 열고 문서를 "STYLE"이라는 이름으로 확장자 "CSS"로 저장합니다. 즉, style.css와 같은 모습이어야 합니다. 그리고 두 개의 폴더와 하나의 인덱스 파일이 있습니다.</p> <p><b>그림 1번.</b></p> <p><img src='https://i0.wp.com/xn----7sbqldprbrfejdd6m.xn--p1ai/uploads/posts/2014-02/thumbs/1393062529_lesson_10_1.jpg' width="100%" loading=lazy loading=lazy></p> <h3><span>CSS를 HTML에 연결합니다.</span></h3> <p>style.css 파일이 index.html 파일과 상호 작용할 수 있도록 하려면 "HEAD" 태그 사이에 다음 코드 줄을 배치해야 합니다.</p><p> <link rel="stylesheet" type="text/css" href="css/style.css"> </p><p>가장 먼저 보이는 것은 태그입니다. <link>이는 "통신 채널"로 번역됩니다. 즉, 이제 브라우저에 문서를 연결한 다음 rel 속성(관계) 및 스타일시트(스타일)를 연결하라고 지시합니다. 즉, 이 커뮤니케이션 채널은 스타일과 관련이 있습니다. 그런 다음 "유형", 즉 문서 유형 "text/css"이고 여기서 마지막 중요한 단계는 포함된 파일 자체에 대한 링크인 href="css/style.css"입니다. 여기서 생성된 폴더의 이름을 나타냅니다. 스타일과 스타일 파일 자체.</p> <p><b>그림 2.</b></p> <h3><span>HTML에서 CSS로 스타일을 전송합니다.</span></h3> <p>이전 강의에서는 실제로 전체 HTML 페이지에 스타일을 만들었습니다. 이제 이러한 기성 스타일을 style.css 파일로 전송해야 하며 템플릿의 배경이 있는 BODY 태그부터 시작하겠습니다. CSS 파일에서 다음 body()를 작성합니다. 여기서 BODY는 태그 선택기이고 중괄호는 이 태그의 스타일 규칙이 배치되는 위치입니다. 이제 style 속성이 BODY 태그 뒤에 오는 index.html 파일에서 큰따옴표 사이에 있는 모든 내용을 복사하여 CSS에 붙여넣습니다. 약간 다듬으면 다음과 같아야 합니다.</p><p>본문( 배경 이미지: url("images/fon.jpg"); 배경 첨부: 고정; )</p><p>index.html 파일에서 BODY 태그의 추가 코드를 제거하여 다음과 같이 깔끔하게 유지합니다. <body>마치 우리가 방금 만든 것처럼. 문서의 변경 사항을 저장하고 브라우저에서 확인합니다. 모든 작업이 올바르게 완료되면 페이지의 배경이 사라져야 합니다. 이는 브라우저가 이미지 경로를 찾을 수 없기 때문입니다. 오류의 원인을 찾아보자. 최상위 코드에 주의하세요. 브라우저가 들어와서 배경이 이미지여야 한다는 것을 읽은 다음 URL, 즉 경로를 읽고 이를 봅니다. 그가 들어간 폴더에는 이미지 폴더와 fon.jpg 파일이 있어야 모든 것이 올바른 것 같습니다. 그러나 요점은 브라우저가 CSS 폴더에 들어갔고 이 디렉토리에는 이미지 폴더가 없으며 루트 폴더, 즉 기본 폴더에서 검색을 시작하도록 브라우저에 알려야 한다는 것입니다. 이렇게 하려면 브라우저에 두 개의 점과 슬래시(../)처럼 한 단계 뒤로 들여쓰도록 지시해야 합니다. style.css 파일이 한 폴더 아래에 더 깊은 위치에 있는 경우 두 디렉터리, 즉 중복(../../)으로 돌아가도록 지정해야 합니다. 일반적으로 파일과 문서의 경로(직접 경로와 중첩 경로)를 구별하려면 이를 이해하고 기억하십시오. 이 경우 style.css 파일은 중첩되어 문서에 대한 직접 경로를 가질 수 없습니다.</p><p>본문( 배경 이미지: url("../images/fon.jpg"); 배경 첨부: 고정; )</p><p>이 경로를 수정한 후에는 모든 것이 작동하고 배경이 나타납니다. 이것으로 이번 수업을 마무리하고 숙제로 폴더와 파일 경로의 중첩을 테스트해 보겠습니다. 즉, "STYLES"라는 이름으로 다른 폴더를 만들고 거기에 style.css 문서와 함께 "CSS" 폴더를 넣은 다음 모든 것이 작동하도록 이미지에 대한 올바른 경로를 설정합니다.</p> <p><b><span><i>그리고 다음 강의 "HTML + CSS의 간단한 레이아웃"에서 여러분을 기다리고 있습니다. Lesson No. 11”에서는 나머지 스타일을 모두 전송하고 “CSS”를 사용할 때의 차이점과 장점을 비교해 보겠습니다.</i> </span> </b></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="찾다" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>최근 항목</span></h3> <ul> <li> <a href="https://olegshein.ru/ko/contacts-and-messages/tipovye-neispravnosti-telefonov-lg-problemy-s-lg-g3-poprobuite-nashi-resheniya/">LG 휴대폰의 일반적인 문제</a> </li> <li> <a href="https://olegshein.ru/ko/download/igry-ispolzuyushchie-mnogopotochnost-primenenie-mnogopotochnosti-v/">게임에서 멀티스레딩 사용</a> </li> <li> <a href="https://olegshein.ru/ko/battery-and-power-consumption/kak-zapustit-mobilnye-igry-na-kompyutere-kak-poigrat-v/">컴퓨터에서 전화 게임을 하는 방법</a> </li> <li> <a href="https://olegshein.ru/ko/security/avtomatizaciya-turagentstva-vybiraem-oblachnuyu-crm-sistemu-the-tour--/">투어 - 여행사 및 여행사를 위한 GNU GPL 컴퓨터 프로그램 내 문서 관광 프로그램</a> </li> <li> <a href="https://olegshein.ru/ko/contacts-and-messages/bezymyannaya-papka-kak-sozdat-papku-bez-nazvaniya-i-bez-znachka/">이름도 없고 아이콘도 없는 폴더를 만드는 방법</a> </li> <li> <a href="https://olegshein.ru/ko/error-itunes/android-pay-chto-eto-takoe-i-kak-im-polzovatsya-v-rossii-pochemu-ne-rabotaet/">Android Pay가 작동하지 않는 이유 Android Pay 앱 작동 방식</a> </li> <li> <a href="https://olegshein.ru/ko/application/test-amthauera-test-r-amthauera-test-struktury-intellekta-tsi-test-struktury/">암타우어 테스트. R. Amthauer 테스트, 지능 구조 테스트(TSI) 지능 구조 테스트 cr 3 85</a> </li> <li> <a href="https://olegshein.ru/ko/pots/kak-vernut-zavodskie-nastroiki-navitel-undelete-navigator-kak-vosstanovit-faily/">삭제 취소 네비게이터 삭제 후 파일을 복구하는 방법</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024년 <a href="https://olegshein.ru/ko/" title="olegshein.ru"><span>olegshein.ru</span></a>. Oleg Shein의 컴퓨터 클럽. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">질문이 있으신가요?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">이름</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">이메일 <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">메시지 <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">보내다</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>오타 신고</h2> <div class="mistape_dialog_block"> <h3>편집자에게 전송될 텍스트:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">귀하의 의견(선택사항):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">보내다</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">취소</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html>