ch02-form의 HTML 파일 s02_form.html에 다음처럼 스타일을 추가<head>
<meta charset="UTF-8">
<title>form</title>
<style type="text/css">
form {
width:500px;
margin:0 auto; /* 상하 0px, 가운데 정렬 */
}
ul {
padding:0;
margin:0;
list-style:none;
}
ul li {
padding:0;
margin:0 0 10px 0; /* 하단 10px, 그 외 0px */
}
label {
width:150px; /* float 속성을 지정해야 width 속성도 적용됨 */
float:left;
}
</style>
</head>
ch04-semantic에 새 HTML 파일 s02_semantic.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Star Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrap"> <!-- 전체적으로 스타일을 부여하기 위해 전부 감싸는 div 태그를 생성하고 id 부여 -->
<!-- header : 회사의 로고, 검색 상자 등 -->
<header id="page_header">
<h1>Star Blog</h1>
<!-- nav : 페이지 연결 링크 -->
<nav>
<ul>
<li><a href="1.html">최근 글</a></li>
<li><a href="2.html">이전 글</a></li>
<li><a href="3.html">공헌자 글</a></li>
<li><a href="4.html">연락처</a></li>
</ul>
</nav>
</header>
<!-- section : 페이지의 논리적 영역(내용 부분) -->
<section id="posts">
<article class="post"> <!-- article 태그는 section 태그 내에 여러 개 사용할 가능성이 있으므로 id 대신 클래스 부여 -->
<!-- 내용의 작은 제목 -->
<header>
<h2>얼마나 많이 기록해 둬야 되겠습니까?</h2>
<p>Posted by Brain on 2021. 12. 16.</p>
</header>
<!-- aside : 인용구, 덧붙이고 싶은 생각, 관련된 링크 -->
<aside>
<p>"물건을 팔 때는 거절할 기회를 주어선 안 됩니다."</p>
</aside>
<p>
물건을 팔 때의 대원칙은, 고객이 빈 손으로 돌아가게 만들면 이미 글렀다는 겁니다.
물건을 팔 때의 대원칙은, 고객이 빈 손으로 돌아가게 만들면 이미 글렀다는 겁니다.
물건을 팔 때의 대원칙은, 고객이 빈 손으로 돌아가게 만들면 이미 글렀다는 겁니다.
</p>
<p>
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
대화가 끊어지지 않게 이어나가는 한 가지 요령을 알려드리죠.
</p>
<!-- 내용에 대한 반복적인 문구 -->
<footer>
<p>
<a href="comments.html">25 Comments</a>
</p>
</footer>
</article>
</section>
<!-- 사이드 바 -->
<section id="sidebar">
<nav>
<h3>이전 글</h3>
<ul>
<li><a href="5.html">2021년 5월</a></li>
<li><a href="6.html">2021년 6월</a></li>
<li><a href="7.html">2021년 7월</a></li>
<li><a href="8.html">2021년 8월</a></li>
<li><a href="9.html">2021년 9월</a></li>
<li><a href="10.html">2021년 10월</a></li>
<li><a href="11.html">2021년 11월</a></li>
<li><a href="12.html">2021년 12월</a></li>
</ul>
</nav>
</section>
<!-- footer : 저작권이나 사이트 소유자에 대한 정보 등 -->
<footer id="page_footer">
<p>© Star Blog</p>
<nav>
<ul>
<li><a href="home.html">홈페이지</a></li>
<li><a href="contact.html">회사 소개</a></li>
<li><a href="address.html">연락처</a></li>
<li><a href="board.html">게시판</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
ch04-semantic에 새 CSS 파일 style.css 생성
@charset "UTF-8";
/* 여백 및 기본적인 폰트를 설정 */
body {
margin:0;
padding:0;
font-family:Arial, "MS Trebuchet", sans-serif; /* 폰트는 ,를 구분자로 여러 개를 나열할 수 있고, 폰트명에 공백이 있을 경우에는 큰따옴표로 감싸야 함 */
}
/* 페이지의 내용을 가운데에 놓음 */
#wrap {
width:960px;
margin:0 auto;
}
/* 헤더의 너비를 정함 */
header#page_header {
width:100%;
}
/* 내비게이션 목록의 기호/문자 제거 */
header#page_header nav ul, footer#page_footer nav ul {
list-style:none;
margin:0;
padding:0;
}
/* 내비게이션을 가로 바 형태로 만들기 */
header#page_header nav ul li, footer#page_footer nav ul li {
padding:0;
margin:0 20px 0 0; /* 우측 20px, 그 외 0px */
display:inline;
}
p {
margin:0 0 20px 0; /* 하단 20px, 그 외 0px */
}
/* 가로 방향으로 표시 */
section#posts {
width:74%;
float:left;
}
section#posts aside {
width:35%;
float:right; /* aside 태그 다음에 오는 본문 p 태그들의 경우, section#posts의 float:left를 상속받음 */
margin-left:5%;
font-size:20px;
line-height:40px;
}
section#sidebar {
width:25%;
float:left;
}
/* float를 해제해서 page_footer를 페이지 하단에 안착시키기 */
footer#page_footer {
clear:both;
width:100%;
text-align:center;
}
ch14-cssTable 생성 후 새 HTML 파일 s01_table.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table에 스타일 추가</title>
<style type="text/css">
table {
width:500px;
margin:0 auto;
border:solid 1px orange; /* CSS에서는 table 태그에 border 속성 지정시 표 전체의 테두리만 표시되고 각 셀의 테두리는 표시되지 않음 */
border-collapse:collapse; /* 기본값은 테이블 전체 테두리와 각 셀의 테두리를 별개로(=두 줄로) 표시하며, collapse로 지정하면 병합하여(=한 줄로) 표시함 */
}
th {
border:solid 1px orange; /* CSS에서 table 각 셀의 테두리는 셀 태그에서 border 속성을 지정해야 표시됨 */
padding:5px;
background-color:#fc6;
color:white;
}
td {
border:solid 1px orange; /* CSS에서 table 각 셀의 테두리는 셀 태그에서 border 속성을 지정해야 표시됨 */
height:100px;
text-align:center; /* 가로 방향 정렬 */
vertical-align:top; /* 세로 방향 정렬; 기본값은 middle */
}
tr.bg td {
color:#000;
background-color:#eaf2d3;
vertical-align:bottom;
}
caption {
color:#f60;font-size:11pt;font-weight:bold;margin-bottom:5px;
}
</style>
</head>
<body>
<table>
<caption>table에 스타일 추가</caption>
<tr>
<th>상품명</th>
<th>기능</th>
<th>단가</th>
</tr>
<tr>
<td>서울</td>
<td>인천</td>
<td>광주</td>
</tr>
<tr class="bg">
<td>하늘</td>
<td>바다</td>
<td>산</td>
</tr>
</table>
</body>
</html>
s02_div.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
<style type="text/css">
div.a {
width:500px;
height:100px;
border:1px solid orange;
text-align:center; /* 가로 방향 정렬 */
vertical-align:middle; /* 세로 방향 정렬이 되지 않음 */
}
div.b {
width:500px;
height:100px;
border:1px solid orange;
display:flex; /* 화면 크기에 따라 레이아웃의 배치나 크기를 조절할 때 사용 */
justify-content:center; /* 가로 방향 정렬; flex-start로 지정하면 왼쪽 정렬, center로 지정하면 가운데 정렬, flex-end로 지정하면 오른쪽 정렬 */
align-items:center; /* 세로 방향 정렬; flex-start로 지정하면 상단 정렬, center로 지정하면 중앙 정렬, flex-end로 지정하면 하단 정렬 */
}
</style>
</head>
<body>
<div class="a"><span>콩돌</span></div>
<div class="b"><span>밤돌</span></div>
</body>
</html>
ch15-transform 생성 후 새 HTML 파일 s01_rotate.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style type="text/css">
/*
속성
transform
값
rotate(각도) : 요소를 지정한 각도만큼 회전시킴; 각도는 도(degree)를 사용하거나 라디안 값을 사용
*/
.myphoto {
position:absolute;
left:50px;
top:70px;
transform:rotate(15deg);
}
</style>
</head>
<body>
<img class="myphoto" src="../images/cross.jpg">
</body>
</html>
s02_scale.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scale</title>
<style type="text/css">
/*
속성
transform
값
scale(sx,sy) : 가로로 sx만큼, 세로로 sy만큼 확대; sy값 생략시 sx값과 동일하다고 가정; 1이 원본 비율을 의미함
scaleX(sx) : 가로로 sx만큼 확대; scale(sx,1)과 같음
scaleY(sy) : 세로로 sy만큼 확대; scale(1,sy)와 같음
*/
.myphoto {
position:absolute;
left:150px;
top:120px;
transform:scale(1.5,1.5); /* 가로, 세로 1.5배만큼 확대 */
}
</style>
</head>
<body>
<img src="../images/cross.jpg">
<img class="myphoto" src="../images/cross.jpg">
</body>
</html>
s03_skew.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>skew</title>
<style type="text/css">
/*
속성
transform
값
skew(각도,각도) : 첫 번째 각도는 x축상에서의 왜곡 각도, 두 번째 각도는 y축상에서의 왜곡 각도; 두 번째 각도 생략시 y축 왜곡 각도는 0으로 간주
skewX(각도) : x축을 따라 주어진 각도만큼 왜곡
skewY(각도) : y축을 따라 주어진 각도만큼 왜곡
*/
.myphoto {
position:absolute;
left:50px;
top:70px;
transform:skew(10deg,10deg); /* 음수값도 지정 가능 */
}
</style>
</head>
<body>
<img class="myphoto" src="../images/cross.jpg">
</body>
</html>
s04_translate.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>translate</title>
<style type="text/css">
/*
속성
transform
값
translate(tx,ty) : x축으로 tx만큼, y축으로 ty만큼 이동; ty값 생략시 0으로 간주
translateX(tx) : tx만큼 x축 방향으로 이동
translateY(ty) : ty만큼 y축 방향으로 이동
*/
.myphoto {
position:absolute;
left:30px;
top:30px;
transform:translate(200px,100px); /* 양수값은 각각 오른쪽, 아래쪽으로 이동하며 음수값은 반대 방향으로 이동 */
}
</style>
</head>
<body>
<img class="myphoto" src="../images/cross.jpg">
</body>
</html>
ch16-media 생성 후 새 HTML 파일 s01_media.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역
속성
width : 뷰포트의 너비; device-width 또는 직접 크기 지정; 기본값은 브라우저의 기본값
height : 뷰포트의 높이; device-height 또는 직접 크기 지정; 기본값은 브라우저의 기본값
user-scalable : 확대/축소 기능 허용 여부; yes 또는 no를 지정; 기본값은 yes
initial-scale : 초기 확대/축소 값; 1~10 사이의 값을 사용 가능; 기본값은 1
minimum-scale : 최소 확대/축소 값; 0~10 사이의 값을 사용 가능; 기본값은 0.25
maximum-scale : 최대 확대/축소 값; 0~10 사이의 값을 사용 가능; 기본값은 1.6
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>media query</title>
<style type="text/css">
/* 992px 이상 */
@media screen and (min-width:992px) { /* and로 연결시에는 좌우에 공백이 있어야 함 */
h1 {color:darkturquoise;}
ul {
list-style:none;
}
ul li {
background-color:darkturquoise;
color:white;
display:inline;
}
}
/* 768px ~ 991px */
@media screen and (min-width:768px) and (max-width:991px) {
h1 {color:powderblue;}
ul {
list-style:none;
}
ul li {
display:inline;
background-color:powderblue;
}
}
/* 767px 이하 */
@media screen and (max-width:767px) {
h1 {color:crimson;}
ul {
list-style:none;
}
}
</style>
</head>
<body>
<h1>미디어 쿼리</h1>
<ul>
<li>서울</li>
<li>인천</li>
<li>광주</li>
<li>부산</li>
<li>대구</li>
</ul>
</body>
</html>
s02_home.html 생성<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sublime with Stata</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Lato:400,300,300italic,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='//fonts.googleapis.com/css?family=Fjalla+One&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrap">
<!-- 로고, 메뉴, 배너 -->
<header>
<!-- 데스크탑 로고, 메뉴 -->
<div id="page-top" class="noselect">
<h1><a href="#">Sublime with Stata</a></h1>
<nav>
<ul>
<li><a href="#enghome.html">KOR2ENG</a></li>
<li><a href="s02_home.html">HOME</a></li>
<li><a href="#install.html">INSTALL</a></li>
<li><a href="#tweaks.html">TWEAKS</a></li>
<li><a href="#shortcuts.html">SHORTCUTS</a></li>
<li class="dropdown"><a href="#markdown.html">MARKDOWN</a>
<ul class="dropdown-menu">
<li><a href="#PlainNotes">PlainNotes</a></li>
<li><a href="#MarkdownEditing">MarkdownEditing</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- 모바일 로고, 메뉴 -->
<div id="mobile-page-top" class="noselect">
<h1><a href="#">Sublime with Stata</a></h1>
<nav>
<ul>
<li class="dropdown">
<input type="checkbox" id="toggle_checkbox">
<label class="dropdown" for="toggle_checkbox">
<div></div>
<div></div>
<div></div>
</label>
<ul class="dropdown-menu">
<li><a href="#enghome.html">KOR2ENG</a></li>
<li><a class="active" href="s02_home.html">HOME</a></li>
<li><a href="#install.html">INSTALL</a></li>
<li><a href="#tweaks.html">TWEAKS</a></li>
<li><a href="#shortcuts.html">SHORTCUTS</a></li>
<li class="dropdown"><a href="#markdown.html">MARKDOWN</a>
<ul class="dropdown-menu">
<li><a href="#PlainNotes">PlainNotes</a></li>
<li><a href="#MarkdownEditing">MarkdownEditing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- 배너 -->
<div id="page-banner">
<hgroup>
<h1>RUN STATA WITHIN SUBLIME TEXT 3</h1>
<p>A Lot Better Than Before</p>
</hgroup>
</div>
</header>
<!-- 내용 -->
<section id="contents">
<header>
<h1>MAIN FEATURES</h1>
</header>
<ul>
<li>문법 강조 지원--<a href="https://w3bits.com/sublime-text-themes/">다채로운 배색</a> 중 원하는 것을 골라 보세요!
<ul>
<li>문법 강조는 코딩 실수를 줄이는 데 중요한 역할을 하지만, Stata 기본 편집기의 문법 강조는 전혀 눈에 띄지 않습니다. 16버전에서 다크 모드를 지원하면서 사정이 약간 나아졌지만, Stata 기본 편집기는 여전히 겨우 한 가지의 추가 배색 선택지를 제공할 뿐입니다. 대조적으로, 서브라임 텍스트의 세계에는 <a href="https://colorsublime.github.io/">수백 가지의 배색</a> 및 <a href="https://packagecontrol.io/browse/labels/theme">UI 테마</a>가 존재합니다.</li>
</ul>
</li>
<li><a href="multipleauto.png">자동 완성 지원</a>
<ul>
<li>Stata 기본 편집기는 16버전에서도 기껏해야 현재 편집 중인 do-file 내에 존재하는 단어들의 자동 완성만 지원하고 있습니다. 서브라임 텍스트의 윈도우용 Stata 연동 플러그인은 변수명, 함수명, 자주 사용되는 기본 명령어들, 루프문의 자동 완성을 추가적으로 지원합니다. 서브라임 텍스트의 맥용 Stata 연동 플러그인은 기본 명령어와 몇몇 인기 있는 사용자-작성-명령어들, 루프문의 자동 완성을 추가적으로 지원합니다. 뿐만 아니라, 서브라임 텍스트에서는 <a href="http://docs.sublimetext.info/en/latest/extensibility/snippets.html">사용자가 직접 자동 완성 코드를 추가</a>할 수도 있습니다.</li>
</ul>
</li>
<li><a href="brackethl.png">괄호 강조 지원</a>
<ul>
<li>서브라임 텍스트의 괄호 강조 패키지는 do-file 내에서 현재 커서가 위치한 괄호와 그 짝을 함께 강조하며, 짝이 맞지 않는 괄호들을 감지하여 문제되는 행 번호 앞에 물음표를 띄웁니다. 사용자는 괄호가 연달아 붙어 있건, 여러 행 간격을 두고 한참 떨어져 있건 관계없이 괄호로 묶이는 코드의 범위를 쉽게 식별할 수 있으며, Stata가 지적하기 전에 코드의 오류를 교정할 수 있습니다.</li>
</ul>
</li>
<li><a href="colorpicker.png">색상 강조 및 삽입 지원</a>
<ul>
<li>서브라임 텍스트에서는 do-file 내에 색상 헥스 코드나 색상 이름이 있는 경우, 어떤 색상인지를 서브라임 텍스트 창에서 직접 확인하는 것이 가능합니다. 나아가, 색상표에서 원하는 색을 골라 대응하는 헥스 코드를 do-file 내에 바로 삽입하는 것도 가능합니다. <a href="http://repec.sowi.unibe.ch/stata/grstyle/grstyle-set.html#h-4-2">SSC 명령어 -grstyle-을 이용</a>한다면, 단축키 입력 한 번과 마우스 클릭 한 번으로 그래프의 색상을 바라는 대로 변경할 수 있습니다.</li>
</ul>
</li>
<li>그리고 Stata 기본 편집기와 정확히 동일한 단축키로 do-file을 실행할 수 있습니다!
<ul>
<li>물론, <a href="https://www.sublimetext.com/docs/3/key_bindings.html">입맛대로 단축키를 변경하는 것 역시 가능합니다.</a></li>
</ul>
</li>
</ul>
<hr>
<div id="contact" class="noselect"><a href="#contact.html">Contact Information</a></div>
<div id="note">마지막 갱신: 2019년 12월 13일<br>
주: IE는 코드 복사시 행 번호를 제외할 수 없습니다</div>
</section>
<!-- 사이트 정보 -->
<footer id="page-footer">
<p>이 페이지는 JavaScript를 사용하지 않고 제작되었습니다.</p>
<nav>
<ul>
<li><a href="#">위로 가기</a></li>
<li><a href="https://ezstata.weebly.com">원본 페이지</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
style.css 생성@charset "UTF-8";
/* 전체 */
@font-face { font-family: NanumSquare; src: url('NanumSquareR.woff2') format('woff2'), url('NanumSquareR.woff') format('woff'), url('NanumSquareR.ttf') format('truetype'); font-display: swap; }
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #666;
background: #222121;
font-family: 'Lato', 'NanumSquare', 'Noto Sans CJK KR', 'Noto Sans KR', 'Noto Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 24px;
}
#wrap {
background: #fff;
}
h1 {
font-family: 'Fjalla One', sans-serif;
font-weight: normal;
}
/* 링크 효과 */
a {
text-decoration: none;
color: #9789e8;
}
a:hover {
color: #8474e4;
transition: color 0.5s ease;
}
/* 드래그 효과 */
:not(img) ::selection {
color: #fff;
background-color: rgb(151 137 232 / 99.6%);
}
img ::selection {
color: #fff;
background-color: rgb(151 137 232 / 60%);
}
#page-banner ::selection {
color: #fff;
background-color: rgb(151 137 232 / 60%);
}
footer ::selection {
color: #999;
background-color: transparent;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
/* 데스크탑 머리말 */
#page-top {
width: 100%;
height: 80px;
margin: 0;
padding: 0;
color: #fff;
background: rgb(0 0 0 / 0.9);
border-top: 5px solid #9789e8;
position: fixed;
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
#page-top a, #page-header a:hover {
color: #fff;
}
#page-top h1 {
height: 75px;
margin: 0;
padding: 25px;
font-size: 1.5rem;
}
#page-top nav {
margin: 0 0 0 auto;
padding: 0;
}
#page-top ul {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
display: inline-flex;
}
#page-top ul li {
height: 75px;
padding: 25px 20px;
}
#page-top ul li:hover {
background: #9789e8;
transition: background-color 0.5s ease;
}
/* hover시에만 서브메뉴 보이게 하기 */
#page-top ul.dropdown-menu {
position: fixed;
top: 80px;
right: 0px;
display: flex;
flex-direction: column;
visibility: hidden;
opacity: 0;
transition: visibility 0.25s ease-out, opacity 0.5s ease;
text-transform: capitalize;
font-size: 0.9rem;
font-weight: normal;
}
#page-top ul.dropdown-menu li {
height: 40px;
margin: 0;
padding: 10px 60px 10px 20px;
background: rgb(0 0 0 / 0.9);
}
#page-top ul.dropdown-menu li:hover {
border-left: solid 5px #8474e4;
transition: border-left 0.5s ease;
}
#page-top li.dropdown:hover ul.dropdown-menu {
visibility: visible;
opacity: 1;
}
/* 모바일 머리말 */
#mobile-page-top {
width: 100%;
height: 80px;
margin: 0;
padding: 0;
color: #fff;
background: rgb(0 0 0 / 0.9);
border-top: 5px solid #9789e8;
position: fixed;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-transform: uppercase;
text-align: center;
}
#mobile-page-top a, #mobile-page-top a:hover {
color: #fff;
}
#mobile-page-top h1 {
height: 75px;
margin: 0;
padding: 25px;
font-size: 1.5rem;
}
#mobile-page-top nav {
margin: 0 0 0 auto;
}
#mobile-page-top nav a:hover {
color: #9789e8;
transition: color 0.5s ease;
}
#mobile-page-top ul {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
}
#mobile-page-top nav > ul {
flex-wrap: nowrap;
}
/* 클릭시에만 hamburger menu 보이게 하기 */
#mobile-page-top .dropdown-menu {
visibility: hidden;
opacity: 0;
transition: visibility 0.25s ease-out, opacity 0.5s ease;
background: rgb(0 0 0 / 0.9);
}
#mobile-page-top .dropdown-menu li {
padding: 0 50px 25px;
}
#mobile-page-top .dropdown-menu li a.active {
color: #8474e4;
}
#mobile-page-top #toggle_checkbox {
display: none;
}
#mobile-page-top label {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 75px;
margin: 0;
padding: 15px 0;
cursor: pointer;
}
#mobile-page-top #toggle_checkbox:checked ~ .dropdown-menu {
visibility: visible;
opacity: 1;
}
/* 클릭시 hamburger menu 버튼 모양 토글하기 */
#mobile-page-top label div
{
width: 30px;
height: 3px;
margin: 0 auto;
background-color: #fff;
transition: 0.25s ease transform, 0.25s ease width;
}
#mobile-page-top #toggle_checkbox:checked + label div:first-child
{
width: 36px;
transform-origin: top left;
transform: rotateZ(45deg);
}
#mobile-page-top #toggle_checkbox:checked + label div:last-child
{
width: 36px;
transform-origin: bottom right;
transform: translate(-12.6px, 0.6px) rotateZ(45deg);
}
#mobile-page-top #toggle_checkbox:checked + label div:nth-child(2)
{
width: 36px;
transform-origin: bottom left;
transform: translateY(12px) rotateZ(-45deg);
}
/* hover시에만 서브메뉴 보이게 하기 */
#mobile-page-top ul.dropdown-menu ul.dropdown-menu {
display: none;
visibility: hidden;
opacity: 0;
transition: visibility 0.25s ease-out, opacity 0.5s ease;
text-transform: capitalize;
font-size: 0.9rem;
font-weight: normal;
background: rgb(0 0 0 / 0);
}
#mobile-page-top ul.dropdown-menu ul.dropdown-menu li {
margin: 0;
padding: 25px 0 0;
}
#mobile-page-top ul.dropdown-menu li.dropdown:hover ul.dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
}
/* 배너 */
#page-banner {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 0;
padding: 175px 0;
color: #fff;
background-color: #222121;
background-image: url(sublime-bg-8.png);
background-image: linear-gradient(to bottom, rgb(0 0 0 / 25%), rgb(0 0 0 / 0%)), url(sublime-bg-8.png);
background-repeat: no-repeat;
background-size: cover;
font-style: italic;
text-align: center;
}
#page-banner h1 {
font-size: 3rem;
line-height: 3rem;
}
#page-banner p {
margin-top: 100px;
font-size: 1.5rem;
line-height: 1.5rem;
font-weight: bold;
}
/* 본문 */
section {
width: 960px;
margin: 0 auto;
font-size: 1.2rem;
line-height: 2rem;
}
#contents {
padding: 0 25px;
}
section li {
margin-bottom: 1rem;
font-weight: bold;
}
section li li {
list-style-type: disc;
font-weight: normal;
}
hr {
margin: 50px 0;
}
#contact {
float: left;
margin: 0 0 50px 0;
padding: 10px;
}
#contact a {
display: inline-block;
margin: 0;
padding: 10px;
border: 3px solid #8474e4;
color: #fff;
background: #8474e4;
text-transform: uppercase;
text-align: left;
}
#contact a:hover {
color: #000;
border: 3px solid #000;
background: transparent;
transition: all 0.5s ease;
}
#note {
float: right;
margin: 0 0 50px 0;
padding: 10px 0;
text-align: right;
font-size: 0.8em;
line-height: 1.6em;
font-weight: normal;
font-style: italic;
}
/* 꼬리말 */
#page-footer {
margin: 0 0 50px 0;
padding: 50px;
clear: both;
color: #666;
background: #222121;
text-align: center;
}
#page-footer ul {
margin: 0;
padding: 0;
}
#page-footer ul li {
margin: 0 20px;
padding: 0;
list-style: none;
display: inline-flex;
text-transform: uppercase;
}
#page-footer ul li a {
color: #666;
}
#page-footer ul li a:hover {
color: #999;
}
/* 반응형 */
@media screen and (min-width:993px) {
#mobile-page-top {
display: none;
}
}
@media screen and (max-width:992px) {
#page-top {
display: none;
}
section {
width: 100%;
}
}
@media screen and (max-width:500px) {
#mobile-page-top {
justify-content: center;
}
#mobile-page-top > h1 {
display: none;
}
#mobile-page-top > nav {
margin: 0;
}
}