Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

display: flex 테스트 위한 연습(삼성 홈페이지 header 일부 참고) 본문

과거 프로그래밍 자료들/Html&CSS

display: flex 테스트 위한 연습(삼성 홈페이지 header 일부 참고)

평부 2022. 6. 30. 23:34

css 적용 전

css 적용 후

 

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meata name="author" content="helloSchedule">
        <!-- css -->
        <!-- <link rel="stylesheet" href="./css/header.css" /> -->
        <!--fontawesome  -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
            integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!-- 구글폰트 -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <title>Samsung</title>
</head>

<body>
    <div class="inner">
        <div class="header-container">
            <div class="title">
                <a href="#">SAMSUNG</a>
            </div>
            <!-- title -->
            <div class="items">
                <a href="#">제품</a>
                <a href="#">혜택</a>
                <a href="#">갤럭시 캠퍼스 스토어</a>
                <a href="#">큐커 식품관</a>
                <a href="#">#YouMake</a>
                <a href="#">#스마트싱스</a>
                <a href="#">아웃렛</a>
                <a href="#">고객 서비스</a>
            </div>
            <!-- items -->
            <div class="ect">
                <a href="#">스토리</a>
                <a href="#">멤버십</a>
                <a href="#">디지털 프라자 <i class="fa-solid fa-location-dot"></i></a>
                <a href="#">사회공헌 <i class="fa-solid fa-location-arrow icons"></i></a>
                <a href="#">비즈니스 <i class="fa-solid fa-location-arrow icons"></i></a>
            </div>
            <!-- ect -->
            <div class="personalInfo">
                <div class="unsigned">
                    <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
                    <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
                    <a href="#" id="person"><i class="fa-solid fa-person"></i></a>
                    <div class="dropdown">
                        <div class="dropdown-content">
                            <button id="signIn"><a href="#">로그인</a></button>
                            <button id="signUp"><a href="#">로그아웃</a></button>
                        </div>
                    </div>
                </div>

            </div>
            <!-- pesonalInfo -->
        </div>
        <!-- header-container -->
    </div>
    <!-- inner -->
</body>

</html>

 

CSS

p {
    font-family: 'Nanum Gothic', sans-serif;
}
:root {
    --white: #fff;
    --black: #000;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: var(--black);
}
html {
    font-size: 10px;
}
header {
    background-color: var(--white);
}
.header-container {
    display: flex; //여러 값들을 가로로 놓기 위함
    justify-content: space-around;
    align-items: center;
    height: 5rem;
    margin: 0 1rem;
}
/* .header-container * {
    position: relative;
    top: 0.5rem;
} */
.title a {
    font-size: 2rem;
    font-weight: 900;
}
.items {
    display: flex;
}
.items a {
    font-size: 1.5rem;
    margin: 1rem;
    font-weight: 900;
}
.ect {
    display: flex;
}
.ect a {
    font-size: 1.5rem;
    margin: 0.5rem;
    font-weight: 900;
} 
.personalInfo {
    display: flex;
    position: relative;
    right: 30px;
}
.personalInfo a {
    font-size: 2rem;
    margin: 1.5rem;
    font-weight: 900;
}
.inner {
    margin: 0 auto;
}
/* 로그인, 로그아웃 */
.dropdown {
    position: relative;
}
.dropdown-content {
    position: absolute;
    width: 100%;
}
.dropdown-content button {
    margin: 1.5rem;
    border:none;
    background-color: var(--white);
    display: none;
    /* position: relative;
    right: 1rem; */
}
.dropdown-content a {
    font-size: 1.5rem;
}
#person:hover .dropdown-content button {
    display: block;
}
저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Html&CSS' 카테고리의 다른 글

CSS Diner 22 ~ 32번  (0) 2022.06.30
CSS Diner 12~21번  (0) 2022.06.30
CSS Diner 1~11번  (0) 2022.06.30
영화 사이트 만들어 보기 - footer  (0) 2022.06.05
영화 사이트 만들어 보기 - HTML 마크업  (0) 2022.06.05
'과거 프로그래밍 자료들/Html&CSS' Related Articles more