[section] service

service 부분은 부트스트랩의 grid 를 이용해서 가장 기본적인 형태의 3단 형식의 레이아웃 디자인으로 이루어 졌습니다.

또한 이번까지 전체적인 main.css 소스를 공유하고 이후부터는 내용이 많아 지므로 추가 되는 부분만 정리 해서 올리겠습니다.

특별한 기능 추가 없다면 functions.php 파일에 css, js 등록 > 내용 추가(index.php) > css(main.css) 정리 의 순서로 이루어 지며 반복적으로 코딩되는 부분은 그 만큼 많이 사용되는 부분이니 꼭 숙지 하면서 넘어가시기 바랍니다.

main.css

	@charset "utf-8";

	/* ==========================================================================
	ì›¹ ì ‘ê·¼ì„±
	========================================================================== */
	.screen-reader-text {
	border: 0;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	}

	/* ==========================================================================
	í…ìŠ¤íŠ¸
	========================================================================== */
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
	color: rgba(0, 0, 0, 0.65);
	font-family: "Spoqa Han Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.6rem;
	font-weight: 300; }

	.font__eng {
	font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
	}

	/* ==========================================================================
	Button
	========================================================================== */
	.zeein-button {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 600;
	border: 2px solid white;;
	padding: 0.8rem 1.5rem;
	background: none;
	color: white;
	font-size: 0.8rem;
	line-height: 0.8rem;
	display: inline-block;
	border-radius: 100px;
	cursor: pointer;
	transition: all 0.25s ease; }
	.zeein-button:active,
	.zeein-button:focus,
	.zeein-button:hover {
	color: black;
	text-decoration: none;
	background-color: #FBD04B;
	border-color: rgba(255, 255, 255, 0.4);
	outline: none;
	}

	/* ==========================================================================
	Logo & Navigation
	========================================================================== */
	/* ëª¨ë°”ì¼ í–„ë²„ê±° ë©”ë‰´ */
	.menu-toggle {
	position: absolute;
	top: 10px;
	right: 15px;
	display: none;
	text-indent: -9999rem;
	border: none;
	padding: 0;
	width: 40px;
	height: 40px;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0); }

	.menu-toggle:active,
	.menu-toggle:focus {
	cursor: pointer;
	outline: none; }
	.menu-toggle span,
	.menu-toggle span::before,
	.menu-toggle span::after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 4px;
	background-color: black;
	transition-duration: 0.15s, 0.15s;
	transition-delay: 0.15s, 0s; }
	.menu-toggle span {
	top: 18px; }
	.menu-toggle span::before {
	top: -12px;
	transition-property: top, transform; }
	.menu-toggle span::after {
	bottom: -12px;
	transition-property: bottom, transform; }
	.menu-toggle[aria-expanded="true"] span {
	background-color: rgba(0, 0, 0, 0); }
	.menu-toggle[aria-expanded="true"] span::before {
	top: 0;
	transform: rotate(45deg); }
	.menu-toggle[aria-expanded="true"] span::after {
	bottom: 0px;
	transform: rotate(-45deg); }
	.menu-toggle[aria-expanded="true"] span::before,
	.menu-toggle[aria-expanded="true"] span::after {
	transition-delay: 0s, 0.15s; }

	/* ë¡œê³ ë° ë©”ë‰´ */
	.site-header {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	transition: all 0.25s ease-in-out; }

	/* ë¡œê³ */
	.site-header .site-branding {
	position: absolute;
	display: inline;
	top: 50px;
	width: 83px;
	z-index: 10; }

	/* ë©”ë‰´ */
	.site-header .main-navigation {}
	.site-header .main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0; }
	.site-header .main-navigation .menu-main-container { }
	.site-header .main-navigation .menu-main-container ul.nav-menu {
	position: absolute;
	right: 0; }
	.site-header .main-navigation .menu-main-container ul li {
	float: left; }
	.site-header .main-navigation .menu-main-container ul li a {
	background-color: transparent;
	color: white;
	padding: 60px 15px 30px;
	display: inline-block;
	font-size: 1rem;
	line-height: 1rem;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 600;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease-in-out; }
	.site-header .main-navigation .menu-main-container ul li a:active,
	.site-header .main-navigation .menu-main-container ul li a:hover {
	color: black;
	background-color: rgba(251, 207, 75, 0.8); }


	.site-content {
	/* margin-top: 1400px; */
	}
	/* ==========================================================================
	Slick Slider
	========================================================================== */
	/* ë©”ì¸ ìŠ¬ë¼ì´ë“œ */
	.slick-slider-wrap { }
	.slick-slider-wrap .slick-slider {}
	.slick-slider-wrap .slick-slider .slick-arrow {
	position: absolute;
	font-size: 0;
	line-height: 0;
	z-index: 50;
	border: none;
	background: none;
	outline: none;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	opacity: 0.5;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s ease; }
	.slick-slider-wrap .slick-slider .slick-arrow.slick-next {
	right: 10px;
	}
	.slick-slider-wrap .slick-slider .slick-arrow.slick-prev {
	left: 10px;
	}
	.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before,
	.slick-slider-wrap .slick-slider .slick-arrow.slick-prev::before {
	content: '\e800';
	font-family: 'fontello';
	color: white;
	display: inline-block;
	font-size: 1rem;
	line-height: 1.2rem;
	}
	.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before {
	content: '\e801';
	}
	.slick-slider-wrap .slick-slider .slick-arrow:active,
	.slick-slider-wrap .slick-slider .slick-arrow:hover {
	opacity: 1;
	}
	.slick-slider-wrap .slick-slider .slick-dots {
	position: absolute;
	font-size: 0;
	line-height: 0;
	margin: 0;
	padding: 0;
	left: 50%;
	transform: translateX(-50%);
	bottom: 3rem;
	list-style: none; }
	.slick-slider-wrap .slick-slider .slick-dots li {
	float: left; }
	.slick-slider-wrap .slick-slider .slick-dots li button {
	font-size: 0;
	line-height: 0;
	border: none;
	background: none;
	outline: none;
	cursor: pointer;
	padding: 0;
	width: 22px;
	height: 22px;
	opacity: 0.3;
	transition: opacity 0.5s ease; }
	.slick-slider-wrap .slick-slider .slick-dots li button::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: white;
	border-radius: 100%;
	}
	.slick-slider-wrap .slick-slider .slick-dots li.slick-active button { opacity: 1; }
	.slick-slider-wrap .slick-slider .slick-dots li.slick-active button::before {
	width: 12px;
	height: 12px;
	}


	.slick-slider-wrap .slick-slider .slick-slide {
	position: relative;
	height: 70vh;
	background-color: black;
	outline: none;
	transition: height 0.3s ease; }
	.slick-slider-wrap .slick-slider .slick-slide .bg-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transition: all 0.3s ease-in-out; }
	.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.init {
	opacity: 0.3;
	}
	.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-1 {
	background-image: url('/wp-content/uploads/2017/11/top-slide-01.jpg');
	}
	.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-2 {
	background-image: url('/wp-content/uploads/2017/11/top-slide-02.jpg');
	}
	.slick-slider-wrap .slick-slider .slick-slide .div-content {
	position: relative;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	text-align: center;
	color: white;
	}

	/* ==========================================================================
	Global & Section
	========================================================================== */
	/*
	light yellow - #FFDC71;
	yellow - #FBD04B;
	orange - #FBBB4B;
	dark orange - #FC9E21;
	light gray - #F2F2F2;
	dark gray - #1D1D1D;

	*/

	/* basic */
	/* Header font type */
	h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 1rem;
	color: black; }

	h1.bar,
	h2.bar,
	h3.bar,
	h4.bar,
	h5.bar,
	h6.bar {
	overflow: hidden; }

	h1.bar::after,
	h2.bar::after,
	h3.bar::after,
	h4.bar::after,
	h5.bar::after,
	h6.bar::after {
	content: '';
	display: inline-block;
	height: 1rem;
	vertical-align: bottom;
	width: 100%;
	margin-right: -100%;
	margin-left: 0.6rem;
	border-bottom: 1px solid #F2F2F2; }

	h1 {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 64px;
	font-weight: 300;
	color: white;
	transition: all 0.3s ease; }
	h1 strong {
	color: #FBD04B; }

	h3 {
	font-size: 36px;
	font-weight: 300; }
	h4 {
	font-size: 30px;
	font-weight: 600; }
	h5 {
	font-family: 'Libre Baskerville', serif;
	font-size: 28px;
	font-weight: 300;
	color: white; }
	h6 {
	font-size: 1rem;
	font-weight: 600; }
	p.lead {
	font-size: 20px;
	font-weight: 300; }
	hr {
	border-top-color: #F2F2F2;
	margin-top: 2rem;
	margin-bottom: 2rem; }
	.fs-14 {
	font-size: 14px; }
	.fw-300 {
	font-weight: 300; }

	/* div-box-wrap */
	.div-box-wrap {
	background-color: #FBD04B;
	height: 100%;
	padding: 1rem;
	margin-bottom: 1rem;
	}
	.div-box-wrap figure {
	padding: 1rem 0;
	}
	.div-box-wrap figure img {
	width: 100px;
	height: auto;
	}

	section {
	padding: 5rem 0; }
	section.bg-light-gray {
	background-color: #F2F2F2; }
	section.bg-dark-gray {
	background-color: #1D1D1D;
	color: white; }
	section.bg-dark-gray h1,
	section.bg-dark-gray h2,
	section.bg-dark-gray h3,
	section.bg-dark-gray h4,
	section.bg-dark-gray h5,
	section.bg-dark-gray h6 {
	color: white;
	}

	section.about .about-box-wrap {
	min-height: 780px; }


	/* ==========================================================================
	ë¯¸ë””ì–´ ì¿¼ë¦¬
	========================================================================== */
	@media only screen and (max-width: 991px) {

	h1 {
	padding: 0 2.6rem;
	font-size: 250%; }
	/* ëª¨ë°”ì¼ í–„ë²„ê±° ë©”ë‰´ */
	.menu-toggle {
	display: block; }

	/* ëª¨ë°”ì¼ ì‚¬ì´ì¦ˆì—ì„œ ìƒë‹¨ ì¢Œìš° íì„ 100% */
	.site-header .container {
	max-width: 100%; }

	/* ë¡œê³ */
	.site-header .site-branding {
	top: 10px;
	left: 50%;
	transform: translateX(-50%); }

	/* ë©”ë‰´ */
	.site-header .main-navigation .menu-main-container {
	position: absolute;
	top: calc(-100vh + 60px);
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: white;
	transition: all 0.3s ease-in-out; }
	.site-header .main-navigation.toggled .menu-main-container {
	top: 0;
	}
	.site-header .main-navigation .menu-main-container ul {
	position: absolute;
	text-align: center;
	left: 50%;
	top: 50%;
	right: inherit !important;
	transform: translate( -50%, -50% ); }
	.site-header .main-navigation .menu-main-container ul li {
	float: none; }
	.site-header .main-navigation .menu-main-container ul li a {
	color: rgba(0, 0, 0, 0.2);
	font-size:1.6rem;
	line-height: 1.6rem;
	padding: 0.8rem 1rem;
	width: 100%; }

	/* ë©”ì¸ ìŠ¬ë¼ì´ë“œ */
	.slick-slider-wrap .slick-slider .slick-slide {
	height: 80vh; }
	.slick-slider-wrap .slick-slider .slick-slide .div-content {
	top: calc( 50% + 60px);
	transform: translate( -50%, calc( -50% + -30px) );
	}
	}

view raw main-3.css hosted with ❤ by GitHub

40 line에 있던 text 관련을 하단 288 line 이후로 이동 하면서 전반적인 헤더를 정리 했습니다.

index.php

	<?php get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main">
	<!-- services -->
	<section id="section_1" class="services">
	<div class="container">
	<div class="row">
	<div class="col-sm-12 col-md-12 col-lg-4 mb-3">
	<h6 class="bar">OUR SERVICES</h6>
	<h3>Maecenas sed diam eget risus varius.</h3>
	<hr>
	<p class="lead">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere fringilla eros sed fermentum.
	</p>
	<hr>
	<p class="fs-14 fw-300">
	Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
	</p>
	</div>
	<div class="col-sm-12 col-md-6 col-lg-4 mb-3">
	<div class="div-box-wrap text-center">
	<figure>
	<img src="/wp-content/uploads/2017/11/icon-service-1.svg" alt="icon-responsive">
	</figure>
	<h4>RESPONSIVE</h4>
	<p class="fs-14 fw-300">
	Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
	</p>
	<p class="mt-3">
	<a href="#" class="zeein-button">READ MORE</a>
	</p>
	</div>
	</div>
	<div class="col-sm-12 col-md-6 col-lg-4 mb-3">
	<div class="div-box-wrap text-center">
	<figure>
	<img src="/wp-content/uploads/2017/11/icon-service-2.svg" alt="icon-customizable">
	</figure>
	<h4>CUSTOMIZABLE</h4>
	<p class="fs-14 fw-300">
	Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
	</p>
	<p class="mt-3">
	<a href="#" class="zeein-button">READ MORE</a>
	</p>
	</div>
	</div>
	</div>
	</div>
	</section>
	</main><!-- #main.site-main -->
	</div><!-- #prmary.content-area -->

	<?php get_footer(); ?>

view raw index-1.php hosted with ❤ by GitHub

css의 기본적인 사용법은 당연히 숙지를 하고 있어야 하며 위의 소스에서 가장 핵심은
9, 21, 35 line 으로
9: <div class=”col-sm-12 col-md-12 col-lg-4 mb-3″>
21, 35 : <div class=”col-sm-12 col-md-6 col-lg-4 mb-3″>
첫번째 div 는 col-md-12를 2,3번째 div 는 dol-md-6 임을 주목해야 합니다.

위의 html 을 분석해 보면

mb-3 : margin-top: 1rem !important
col-lg-4: lg 사이즈 일때까지지는 4colums ( 12/4 = 3개의 열로 균등하게 배열)
col-md-12, col-md-6: lg ~ md 일때 12columns 이거나 6columns ( 12/12 = 1 : 전체 배역, 12/6 = 2 : 2개의 열)
col-sm-12: sm 사이즈 이하일때는 무조건 12columns(1열에 1개씩)

모든 내용을 저장하고 사이트에서 확인 해 보면 화면 사이즈에 따라 3단, 1+2단, 1단 씩 반응형으로 바뀌는 것을 확인 하실 수 있습니다.

zeein

[section] service

main.css

index.php

PREV

NEXT

Leave your question or feedback Cancel reply