22년 3월 20일_웹페이지 제작, c언어 2교시

728x90

일요일[크루저 팔았당]

1. 웹페이지 제작

2. 자료형 변수 그리고 형변환(C언어 기반)

1. 홈페이지 완벽구현

html + js

css

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>하률 's web</title>
    <link rel="stylesheet" href="css/commn.css">
    <script src="js/common.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function(){
        var num = 1;
        setInterval(function(){
            if(num<3){
                $('.main ul').animate({
                  top: '-=' + 350
                },'slow');
                num++;
            }else{
                $('.main ul').animate({
                    top: 0
                },'slow');
                num = 1;
            }
        },3000);
    });

    $(document).ready(function(){
       $('.mainNav').hover(function(){
            $(this).find('+ .subnav').stop().fadeIn('fast');
            $(this).parent().mouseleave(function(){
                $(this).find('.subnav').stop().fadeOut('fast');
            });
        });
    });

    $(document).ready(function(){
       $('.popupOpen').click(function(){
          $('.popup').fadeIn(0);
       });
        $('.popup a').click(function(){
           $('.popup').fadeOut(0);
        });
    });
</script>
</head>

<body>
   <div class="popup">
       <h2>냥ㅇㅇㅃ만난썰</h2>
       <p>youtube에서 본것처럼 똑같이 재밌으신 분이였다<br>
           재치도 있었고 뭔가 더 친해질 수 있을 것만 같았다<br>
           손인사도 하고 다음에 또 올거냐고 재차 물어보셨다.<br>
            
           좀 더 친해지고 싶다.</p>
        <a href="#">닫기</a>
   </div>
    <div class="header">
        <h1><a href="#"><img src="imges/rogo.png" alt="로고"></a></h1>
        <nav 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>
        </nav>
    </div>
    <div class="main">
       <ul>
           <li><a href="#"><img src="imges/main1.png" alt="main1"></a></li>
           <li><a href="#"><img src="imges/main2.png" alt="main2"></a></li>
           <li><a href="#"><img src="imges/main3.png" alt="main3"></a></li>
       </ul>
    </div>
    <div class="contents">
        <div class="notice">
        <h1>3월 후기</h1>
        <ul>
            <li><a href="#" class="popupOpen">ㄴㅇ아빠와 친해졌어요!!</a><span>2022.03.20</span></li>
            <li><a href="#">웹디자인 기능사 시험</a><span>2022.03.21</span></li>
            <li><a href="#">go..</a><span>2022.03.21</span></li>
            <li><a href="#">bye.</a><span>2022.03.21</span></li>
            <li><a href="#">start</a><span>2022.03.21</span></li>
        </ul>        </div>
        <div class="gallery"><h3>갤러리</h3>
            <ul>
                <li><a href="#"><img src="imges/gal1.png" alt="gallery1"></a></li>
                <li><a href="#"><img src="imges/gal2.png" alt="gallery2"></a></li>
                <li class="last"><a href="#"><img src="imges/gal3.png" alt="gallery3"></a></li>
            </ul>
            </div>
        <div class="now"><a href="#"><img src="imges/baro.png" alt="바로가기"></a></div>
    </div>
    <div class="footer">
        <h1><a href="#"><img src="imges/bottomrogo.png" alt="로고"></a></h1>
        <div class="fNav">
            <ul>
                <li><a href="#">개인정보처리방침</a></li>
                <li><a href="#">저작권 정책</a></li>
                <li class="last"><a href="#">RSS</a></li>
            </ul>
            <p>Copyright ©️ 2021 HARYUL WEB SITE. all right reserved.</p>
        </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;
}
body{
    width: 1000px;
    height: 650px;
}
.header{
    float: left;
    width: 200px; height: 650px;
}
.main{
    float: left;
    width: 800px;
    height: 350px;
    position: relative;
    overflow: hidden;
}
.contents{
    float: left;
    width: 800px;
    height: 200px;
}
.footer{
    float: left;
    width: 800px;
    height: 100px;
    background-color: azure;
    position: relative;
}
.notice{
    float: left;
    width: 300px;
    height: 200px;
    padding: 0 10px; box-sizing: border-box;
}
.gallery{
    float: left;
    width: 300px;
    height: 200px;
    padding: 0 10px;
    box-sizing: border-box;
}
.now{
    float: left;
    width:200px;
    left: 200px;
    z-index: 1;
}
.header h1{
    width: 100%; height: 100px;
    padding-top: 20px;
    box-sizing: border-box;
}
.gallery h3{
    width: 100px; height: 50px;
    font-size: 18px;
    color: blue;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 2px solid #be0f00;
    line-height: 48px;
}
.gallery ul{
    padding: 25px 0;
}
.gallery li{
    float: left;
    width: 80px; height: 100px;
    margin-right: 20px;
    box-sizing: border-box;
}
.gallery .last{
    margin-right: 0;
}
.gallery li img{
    display: block;
    transition: 0.3s;
}
.gallery li img:hover img{
    opacity: 0.5;
}
.footer h1{
    float: left;
    width: 200px; height: 100px;
    padding-top: 20px; box-sizing: border-box;
}
.notice h1{
    width: 100px; height: 50px;
    font-size: 18px;
    color: aqua;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 2px solid #be0f00;
    line-height: 48px;
}

.notice li{
    width: 100%; height: 30px; line-height: 20px; font-size: 12px;
}
.notice li a{
    float: left;
    display: block;
    width: 200px;
    height: 2px;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 12px;
}
.notice span{
    float: right;
    display: block;
    width: 70px;
    height: 30px;
    padding-right: 10px;
    text-align: right;
    font-size: 12px;
    color: dodgerblue;
}
.footer h1{
    float: left; width: 200px; height: 100px;
    padding-top: 20px; box-sizing: border-box;
}

.fNav, li{
    display: inline-block; padding-right: 10px;
}
.fNav li:after{
    content: '|'; position: relative;
    left: 7px; top: -2px;
}
.fNav .last{
    padding-right: 0;
}
.faNav .last:after{
    content:'';
}
.main ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 800px; height: 1050px;
}
.main li{
    width: 800px; height: 350px;
}

.gnb{
    width: 100%
    padding: 20px;
    box-sizing: border-box;
}
.gnb > ul > li {
    position: relative; width: 100%;
}
.gnb .mainNav{
    display: block; width: 100%; height: 40px;
    line-height: 40px; padding-left: 10px;
    border-bottom: 1px solid #be0f00;
    box-sizing: border-box;

    font-weight: bold; font-size: 18px;
}
.gnb > ul > li:hover .mainNav{
    color: #fff; background-color: #be0f00;
}
.gnb .subnav{
    display: none;
    position: absolute; top: -40px; left: 160px; z-index: 1000;
    width: 160px; background-color: #be0f00;
    box-sizing: border-box; border: 1px solid #be0f00;
}
.gnb .subnav a{
    display: block; width: 100%; height: 40px;
    padding-left: 10px; box-sizing: border-box;
    line-height: 40px; color: aliceblue;
}
.gnb .subnav a:hover{
    background-color: aliceblue; color: #be0f00;
}

.popup{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6000;
    width: 300px;
    height: 300px;
    border: 5px solid #be0f00;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
}
.popup a{
    float: right;
    color: firebrick;
    padding-right: 10px;

}
.popup h2{
    font-size: 12px; color: #666666; line-height: 17px;
    margin-bottom: 10px;
}

변수의 선언

<변수의 자료형> 변수명[,변수명];

묵시적인 형변환

계산 결과에 의해 자동적으로 형이 변형됨

계산 결과는 값이 큰 자료형으로 자동변환됨

타입변환 규칙 char < short < int < long < float < double

[자료형] < unsigned [자료형]

명시적인 형변환

사용자에 의해 강제적으로 형을 변형함

Cast 연산자 이용

변수 앞에 괄호를 포함한 자료형으로 변환시킴

C언어는 함수 기반 언어로 크게 라이브러리함수(scanf, printf...등) 사용자 정의 함수로 나누어짐

사용자 정의 함수 사용 예

#include <stdio.h>

void prinInteger(int a, int b); . . . 함수 선언

void main() { . . . 함수 구현

int a =10, b =20;

printInteger(10, 20)

}

void printInteger(int a, int b){ . . . 함수 호출

printf("frist : %d second : %d " a,b);

}

C언어는 순차적 프로그램임

지역변수와 전역변수

변수의 선언 위치는 크게 함수의 내부와 함수의 외부로 나누어질 수 있음

지역 변수 - 함수의 내부에 선언되 변수 , 이 변수는 자신의 함수에만 사용이 가능한 변수

전역 변수 - 함수 외부에 선언되는 변수, 선언 위치부터 모든 함수에서 사용할 수 있는 변수

지역변수와 전역 변수가 동일한 이름으로 동시에 존재할 경우 지역변수를 사용함

기억 클래스 - 변수의 기억 공간의 위치

변수의 생존 기간 규정

c언어에서 변수 할당 가능 기억공간

메모리 스택 - 임시적 데이터를 저장하는 메모리 공간

메모리 동적공간(heap) - 사용자가 임의로 생성 삭제 가능한 데이터를 저장하는 메모리 공간

메모리 정적 공간(data) - 영구적인 데이터를 저장하는 메모리 공간

cpu의 레지스터 - cpu에 존재하는 빠른 공간

기억클래스의 종류

auto - 임시 저장공간인 스택에 저장_자동변수, 주로 함수나 블록의 내부에 선언되며 내부에서만 유효한 특징을 가짐, 지역변수의 역할

register - cpu레지스터에 저장_변수를 메모리 영역이 아닌cpu레지스터 영역에 기억 , 많은 수의 레지스터 변수를 선언 할 수 없음, register변수로 선언된 변수의 주소값을 참조할 수 없음, 실수형 데이터는 register로 지정할 수 없음

static - 메모리의 정적 공간에 저장_전역적 정적변수 = 함수 밖에서 선언되는 정적변수로 모든 함수에 영향을 미침 |지역적 정적변수= 함수나 블록 내부에 존재하는 정적변수로 사용 범위가 해당 함수와 블록으로 제한되지만, 그 값은 계속 지속함, 해당 함수의 종료 후에도 지속적으로 값을 유지함

extem - 다른 곳에 이미 정의된 외부변수의 사용을 선언

//yesterday wished to today list

. 이지팜 웹페이지 하나 구현 ✔

. 헷가리는 html, js 정리 및 수기 필기 get and upload ✔

. C언어 2교시 수강 ✔

tomorrow wish list

. C언어 2교시 복습하기

728x90

저작자표시

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

22년 3월 22일_웹 class 시작 (0)	2022.03.22
22년 3월 21일_깃 약간의 설명, 웹 디자인 기능사...공부 (0)	2022.03.21
22년 3월 19일_C언어 3주차, 웹디자인기능사 홈페이지 이미지 제작 (0)	2022.03.19
3월 18일_미니 프로젝트 끝(내용 x) (0)	2022.03.19
22년 3월 17_웃음을 주는 페이지 제작 끝이보인다 (0)	2022.03.17

웹, 앱 일대기_금.짜

22년 3월 20일_웹페이지 제작, c언어 2교시

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

티스토리툴바

« 2025/05 »
일	월	화	수	목	금	토
				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

22년 3월 20일_웹페이지 제작, c언어 2교시

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

'IT To do and To was' 관련글

티스토리툴바