본문 바로가기
중앙정보처리학원/FRONTEND

HTML5&CSS (3)

by 하지마지 2023. 9. 20.
728x90

시멘틱 태그 : 의미있는 태그 -- 6가지

<header> : 제목, 타이틀
<nav> : 네비게이션(안내- 메뉴)
<section> : 본문 내용(카테고리)
<article>: 본문 내용(카테고리)
<aside>: 광고/배너
<footer>: 꼬리말, 아래부분 메뉴(회사 소개, 주소, 기타정보)

 

div.menu 태그에 선택자를 줌으로써 그 역할을 짐작하였다

ui.header 

 

폰트 크기

rem 16px

2rem 32px

0.5rem 8px

 

선택자 : 태그를 지정하는 명령어 

class, id, tag

 

position : 위치 설정

1. relative :  상대적인 위치

2. absolute  : 절대적인 위치 

3. fixed : 고정된 위치 (스크롤 내려도 자리에 고정됨)

 

position 잡으면 top, left를 사용할 수 있다.  

                         index(레이어개념 - level )를 줄 수 있다. (숫자가 클 수록 위로 올라온다)

                         z-index > 숫자가 클 수록 위로 올라온다. (포토샵 레이어 개념)

                         공중에 붕 뜬다. 

 

 

부모태그는 relative로 잡는다.

자식태그는 absloute로 잡는다. 

relative 요소 자기 자신을 기준으로 배치 높이를 %로 잡기 불가능 
absolute 부모(조상) 요소를 기준으로 배치 높이를 %로 잡기 가능 

absolute이면 가로/세로 크기는 콘텐츠 내용만 갖는다.

 

relative 이면 크기는 block(inline) 요소 크기 갖는다.  

 

fixed 이면 화면의 위치를 기준으로 잡는다. 

block 과 inline 차이

 

animation : 움직이게 만드는 명령어 

position 지정 

 

animation: back_ani(이름지정) 1s

@keyframe back_ani{

0% {transform: scale(1.5);

100%{ transform : scale(1);

}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>삼성전자 갤럭시</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://kit.fontawesome.com/c917400154.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div></div>
        <div>
            <input type="text" placeholder="제품 이름">
        </div>
        <div></div>
        <div></div>
        <div></div>
        <!-- 16 -->
    </header>
    <nav>
        <div>모바일</div>
        <div>TV&오디오</div>
        <div>주방가전</div>
        <div>리빙가전</div>
        <div>PC/주변기기</div>
        <div>소모품</div>
        <div>삼성케어플러스</div>
        <div>스마트싱스</div>
        <div>삼성닷컴추천</div>
        <div>아울렛</div>
        <div>#Samsung</div>
        <!-- 11 -->
        <div>고객지원</div>
        <div>비즈니스</div>
        <div>삼성 강남</div>
        <div>삼성스토어</div>
        <div>지속가능경영</div>
    </nav>
    <article class="ato">
        <p class="ato_text1">이전에 없던 새로운 우리들의 캠퍼스</p>
        <p class="ato_text2">Galaxy Campus</p>
        <p class="ato_text3">입장하기</p>
    </article>
    <ul class="tab">
        <span><li>갤럭시 캠퍼스 소개</li></span>
        <span><li>가입조건 및 회원자격</li></span>
        <span><li>회원 전용 이벤트</li></span>
    </ul>

    <article class="at1">
        <p class="at1_text1">삼성전자 공식 학생 커뮤니티 & 교육할인 몰</p>
        <p class="at1_text2">다양한 콘텐츠와 커뮤니티 그리고 스토어까지, 매 순간이 다채로운 여기는 갤럭시 캠퍼스</p>
    </article>

    <article class="iconbox1">
        <div><p class="iconbox1_text1">어디서도 볼 수 없는 다양한 정보</p>
        <p class="iconbox1_text2">갤럭시 캠퍼스<br>오리지널 콘텐츠</p></div>
        <div>
            <p class="iconbox1_text1">일상의 이야기를 나누는 공간</p>
        <p class="iconbox1_text2">갤캠러들만을 위한<br>전용 커뮤니티</p>
        </div>
        <div>
            <p class="iconbox1_text1">풍성한 교육할인 혜택을 그대로</p>
        <p class="iconbox1_text2">학생이라면<br>최대60% 교육할인</p>
        </div>
        <div><p class="iconbox1_text1">갤캠스 회원만 참여가능</p>
            <p class="iconbox1_text2">다양하게 즐기는<br>풍성한 이벤트</p></div>
    </article>
</body>
</html>
*{
    margin: 0; padding: 0;
    list-style: none;
}
@font-face{
    font-family: "hanna";
    src: url(../fonts/BMHANNAPro.ttf);

}
@font-face {
    font-family: "youngsung";
    src: url(../fonts/BMYEONSUNG_ttf.ttf);
}
header{
    width: 1700px;height: 70px;
    border: 0px solid black;
    margin: 0 auto;
    display: flex;
   
   
}
header div{
    width: 50px; height: 50px;
    border: 0px solid red;
    margin-top: 10px;
    cursor: pointer;
}
header div:first-child{
    width: 150px;
    background: url(../img/logo-gnb.svg) center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 1150px;
   
}
header div:nth-child(2){
    width: 250px; height: 50px;
    /* margin-left: 1100px; */
}
header div input{
    display: block; width: 100%; height : 95%;
    text-indent: 20px;
    border: 0px solid grey;
    border-radius: 20px;
    font-family: "youngsung";
    font-size: 1.5rem;
   
}
header div:nth-child(3){
    background: url(../img/icon-26-Search.svg)no-repeat center center;

}
header div:nth-child(4){
    background: url(../img/icon-26-Cart.svg)no-repeat center center;

}
header div:nth-child(5){
    background: url(../img/icon-26-mypage.svg)no-repeat center center;

}
nav{
    width: 1700px; height: 30px;
    border: 0px solid black;
    margin: 0 auto;
    display: flex;
    cursor: pointer;
    margin-top: 30px;

}
nav div{
    width: 60px;
    font-size: 1rem;
    border: 0px solid rebeccapurple;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    font-family: "youngsung";
}
nav div:nth-child(2),
nav div:nth-child(14),
nav div:nth-child(5),
nav div:nth-child(7),
nav div:nth-child(8),
nav div:nth-child(9),
nav div:nth-child(11),
nav div:nth-child(15),
nav div:nth-child(16){
    width: 90px;
}
nav div:nth-child(11){
    margin-right:470px;
}
.ato{
    position: relative;
    top: 0; left: 0;


    margin-top: 10px;
    width: 100%;height:  470px;
    border: 0px solid black;
    background: url(../img/big.jpeg);
    background-size: 100% 100%;
   
}
.ato p{
    position: absolute;
    color:  white;
    border: 0px solid white;
}
.ato .ato_text1{
    width: 600px;
    font-size: 1.3rem;
    top: 150px; left: 45%;
    font-family: 'hanna';
}
.ato .ato_text2{
    font-size: 3rem;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

    top: 200px; left: 45%;
}
.ato .ato_text3{
    font-size: 1.2rem;
    font-family: 'hanna';

    top: 300px; left: 48%;
    border: 0px solid black;
    border-radius: 20px;
    cursor: pointer;
    width: 150px; height: 50px;
    text-align: center;
    line-height: 50px;
    background: white;
    color: black;
   
}
.ato .ato_text3:hover{
    background-color: black;
    color: white;
    box-shadow: 0 5px 5px #ccc;
}
.tab{
    width: 100%; height: 70px;
    border: 0px solid black;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-family: "hanna";
    font-size: 1.5rem;
   
}
.tab li{
    width: 300px;
    border: 0px solid red;
    text-align: center;
    line-height: 70px;
    margin-left: 60px;
   
}
.tab span{
    border-bottom: 0px solid red;
}
.tab li:hover span{
    display: inline-block;
    height: 70px;
}
.tab li:hover{
    border-bottom: 3px solid black;
}

.at1{
    /* position: relative; */
     /* left: 0; */
    width : 1700px; height: 300px;
    border: 0px solid black;
    margin: 50px auto;
    font-family: 'hanna';
    font-family: black 'hanna';
    line-height: 150px;

}
.at1 p{
    /* position: absolute; */
    text-align: center;
    height: 30px;
    font-size: 1.4rem;
    margin-top: 30px;
   
   
}
.at1 .at1_text1{
    height: 60px;
    /* margin-top: 60px; */
    font-size: 2.5rem;
    font-weight: bold;

}
.iconbox1{
    width: 1700px; height: 400px;
    margin: 0 auto;
    border: 0px solid black;
    display: flex;
    justify-content: space-between;
}
.iconbox1 div{
   
    border: 0px solid black;
    width: 400px; height : 400px;
     
}
.iconbox1 div:first-child{
    background: url(../img/iconbox\ \(2\).png)no-repeat center center;
    background-size: 100% 100%;
}
.iconbox1 div:nth-child(2){
    background: url(../img/iconbox\ \(3\).png)no-repeat center center;
    background-size: 100% 100%;
}
.iconbox1 div:nth-child(3){
    background: url(../img/iconbox\ \(4\).png)no-repeat center center;
    background-size: 100% 100%;
}
.iconbox1 div:nth-child(4){
    background: url(../img/iconbox\ \(1\).png)no-repeat center center;
    background-size: 100% 100%;
}
.iconbox1 .iconbox1_text1{
    text-align: center;
    font-family: 'hanna';
    font-size: 1.5rem;
    border: 0px solid black;
    margin-top: 250px;
}
.iconbox1 .iconbox1_text2{
    text-align: center;
    font-family: 'hanna';
    font-size: 2rem;
    border: 0px solid black;
    margin-top: 30px;
}

    opacity: 0;   //투명도 조절
    animation-delay: 3s; //n초간 딜레이
    animation-fill-mode: forwards; / 애니메이션 실행한 다음 정지
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>카이스트 홀딩스</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://kit.fontawesome.com/c917400154.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="back"></div>
    <nav>
        <div>KAIST HOLDINGS</div>
        <div>About</div>
        <div>Business</div>
        <div>Subsidiary</div>
        <div>Contact</div>
        <div>Notice</div>
        <div><i class="fa-solid fa-magnifying-glass"></i></div>
        <div>KOR</div>
    </nav>
    <section>
        본문내용
    </section>
   
    <p class="title">
        미래를 만드는 기술 사용화의 패스 파인더
    </p>
    <section>
       
    </section>
</body>
</html>
*{
    margin: 0; padding: 0;
    list-style: none;
}
@font-face{
    font-family: "hanna";
    src: url(../fonts/BMHANNAPro.ttf);

}
@font-face {
    font-family: "youngsung";
    src: url(../fonts/BMYEONSUNG_ttf.ttf);
}

.back{
    position: fixed;
    top: 0; left: 0;
    z-index: -1;
    width: 100%; height: 100%;
    border: 1px solid black;
    background: url(../img/img\ \(1\).jpg);
    background-size: 100% 100%;
    animation: back_ani 10s;
}
@keyframes back_ani{
    0% {transform: scale(1);}
    100%{transform: scale(1.5);}
}
.title{
    position: absolute;
    top: 300px; left: 100px;
    animation: title_ani 3s;
    font-size: 4rem;
    color: white;
    opacity: 0;  
    animation-delay: 3s;
    animation-fill-mode: forwards;
}
@keyframes title_ani {
    0%{opacity: 0; top: 400px;}
    100%{opacity: 1; top: 200px;}
}
nav{
    position: fixed;
    top: 0; left: 0;
    z-index: 10;
    margin: 30px 0px 30px 0px;
    border: 0px solid rgba(43, 199, 210, 0.403);
    width: 100%; height: 100px;
    display: flex;
    justify-content: center;    
    font-weight: bolder;
}

nav div{
    width: 200px; height: 100%;
    border: 0px solid white;
    color: rgb(34, 159, 194);
    font-size: 2rem;
    text-align: center;
    line-height: 100px;
    margin-right: 30px;
    opacity: 0.7;
}
nav div:hover{
    opacity: 1;
   
}
nav div:first-child{
    /* margin: ; */
    width: 300px;
    font-size: 2.1rem;
    margin-right: 20%;

}

nav div:nth-child(7){
    margin-left: 20%;

}
nav div:last-child{
    width: 200px;
    border: 1px solid white;
    border-radius: 20px;
}
section{
    position: absolute;
    top: 100%; left : 0;
    width: 100%; height: 3000px;
    border: 1px solid white;
    margin: 0 auto;
    background: white;
}


    <div class="msg">
        내용
        <ul>
            <li>전달내용</li>
            <li>전달내용</li>
            <li>전달내용</li>
            <li>전달내용</li>
            <li>전달내용</li>
        </ul>
    </div>
.msg {
    position: fixed; top: 200px; right: 0;
    z-index: 12;
    color: white;
    width: 150px; height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid white;
    cursor: pointer;
}
.msg:hover ul{
    margin-left: 0;
   
}
.msg ul{
    width: 100%; height: 500px;
    background: white;color: black;
    margin-left: 100%;
    transition: all 0.5s;
}
.msg ul li:hover{
    background: skyblue;
}

728x90

'중앙정보처리학원 > FRONTEND' 카테고리의 다른 글

자바스크립트 (2)  (0) 2023.09.25
자바스크립트 (1)  (0) 2023.09.22
HTML5 & CSS (4)  (0) 2023.09.21
HTML5&CSS (2)  (0) 2023.09.19
HTML5 & CSS (1)  (0) 2023.09.18

관련글

티스토리툴바