본문 바로가기
IT To do and To was

22년 3월 12일_긍정적으로 생각하고 자주 놀자, react에 html 순수 파일 적용, brackets page develop(js까지)

금호동짜세 2022. 3. 12.
728x90
반응형

토요일[조금만 더 침착해지자]

1. react 강의 수강

2. 택배홈페이지 js넣기[brackets]

 

1. react 순수 html 파일에 리액트 적용

react.developemnt.js설치

react-dom.developent.js 설치 (인클루드 시키기) 

= 이것만해도 react라이브러리 사용가능

속성 ; attribute

 

dotnet new react -o ReactMemo (-o 는 아웃풋 디렉퇴임)

ClientApp에 들어간 후 

노드 모듈 설치 = npm install

 

서버까지 cmd에서 실행시킬 때는 cd.. (=ReactMemo\ReactMemo > )

dotnet run (backend 같이 실행)

 

code . (편집모드)

 

ClientApp은 reateReactapp folder임

정적인 html 문서는 worldwideapp에서 관리를 함 -> 새로운 폴더를 만들어서 www.root folder생성

 

react cnd

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>hello React 1</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/javascript">
        ReactDOM.render(React.createElement("h1",null, "hello"),document.getElementById("root"));
    </script>
</body>
</html>

cmd에 d안 start https://localhost:포트번호/helloreact1.html

 

순수 html 실행

2. js넣기

html css js
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/commn.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/common.js"></script>
    <title>로젠택배</title>
</head>
<body>
<div class="header">
    <h1><a href="#"><img src="image/rogo.png" alt="로고"></a></h1>
    <div class="gnb">
        <ul>
            <li><a href="#" class="mainnav">예약/조회</a>
            <ul class="subnav">
                <li><a href="#">국내배송예약</a></li>
                <li><a href="#">해외배송예약</a></li>
                <li><a href="#">국내배송조회</a></li>
                <li><a href="#">해외배송조회</a></li>
            </ul>
            </li>
            <li><a href="#" class="mainnav">서비스안내</a>
             <ul class="subnav">
                <li><a href="#">국내택배</a></li>
                <li><a href="#">해외택배</a></li>
                <li><a href="#">포장안내</a></li>
                <li><a href="#">사고접수</a></li>
            </ul>
            </li>
            <li><a href="#" class="mainnav">회사소개</a>
             <ul class="subnav">
                <li><a href="#">하률개요</a></li>
                <li><a href="#">경영이념/비전</a></li>
                <li><a href="#">하률인사말</a></li>
                <li><a href="#">찾아오시는길</a></li>
            </ul>
            </li>
            <li><a href="#" class="mainnav">고객센터</a>
             <ul class="subnav">
                <li><a href="#">고객문의</a></li>
                <li><a href="#">고객유의사항</a></li>
                <li><a href="#">자주묻는질문</a></li>
                <li><a href="#">공지사항</a></li>
            </ul></li>
        </ul>
    </div>
</div>
<div class="subbg"></div>
<div class="main">
    <ul>
        <li><a href="#"><img src="image/main1.png" alt="메인이미지01"></a></li>
        <li><a href="#"><img src="image/main2.png" alt="메인이미지02"></a></li>
        <li><a href="#"><img src="image/main3.png" alt="메인이미지03"></a></li>
    </ul>
</div>
<div class="iconbanner">
    <h2>
        Qulck<br>
        service
    </h2>
    <ul>
        <li><a href="#"><img src="image/icon01.png" alt="아이콘01"></a></li>
        <li><a href="#"><img src="image/icon02.png" alt="아이콘01"></a></li>
        <li><a href="#"><img src="image/icon03.png" alt="아이콘01"></a></li>
        <li><a href="#"><img src="image/icon04.png" alt="아이콘01"></a></li>
        <li><a href="#"><img src="image/icon05.png" alt="아이콘01"></a></li>
    </ul>
</div>
<div class="contents">
    <div class="notice">
        <h2>공지사항</h2>
        <ul>
            <li><a href="#">왜 이렇게 쓸쓸하지</a><span class="date">2022.03.11</span></li>
            <li><a href="#">기분 탓이려나..</a><span class="date">2022.03.10</span></li>
            <li><a href="#">괜찮아 내일이 있으니까</a><span class="date">2022.03.09</span></li>
            <li><a href="#">미니프로젝트 잘 해보자</a><span class="date">2022.03.08</span></li>
        </ul>
    </div>
    <div class="banner"><a href="#"><img src="image/banner.png" alt="배너"></a></div>
    <div class="now"><a href="#"><img src="image/now.png" alt="바로가기"></a></div>
</div>
<div class="footer">
    <h1><a href="#"><img src="image/footerrogo.png" alt="하단로고"></a></h1>
    <p>Copyright ® EJEN LOGISTICE. ALL rights reserved.</p>
    <div class="fnav">
        <ul>
            <li><a href="#">이용정보</a></li>
            <li><a href="#">개인정보처리방침</a></li>
            <li class="last"><a href="#">이메일무단수집거부</a></li>
            
        </ul>
    </div>
</div>
</body>
</html>		 *{padding: 0; margin: 0; font-family: "맑은 고딕",
sans-serif; font-size: 14px; color: #333333;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}

.header{
    width: 1200px; height: 100px;
    margin: auto;}
.main{
    width: 1200px; height: 300px;
    margin: auto;

}
.iconbanner{
    width:1200px; height: 150px; margin: auto;
    background-color: antiquewhite;
}
.contents{
    width: 1200px; height: 200px; margin: auto;
    
}
.footer{
    width: 1200px; height: 100px; margin: auto;
    background-color: beige;
}

.notice{
    float: left;
    width: 400px; height: 200px;
    box-sizing: border-box;
    padding: 0 20px;
}
.banner{
    float: left; width: 400px; height: 200px;
    box-sizing: border-box;
    padding: 5px; 20px;
}
.now{
    float: left;
    width: 400px; height: 200px;
    box-sizing: border-box; 
    padding: 5px; 20px;
}
.header h1{
    float: left;
    width: 400px; height: 100px;
    padding-top: 20px;
    box-sizing: border-box;
}
.iconbanner h2{
    float: left;
    width: 200px; height: 150px;
    background-color: aqua;
    padding: 30px 0; box-sizing: border-box;
    font-size: 30px; line-height: 45px;
    text-align: center;
    color: dimgrey;
    font-family: "굴림",fantasy;
}
.iconbanner ul{
    float: right; width: 1000px; height: 150px;
}
.iconbanner li{
    float: left; width: 200px; height: 150px;
}
.iconbanner img{
    opacity: 0.5;
    transition: 0.3s;
}
.iconbanner a:hover img{opacity: 1;}

.footer h1{ 
    float: left;
    width: 400px; height: 100px;
    padding-top: 20px; box-sizing: border-box;
}

.notice h2{
    width: 100%; height: 50px;
    border-bottom: 1px solid #999999; box-sizing: border-box;
    font-size: 18px; font-weight: bold; color: #333333;
    line-height: 50px;
}
.notice li{
    width: 100%; height: 30px;
    line-height: 30px; font-size: 12px;
}
.notice li a{
    float: left;
    font-size: 12px;
}
.notice li .date{
    float: right;
    font-size: 12px;
    padding-right: 10px; box-sizing: border-box;
    
}
.footer p{
    float: left;
    width: 400px; height: 100px;
    line-height: 100px; color: blueviolet; text-align: center;
}
.fnav{
    float: right;
    width: 400px; height: 100px; line-height: 100px;
}


.fnav ul{
    float: right;
}
.fnav li{float: left; padding-left: 20px;}
.fnav a{color: blue;}
.main{
    
    position: relative;
}
.main ul{
    width: 1200px; height: 300px;

}
.main li{
    display: none;
    width: 1200px; height: 300px;
    position: absolute; left: 0; top: 0;
}
.gnb {
    float: right;
    width: 600px; height: 100%;
}
.gnb > ul > li{
    float: left;
    width: 150px; height: 100%;
    line-height: 100px; text-align: center;
    position: relative;
}
.gnb .mainnav{
    display: block; width: 100%; height: 100%;
   box-sizing: border-box;
    font-size: 18px; font-weight: bold; color: #333;
}

.gnb li:hover .mainnav{
    color: #00517c;
    border-bottom: 3px solid #00517c;
}

.subnav{
    display: none;
    position: absolute; top: 100px; left: 0;
    z-index: 5000;
    width: 150px; height: 200px;
    line-height: 50px;
    border-left: 1px solid #ccc; box-sizing: border-box;
}
.subnav li{width: 100%; height: 50px;}
.subnav a{display: block; width: 100%; height: 50px;}

.subnav a:hover{
    background-color: #ededed; color: #00517c;
}

.subbg{
    display: none;
    position: absolute; top: 100px; left: 0;
    z-index: 4000;
    width: 100%; height: 200px;
    border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
    box-sizing: border-box; 
    background-color: #fff;
}


$(document).ready(function(){

    var num = 1;
    $('.main li').first().fadeIn(0);
    
    setInterval(function(){
        if(num < 3){
            num++;
            $('.main li').fadeOut('slow');
            $('.main li').eq(num - 1).fadeIn('slow');
        }else{
            num = 1;
            $('.main li').fadeOut('slow');
            $('.main li').first().fadeIn('slow');
        }
    },3000);
});

$(document).ready(function(){
    $('.gnb').hover(function(){
        $('.subnav,.subbg').stop().slideDown('fast');
    },function(){
        $('.subnav,.subbg').stop().slideUp('fast');
    });
});

실제 front _ 메뉴에 마우스 :hover

//yesterday wished to today list

. 확신을 갖고 임하기 🤨

. react 인프런 강의 chapter 1 수강하기 ✔

. 웹 페이지 js 기능 넣기 ✔

 

 

tomorrow wish list

. 택배홈페이지 레이어팝업 기능 넣기

. 리액트 강의 수강하기

. 리액트 js 및 이미지 넣는 방법 알아서 적용해보기

728x90
반응형
저작자표시

'IT To do and To was' 카테고리의 다른 글

22년 3월 14일_헉 맞네 화이트 데이..!, pycham기초코딩  (0) 2022.03.14
22년 3월 13일_brackets popup 넣기, React 강의 및 이미지 넣기  (0) 2022.03.13
22년 3월 11일_miniproject 2days, brackets new page create  (0) 2022.03.11
22년 3월 10일_미니프로젝트의 시작  (0) 2022.03.10
22년 3월 9일_C언어 2주차  (0) 2022.03.09

'IT To do and To was' 관련글

티스토리툴바