[DAY - 22] table

• tabel

 

1-1) table #1 예제 3-2

 

21일 차에서 하던 table을 마저 해보았다.

tr, th, td는 공통적인 부분이 많아 html에서 추가만 해주면 바로 적용이 돼서 비교적 쉽게 완성하였다.

table의 내용 중 td의 폰트 파란 부분은 em으로 묶어 css에서 따로 처리를 했다.

 

	<td>
		8개 일반학기 수업료<em>100%</em>
	</td>

.bbs .tb3 em{
	color: blue;
}

 

1-2) table#2 예제4

 

kakaobank 예제

 

다음으론 kakao bank 페이지를 따라 해 보았다.

header도 구현을 하기 위해 마크업을 하고 html과 css를 적용시켰고 접근성을 위한 본문바로가기도 맨 위에 추가하였다.

 

   <p id="skipNav"><a href="#content">본문바로가기</a></p>
    <div id="wrap">
        <header id="header">
            <div class="inner">
                <h1><a href="#"><img src="images/kb_logo.svg" alt="kakaobank"></a></h1>
                <nav class="nav">
                    <ul class="gnb">
                        <li><a href="#">은행소개</a></li>
                        <li><a href="#">상품안내</a></li>
                        <li><a href="#">고객센터</a></li>
                        <li><a href="#">이벤트</a></li>
                        <li><a href="#">서류제출하기</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- //header -->

 

비교적 table내용들의 폰트, 크기, 정렬 등이 일원화되어 있어 어렵지 않았다.

header부분의 내용에 hover를 하면 밑줄 효과가 나타나게 css를 작성했다.

 

#header .inner {
	height: 80px;
	display: flex;
	justify-content: space-between;
}
#header h1 {
	padding: 25px 0;
}
#header .nav {}
#header .nav .gnb {
	display: flex;
}
#header .nav .gnb li {}
#header .nav .gnb li a {
	position: relative;
	display: flex;
	height: 80px;
	line-height: 80px;
	font-size: 18px;
	font-weight: 500;
	padding: 0 15px;
}
#header .nav .gnb li:last-child{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: 15px;
}
#header .nav .gnb li:last-child a{
	border: 2px solid white;
	line-height: 45px;
	height: 45px;
	border-radius: 30px;
}
#header .nav .gnb li:not(:last-child) a::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: 0.5s;
	transform: scaleX(0);
}
#header .nav .gnb li:not(:last-child) a:hover::after {
	transform: scaleX(1);
}