👉 완성본 보기
<section id="html" class="section">
<header class="section__header">
<strong class="section__tag">
html
</strong>
<h1 class="section__title">
갖다 놓는 HTML
</h1>
</header>
<article class="html-css _html">
<figure class="html-css__thumb">
<img class="html-css__logo" src="./images/logo-html.svg" alt="HTML 로고">
</figure>
<div class="html-css__content">
<h2 class="html-css__title">
<div>
<em>H</em>yper<em>T</em>ext <br>
<em>M</em>arkup <em>L</em>anguage
</div>
</h2>
<p class="html-css__desc">
<strong>태그</strong>를 사용하여 웹페이지 안의 요소들과 <br>
그 구조를 표현할 수 있는 언어입니다.
</p>
<dl class="html-css__spec">
<dt class="sr-only">종류</dt>
<dd>마크업</dd>
<dt class="sr-only">용도</dt>
<dd>웹개발</dd>
<dt class="sr-only">난이도</dt>
<dd>쉬움</dd>
</dl>
</div>
</article>
</section>
<section id="css" class="section">
<header class="section__header">
<strong class="section__tag">
css
</strong>
<h1 class="section__title">
꾸미는 CSS
</h1>
</header>
<article class="html-css _css">
<figure class="html-css__thumb">
<img class="html-css__logo" src="./images/logo-css.svg" alt="CSS 로고">
</figure>
<div class="html-css__content">
<h2 class="html-css__title">
<div>
<em>C</em>ascade <br>
<em>S</em>type <em>S</em>heet
</div>
</h2>
<p class="html-css__desc">
웹페이지 요소에 각종 속성을 부여하여 <br>
다양하게 <strong>스타일링</strong>할 수 있는 언어입니다.
</p>
<dl class="html-css__spec">
<dt class="sr-only">종류</dt>
<dd>스타일</dd>
<dt class="sr-only">용도</dt>
<dd>웹개발</dd>
<dt class="sr-only">난이도</dt>
<dd>중간</dd>
</dl>
</div>
</article>
</section>
5-html-css.css
1. 섹션 설정
모바일
#html {
border-bottom: 4px solid var(--color-light-bg);
}
데스크탑
#html {
border-right: 4px solid var(--color-light-bg);
}
2. 아티클 레이아웃
.html-css {
margin: 56px 0;
display: inline-flex;
gap: 56px;
}
모바일
.html-css {
flex-direction: column;
}
3. 로고 사이즈
모바일
.html-css__logo {
width: 50%;
}
데스크탑
.html-css__logo {
width: 144px;
}
4. 설명부
.html-css__desc {
margin-top: 1.6em;
font-size: var(--font-size-text);
color: var(--color-text);
}
.html-css__desc strong {
font-weight: bold;
}
.html-css__title {
font-size: var(--font-size-subtitle);
/* font-weight: bold; */
font-weight: 100;
}
._html .html-css__title em { color: #F16528; }
._css .html-css__title em { color: #2965F1; }
모바일
.html-css__content {
text-align: center;
}
.html-css__title div {
display: inline-block;
text-align: left;
}
데스크탑
.html-css__content {
text-align: left;
}
5. 스펙
.html-css__spec {
margin-top: 1.6em;
}
.html-css__spec dd {
margin-right: 1.2em;
font-size: var(--font-size-larger);
color: var(--color-lighter);
}
/* 초록색 체크표시 */
.html-css__spec dd::before {
content: '';
display: inline-block;
margin-right: 0.4em;
width: 12px;
height: 6px;
border-left: 4px solid var(--color-sub);
border-bottom: 4px solid var(--color-sub);
vertical-align: 0.2em;
transform: rotate(-45deg);
}
6. 로고 아래 그림자
.html-css__thumb {
position: relative;
}
/* 로고 아래 그림자 */
.html-css__thumb::after {
content: '';
position: absolute;
left: 0;
height: 10%;
background-color: black;
border-radius: 50%;
}
모바일
.html-css__thumb::after {
left: 25%;
bottom: -16%;
width: 50%;
}
데스크탑
.html-css__thumb::after {
left: calc(50% - 72px);
bottom: -24px;
width: 144px;
}
7. 로고 오르내리는 애니메이션
/* 둥둥 오르내리는 효과 */
@keyframes logo-hover {
from { transform: translateY(0); }
to { transform: translateY(10px); }
}
.html-css__logo {
animation-name: logo-hover;
animation-duration: 800ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
8. 오르내림에 따른 그림자
/* 짙고 옅어지는 애니메이션 */
@keyframes logo-shadow {
from { opacity: 0.08; }
to { opacity: 0.24; }
}
.html-css__thumb::after {
animation-name: logo-shadow;
animation-duration: 800ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}