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

28.08.2021

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

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

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

파일 경로를 작성하는 방법

따라서 css 파일이 다른 위치에 있으면 경로가 다르게 작성됩니다. 더 명확하게 하기 위한 예:
table.css 파일은 html 페이지와 같은 폴더에 있는 styles 폴더에 있습니다: href = “styles/table.css”
fonts.css 파일은 css 폴더에 있는 styles 폴더에 있으며, 이 폴더는 차례로 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 코드에 직접적인 영향을 줍니다.

이 효과를 제공하기 위해 css를 html 문서에 연결합니다.

CSS를 포함하는 첫 번째 방법은 관련 스타일입니다.. 스타일시트가 별도의 파일로 작성된 경우 적용됩니다.

이때 스타일시트가 있는 style.css 파일은 link 태그를 사용하여 head 태그의 html 파일과 연결됩니다.

<링크 href="css/style.css" type="text/css" rel="stylesheet">
제목이 없는 문서

링크는 단일 태그입니다.

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.인덱스.php <br>4.params.ini <br>5.템플릿세부사항.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. 템플릿 세부 정보.xml</h3> <p>templateDetails.xml 파일에는 몇 가지 유용한 기능이 있습니다. Joomla 관리자 패널을 통해 템플릿을 설치하는 데 사용됩니다. 템플릿 이름, 작성자, 생성 날짜, 버전, 라이선스 등에 대한 정보를 포함합니다. 템플릿 옵션.</p> <h3>파일 #6. template_thumbnail.png</h3> <p>파일(이미지)은 템플릿의 모양을 보여줍니다. 템플릿을 사이트에 설치하지 않고 배포하는 동안 템플릿이 무엇인지 빠르게 확인할 수 있도록 하기 위해 필요합니다. 그리고 이미 설치된 경우 동일한 기능을 수행하지만 관리자 패널에서 수행됩니다.</p> <p>우리는 CSS가 무엇인지 조금 이해하려고 했던 지난 수업의 주제를 계속합니다. 먼저 스타일이 있는 파일을 만들고 HTML 파일 옆에 저장해야 합니다. 단, 사이트를 생성하는 과정에서 CSS 확장자를 가진 파일이 여러 개 있을 수 있으므로 별도의 폴더를 만드는 것이 좋습니다. 그래서 index.html 파일이 저장된 폴더를 열고 열린 폴더에 폴더를 만들고 "CSS"라고 하면 여기에 저장된 내용을 더 쉽게 이해할 수 있습니다. 그런 다음 "메모장 ++"편집기 파일> 새로 만들기를 열고 확장자가 "CSS"인 "STYLE"이름으로 문서를 저장하십시오. 즉, 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 속성(관계)과 스타일시트(스타일)가 연결될 것이라고 말합니다. 즉, 이 커뮤니케이션 채널은 스타일과 관련이 있습니다. 그런 다음 "유형", 즉 "텍스트/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 #11"에서 나머지 스타일을 모두 전송하고 "CSS"를 사용할 때의 차이점과 장점을 비교합니다.</i> </span> </b></p> <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/instructions/kak-zakommentirovat-na-vremya-kod-html-css-ili-php-js-kommentarii-v-html-css/">HTML, CSS, PHP의 주석 Annals comment php</a> </li> <li> <a href="https://olegshein.ru/ko/pots/vstavit-tablicu-v-html-onlain-primer-primenenie-svoistva-width/">예: 너비 속성 적용</a> </li> <li> <a href="https://olegshein.ru/ko/error-itunes/proverit-fail-html-na-oshibki-proverka-css-na-validnost-s-pomoshchyu-css/">CSS 유효성 검사 서비스로 CSS 유효성 검사</a> </li> <li> <a href="https://olegshein.ru/ko/communications-and-the-internet/js-mnogomernye-massivy-mnogomernye-massivy-v-javascript-i-perebor/">JavaScript의 다차원 배열</a> </li> <li> <a href="https://olegshein.ru/ko/oshibki-i-devajjsov/sozdanie-ramok-sredstvami-css-css-border-granicy-elementa-chto-takoe-psevdoelementy-i/">CSS로 테두리 만들기</a> </li> <li> <a href="https://olegshein.ru/ko/application/kakoi-parametr-zadaet-vysotu-elementa-parametry-css-width-i-height-dlya-zadaniya/">html 페이지 요소의 크기를 설정하는 CSS 너비 및 높이 매개변수</a> </li> <li> <a href="https://olegshein.ru/ko/contacts-and-messages/zarabotok-v-internete-bez-vlozhenii-dlya-novichka-s-nulya-mif/">실용적인 조언 및 권장 사항</a> </li> <li> <a href="https://olegshein.ru/ko/the-sounds-and-music/kak-podat-obyavlenie-na-yule-forum-prilozhenie-yula-dlya-kompyutera-chto-predstavlyaet-soboi-servis/">컴퓨터용 Yula 응용 프로그램</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">2022년 <a href="https://olegshein.ru/ko/" title="olegshein.ru"><span>olegshein.ru</span></a>. 올렉 셰인 컴퓨터 클럽. <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>