210622 UIUX WebDesign CSS 연습_46_2(index.html -> style.css)

ITisIT210·2021년 6월 27일
0

CSS

목록 보기
55/93
post-thumbnail
@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
}

a {
    color: #000;
    text-decoration: none;
}

/* top 메뉴 영역 */
#top {
    background: #02ac91;
}
#top .inner {
    margin: 0px auto;
    width: 1200px;
}
#top .inner::after {
    content: "";
    display: block;
    clear: both;
}
#top .topMenu {
    float: left;
}
#top .topMenu ul li {
    padding: 15px 30px;
    float: left;
    border-right: 1px solid #4ec5b2;
}
#top .topMenu ul li:first-child {
    border-left: 1px solid #4ec5b2;
}
#top .topMenu ul li a {
    display: block;
    color: #fff;
}
#top .util {
    float: right;
}
#top .util ul li {
    padding: 15px 0px 15px 20px;
    float: left;
}
#top .util ul li a {
    display: block;
    color: #fff;
}
#header {
    border-bottom: 1px solid #ddd;
}
#header::after {
    content: "";
    display: block;
    clear: both;
}
#header nav {
    margin: 0px auto;
    width: 1200px;
}

#header .logo {
    padding-top: 10px;
    float: left;
}

#header .gnb {
    float: right;
}

#header .gnb ul li {
    padding: 40px 50px 40px 0px;
    float: left;
    font-size: 20px;
    font-weight: bold;
}

/* #header .gnb ul li:last-child {
    padding-right: 0;
} */

#container {
    margin: 45px auto;
    width: 1200px;
}

#container::after {
    content: "";
    display: block;
    clear: both;
}

.contents {
    width: 950px;
    float: left;
}
.contents h1 {
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 40px;
    border-bottom: 3px solid #ccc;
}
.contents img {
    margin-bottom: 35px;
}
.tbCompany {
    width: 450px;
    float: left;
    border-top: 3px solid #02ac91;
}
.tbCompany th {
    padding: 10px 40px;
    width: 150px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
.tbCompany td {
    padding: 10px 20px;
    width: 300px;
    border-bottom: 1px solid #ccc;
}
.txtCompany {
    width: 450px;
    float: right;
}
.txtCompany span {
    color: #02ac91;
}

.lnb {
    width: 200px;
    float: right;
}
.lnb ul {
    margin-top: 30px;
}
.lnb ul li a {
    padding: 10px;
    display: block;
    background: #eee;
    border-bottom: 1px solid #fff;
}
.lnb ul li a:hover, .lnb ul li a.on {
    color: #fff;
    background: #02ac91;
}

#footer1 {
    background: #666;
}

#footer1 .inner {
    margin: 0px auto;
    width: 1200px;
}

#footer1 .inner::after {
    content: "";
    display: block;
    clear: both;
}

#footer1 .footerLink {
    float: left;
}

#footer1 .footerLink li {
    float: left;
}

#footer1 .footerLink li a {
    padding-right: 30px;
    color: #999;
}

#footer1 .footerLink li:last-child {
    padding-right: 0px;
}

#footer1 .sns {
    float: right;
}

#footer2 {
    background: #000;
}

#footer2 .inner {
    margin: 0px auto;
    width: 1200px;
}

#footer2 .inner::after {
    content: "";
    display: block;
    clear: both;
}

#footer2 address {
    float: left;
}

#footer2 .footerLogo {
    float: right;
}

/* #footer {
    background: #000;
}

#footer .inner {
    margin: 0px auto;
}

#footer .footerService {
    width: 1200px;
    background: #333;
    float: left;
}

#footer .footerLink {
    float: left;
}

#footer .footerLink li {
    float: left;
}

#footer .footerLink li a {
    padding-right: 30px;
    color: #999;
}

#footer .footerSNS {
    float: right;
}

#footer .footerSNS li {
    float: left;
}

#footer .footerSNS li a {
    padding-right: 30px;
}

#footer .footerSNS {
    padding-right: 35px;
}

#footer .footerContact {
    float: right;
    background: #000;
}

#footer .footerContact p {
    color: #999;
}

#footer p {
    float: left;
}

#footer .footerLogo {
    float: right;
} */

profile
Engineering is the closest thing to magic that exists in the world.

0개의 댓글