👉 완성본 보기
<section id="contact" class="section">
<header class="section__header">
<strong class="section__tag">
contact
</strong>
<h1 class="section__title">
문의하기
</h1>
</header>
<div class="contact">
<div class="contact__tab">
<input name="contact" type="radio" id="ct_1" checked>
<label for="ct_1" class="sr-only">연락처</label>
<input name="contact" type="radio" id="ct_2">
<label for="ct_2" class="sr-only">메시지</label>
<div class="contact__slides">
<div class="contact__slide-con">
<div class="contact__slide">
<address>
<table class="contact__contacts">
<caption class="sr-only">연락처 목록</caption>
<tr>
<th>유튜브</th>
<td>
<a href="https://www.youtube.com/c/얄팍한코딩사전" target="_blank" alt="새 창에서 열기">
<img src="./images/youtube.svg" alt="">
채널 바로가기
</a>
</td>
</tr>
<tr>
<th>웹사이트</th>
<td>
<a href="https://www.yalco.kr" target="_blank" alt="새 창에서 열기">
https://www.yalco.kr
</a>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<a href="mailto:yalco@kakao.com">
yalco@kakao.com
</a>
</td>
</tr>
</table>
</address>
</div>
<div class="contact__slide">
<form action="#" method="get">
<div class="contact__leave">
<textarea name="message" placeholder="메시지를 입력하세요." required></textarea>
<div>
<input name="email" type="email" placeholder="메일주소를 입력하세요." required>
<button type="submit">남기기</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<h1 class="sr-only">Copyright</h1>
<p>
2022 yalco - All rights reserved
</p>
</footer>
7-contact.css
1. 섹션
#contact {
padding-left: 0;
padding-right: 0;
background-color: var(--color-light-bg);
}
.contact {
margin-top: 3em;
}
데스크탑
#contact {
grid-column: 1 / -1;
}
2. 탭과 탭 버튼
.contact__tab {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: var(--font-size-larger);
}
/* 라디오 버튼 커스터마이즈 */
input[type=radio] {
all: unset;
display: inline-block;
padding: 0.8em 4em;
background-color: white;
cursor: pointer;
}
input[type=radio]:checked {
color: white;
background-color: var(--color-main);
}
#ct_1 { border-radius: 12px 0 0 12px; }
#ct_1::after { content: '연락처 보기'; }
#ct_2 { border-radius: 0 12px 12px 0; }
#ct_2::after { content: '메시지 남기기'; }
모바일
input[type=radio] {
padding: 0.8em 2em;
}
#ct_1::after { content: '연락처'; }
#ct_2::after { content: '메시지'; }
3. 슬라이드
.contact__slides {
margin: 1.6em 0;
width: 100vw;
overflow: hidden;
}
.contact__slide-con {
display: flex;
width: 200vw;
transition: margin-left 500ms;
}
.contact__slide {
width: 100vw;
}
#ct_1:checked ~ .contact__slides .contact__slide-con {
margin-left: 0;
}
#ct_2:checked ~ .contact__slides .contact__slide-con {
margin-left: -100vw;
}
4. 연락처 보기
.contact__contacts {
margin: 0 auto;
text-align: left;
color: var(--color-text);
}
.contact__contacts th {
padding-right: 3em;
font-size: 0.9em;
font-weight: bold;
text-align: right;
color: var(--color-dark);
border-right: 4px solid var(--color-light-bd);
}
.contact__contacts a:hover {
color: var(--color-emph);
text-decoration: underline;
}
.contact__contacts img {
margin-right: 0.1em;
width: 32px;
vertical-align: middle;
}
모바일
.contact__contacts th {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.contact__contacts tr > * {
padding: 0.6em;
}
.contact__contacts td::before {
content: '▶';
margin-right: 0.6em;
font-size: 0.67em;
opacity: 0.5;
}
데스크탑
.contact__contacts {
border-spacing: 3em 1em;
}
5. 메시지 남기기
.contact__leave {
display: inline-flex;
margin-top: 1em;
gap: 8px;
}
.contact__leave textarea,
.contact__leave input[type=email] {
margin: 0;
font-size: var(--font-size-text);
border: 2px solid var(--color-light-bd);
}
.contact__leave textarea::placeholder,
.contact__leave input[type=email]::placeholder {
color: var(--color-lighter);
}
모바일
.contact__leave {
flex-direction: column;
}
.contact__leave textarea,
.contact__leave input[type=email] {
width: 80vw;
}
데스크탑
.contact__leave textarea,
.contact__leave input[type=email] {
width: 360px;
}
6. 인풋 스타일
/* 텍스트 인풋의 경우 focus-visible이 focus를 override */
.contact__leave textarea:focus-visible,
.contact__leave input[type=email]:focus-visible {
border: 2px solid var(--color-sub);
outline: none;
}
.contact__leave div {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact__leave textarea {
resize: none;
padding: 0.6em;
}
.contact__leave input[type=email] {
padding: 0 0.6em;
height: 48px;
line-height: 48px;
}
.contact__leave button {
all: unset;
height: 64px;
line-height: 64px;
color: white;
background-color: var(--color-sub);
cursor: pointer;
transition: all 350ms;
}
.contact__leave button:hover {
opacity: 0.8;
}
.contact__leave button:focus-visible {
outline: 4px solid var(--color-sub);
}
8-footer.css
footer {
padding: 2em;
font-size: var(--font-size-text);
text-align: center;
color: white;
background-color: var(--color-lighter);
}