반응형

html 코드

 

결과 값

반응형

'Web 개발' 카테고리의 다른 글

인텔리제이 얼티메이트 학생 인증 무료사용 방법  (0) 2022.06.01
다음 카카오 주소 API 사용법 😀feat.완전쉬움주의!!😀  (3) 2022.02.16
(JQuery) 선택자  (0) 2022.02.04
(JQuery ) 적용 방법  (0) 2022.02.04
맥북에어 M1칩셋 후기 겸 M1칩셋으로 웹 개발 환경(이클립스 스프링 등)  (0) 2022.01.31
반응형

html  코드
html 화면
제이쿼리 코드

 

제이쿼리는 간결하면서도 뭔가 헤깔린다.

반응형

'Web 개발' 카테고리의 다른 글

다음 카카오 주소 API 사용법 😀feat.완전쉬움주의!!😀  (3) 2022.02.16
(JQuery) 선택자 및 속성  (0) 2022.02.04
(JQuery ) 적용 방법  (0) 2022.02.04
맥북에어 M1칩셋 후기 겸 M1칩셋으로 웹 개발 환경(이클립스 스프링 등)  (0) 2022.01.31
(HTML,CSS,JS) 자바스크립트 TODOlist만들기  (0) 2022.01.19
반응형

https://jquery.com/ 

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

제이 쿼리를 다운로드 받는다. 

 

src를 이용하게 import 시키면 완료 

 

 

반응형

'Web 개발' 카테고리의 다른 글

(JQuery) 선택자 및 속성  (0) 2022.02.04
(JQuery) 선택자  (0) 2022.02.04
맥북에어 M1칩셋 후기 겸 M1칩셋으로 웹 개발 환경(이클립스 스프링 등)  (0) 2022.01.31
(HTML,CSS,JS) 자바스크립트 TODOlist만들기  (0) 2022.01.19
(HTML,CSS,JS) 로 업다운게임 만들기.  (0) 2022.01.18
반응형

맥북 에어 m1칩셋을 하나 구매했다. 

그래서 개발환경 세팅을 해보려고 했다. 

 

이클립스

 

우선 이클립스는 m1버전이 2022-03버전으로 새로 나왔기 때문에 

인텔 예뮬을 쓰는것보다는 훨씬 괜찮았다. 

스프링 sts3를 깔고 레거시프로젝트까지해서 프로젝트를 올리니 생각보다 잘 구동이 되었다. 

하지만 호환성문제등을 내가 하는것정도에서는 나오지않았다. 

 

도커 

 

도커도 애플실리콘 기반의 프로그램이 릴리즈 되면서 빠른 호환성을 느낄 수있엇다. 

오라클 11g버전을 받고 시스템 계정 등을 생성하는것 까지 문제가 되지 않았다. 

 

sqldeveloper 

 

sqldeveloper는 인텔 예뮬로 실행을 해야 했다 .

jdk 11 m1버전을 설치하고 환경변수 까지 설정 한뒤 

sqldeveloper를 세팅을 잡으려고 했지만 실패했다.. 

아직까지는 호환성문제가 있는 듯 했다. 

그래서 대체제인 mysql로 대안을 찾았다. 

 

mysql 은 호환성에 대해서 전혀 문제가 되지않았다.

워크벤치를 설치하여 기본적인 테이블 및 카페24에서 호스팅서버로 올리니 정상적으로 작동이 되었다. 

 

톰캣 9.0 버전 

 

인텔맥과 상관없이 전혀 사용하는데 문제가 없었다. 

 

전반적인 평 

 

나는 아직 학원 수준의 개발을 한다. 

스프링으로 간단한 게시판만들기 정도 윈도우를 쓰면서 맥을 활용하여 개발을 하고 싶어 기존에 있던 인텔맥을 형에게 처분한 뒤 

m1칩셋의 맥북에어를 구매하였는데. 

 

장점 1

 

빠른 구동속도 

현재 11세대 i7 노트북을 가지고 개발을 하여도 전혀 뒤쳐지지 않는 속도가 나왔다 오히려 서버구동시 속도는 m1이 훨씬 빨랏다. 

 

장점2 

 

발열

 

과연 발열이 존재하긴 할까...? 

 

장점3 

 

베터리 타임

 

약 15시간 정도 쓰는거 같다 이건 미쳤다. 

 

장점4

 

가성비 갑 이건 사라 두번사라 디자인도 이쁘다.

 

굳이 단점으로 뽑은것 

 

호환성

 

아직까지 jdk등 애플실리콘에서 m1칩셋이 나온뒤로 프로그램사들이 발빠른 패치로 인해 사용시 전혀 문제가 되지 않았으나

오라클은 맥에서 사용하기가 학원생의 실무 경험으로는 조금 어려웠다. 

 

 

 

반응형

'Web 개발' 카테고리의 다른 글

(JQuery) 선택자  (0) 2022.02.04
(JQuery ) 적용 방법  (0) 2022.02.04
(HTML,CSS,JS) 자바스크립트 TODOlist만들기  (0) 2022.01.19
(HTML,CSS,JS) 로 업다운게임 만들기.  (0) 2022.01.18
(Web) 드디어 첫 사이트 완성하다. (HTML, CSS)  (0) 2022.01.11
반응형

집안에 굴러다니던 아이폰se1을 찾아서 약 1주일 정도 써본 후기.

 

우선 나는 아이폰12pro를 썻으나 우연히 발견한 se1을 일주일간 써보았다. 

 

1. 디자인 

 

우선 디자인은 정말 잘나온듯 하다. 

 

지금 아이폰12와 비교해봐도 압도적으로 .. se1압승이다. 

그리고 너무나 가벼운 무게이다. 

 

12프로와 비교해보면 약 100g정도 차이나는것 같은데 익숙해지면 진짜 이게 핸드폰이 맞나 

장난감인가 싶다.

 

2. 성능

 

과연 2022년도에 2016년도에 나온 폰 기준으로 쓸만 할까 생각을 했다. 

솔직히 나에게 12pro는좀 고스펙이다 즉 고스펙이 쓸모 없다는 이야기 이다. 

나는 평소에 웹툰을 보던가 카톡 웹서핑 주식 이정도 즉 게임을 안한다. 

그래서 a9칩 성능으로 충분히 커버가 가능했다. 

하지만 램이 2기가 뿐이라 리프레쉬가 너무 나 쉽게 발생하였다. 

 

3. 결론 

 

즉 아이폰 12프로를 팔려고 중고장터에 내놓았다. 

나에게는 se1이 아직 현역으로 충분하다고 느꼇다. 

 

 

 

반응형

'일상' 카테고리의 다른 글

오미크론 자가격리 후기  (0) 2022.03.21
신당동 떡볶이 맛집 추천(아이러브떡볶이)  (0) 2022.02.21
개발자 직무 전환 회계에서 웹 개발자로(1) Feat. 국비학원  (0) 2022.02.18
파주 삼릉 근처 통일로 제빵소  (0) 2022.01.11
반응형

HTML 코드

<!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>Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">




    <!-- custom js -->

    <script src="./app.js" defer></script>

    <!-- custom css -->

    <link rel="stylesheet" href="./main.css">

</head>
<body>

   
    <div class="wrapper">
        <section class="todo-template">
            <h1 class="app-title">일정 관리</h1>
            <div class="content">
                <form class="todo-insert">
                    <input type="text" id="todo-text" placeholder="할 일을 입력하세요." autocomplete="off">
                    <i id="add" class="far fa-plus-square"></i>
                </form>
                <ul class="todo-list">

                   
                </ul>
            </div>
        </section>
    </div>
   
</body>
</html>

 

CSS 코드

 

body {
    background: skyblue;
    position: relative;
    width: 100%;
}

.wrapper{
    width: 400px;
    height: 400px;
    background: white;
    border-radius: 10px;
    margin : 100px auto;
    box-shadow: 5px 5px 5px 5px gray;
    overflow: hidden;
}

h1{
    text-align: center;
    background: #123451;
    margin: 0;
    padding: 10px;
    color: white;
}

.todo-insert{
    display: flex;
    position: relative;
}

.todo-insert input{
    width: 85%;
    height: 35px;
    background: wheat;
    border: 0px;
    margin-top: 5px;
    margin-left: 5px;
    box-sizing: border-box;
    border-radius: 5px;
}

.todo-insert i{
    font-size: 36px;
    text-align: center;
    width: 9%;
    position: absolute;
    left: 353px;
    margin-top: 5px;
}

.todo-insert i:hover{
    background: rgb(204, 203, 203);
}
ul{
    list-style: none;  
    padding-left: 0px;
   
}

li{
    padding: 5px;
}

li:nth-child(2n-1){
    background: lightgray;
}

.btn-outline-secondary {
    float: right;
}

.text_line {
    text-decoration:line-through;
}


JS코드



const $add_todo = document.querySelector('#todo-text');
const addbtn = document.querySelector('#add');
const $list = document.querySelector('.todo-list')

let cnt =1;



addbtn.addEventListener('click', function(){
    if($add_todo.value === ""){
        alert('할 일을 입력해주세요.');
    }else{
        const $li = document.createElement('li');
        $li.setAttribute("class","list-group-item");
        $li.setAttribute("id", "li"+cnt);
        $li.innerHTML = "<input type = 'checkbox' class ='checkbox'>";
        $li.innerHTML += $add_todo.value;
        $li.innerHTML += "&nbsp <button  class='btn btn-outline-secondary' type='button' onclick='remove("+cnt+")'>삭제</button>";
        $li.innerHTML += "&nbsp <button  class='btn btn-outline-secondary' type='button' onclick='correction("+cnt+")'>수정</button> <br>";
        $list.appendChild($li);
        $add_todo.value = "";
    }

});

function remove(cnt){
    let result = confirm('정말삭제하시겠습니까?');
    if(result){
        const li = document.getElementById('li'+cnt);
        $list.removeChild(li);
    }else{
        return;
    }
   
   
}

function correction(cnt){
    const li = document.getElementById('li'+ cnt);
    li.innerHTML = '<form><input type="text" id="corr-text"> <button type="button"id="corr-btn"  onclick="corr()">확인 </button><br> <form>';
    const $btn = document.querySelector('button');

    console.log(document.querySelector('#corr-text').value);
};

function corr(){
    const $li = document.createElement('li');
    const $corr2 = document.querySelector('#corr-text');
    $li.setAttribute("class","list-group-item");
    $li.setAttribute("id", "li"+cnt);
    $li.innerHTML = "<input type = 'checkbox' class ='checkbox' onclick ='abc()'>";
    $li.innerHTML += $corr2.value;
    $li.innerHTML += "&nbsp <button  class='btn btn-outline-secondary' type='button' onclick='remove("+cnt+")'>삭제</button>";
    $li.innerHTML += "&nbsp <button  class='btn btn-outline-secondary' type='button' onclick='correction("+cnt+")'>수정</button> <br>";
    $list.appendChild($li);
    const li = document.getElementById('li'+cnt);
    $list.removeChild(li);
}



const $check = document.querySelector('.checkbox');
 
완성본
 
반응형

'Web 개발' 카테고리의 다른 글

(JQuery ) 적용 방법  (0) 2022.02.04
맥북에어 M1칩셋 후기 겸 M1칩셋으로 웹 개발 환경(이클립스 스프링 등)  (0) 2022.01.31
(HTML,CSS,JS) 로 업다운게임 만들기.  (0) 2022.01.18
(Web) 드디어 첫 사이트 완성하다. (HTML, CSS)  (0) 2022.01.11
HTML 방문자 카운팅 커터 카운터  (0) 2022.01.10
반응형

html 코드

<!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>UP & DOWN 게임</title>

    <!-- reset.css -->

    <!-- custom css -->
    <link rel="stylesheet" href="./main.css">

    <!-- custom js -->
    <script src="./app.js" defer></script>

</head>
<body>

    <div class="wrapper">
        <section class="main">
            <h1 class="main-title">신나는 UP & DOWN 게임~!</h1>
            <article class="number-wrapper">
                <h2>
                    <em id="begin">1</em>부터 <em id="end">100</em>사이의 숫자를 입력하세요.
                </h2>
                <div id="numbers"></div>
            </article>
        </section>

        <aside class="result">
            <div id="up">UP!</div>
            <div id="down">DOWN!</div>
        </aside>

        <div id="finish">Congratulation!</div>
    </div>
   
</body>
</html>

 

 

 

js 코드

//게임에 필요한 데이터 객체
const gameData = {
    secret : Math.floor(Math.random()*100) + 1,
    answer : null, //사용자가 클릭한 숫자
    min : 1,
    max : 100
};

//숫자 아이콘 생성 함수
function makeNumberIcons() {

    //id=numbers 태그 안에다가 숫자 아이콘을 배치해 주세요.
    //숫자 아이콘의 개수는 객체의 min, max에 따라 달라집니다.
    //숫자 아이콘은 div태그이고 클래스 이름이 icon입니다.
    //리턴값은 id=numbers 태그 요소입니다.

    const $numbers = document.getElementById('numbers');
    const $frag = document.createDocumentFragment();

    for(let i=gameData.min; i<=gameData.max; i++) {
        const $icon = document.createElement('div');
        $icon.classList.add('icon');
        $icon.textContent = i;
        $frag.appendChild($icon);
    }
    $numbers.appendChild($frag);
    return $numbers;
}

//아이콘 전체 삭제 함수 정의
function clearNumberIcons($numbers) {
    for(let $icon of [...$numbers.children]) {
        $numbers.removeChild($icon);
    }
}

//up & down 애니메이션을 작동시킬 클래스 추가/제거 함수 정의
function executeUpDownAnimation(isUp) {
    const ANI_CLASS_NAME = 'selected';
    document.getElementById('up').classList.toggle(ANI_CLASS_NAME, isUp);
    document.getElementById('down').classList.toggle(ANI_CLASS_NAME, !isUp);
}

//정답을 맞췄을 때 처리를 수행할 함수 정의
function processCorrect($target) {
    //축하메세지 박스를 나타내게 하는 코드
    const $finish = document.getElementById('finish');
    $finish.classList.add('show');

    //정답 아이콘을 움직이게 하는 코드
    $target.setAttribute('id', 'move');
}

//정답을 판별해 주는 함수 정의
function checkAnswer($numbers, $target) {
    //객체에서 정답과 사용자의 선택값 가져오기
    const {secret, answer} = gameData;
    console.log(secret);
    const $begin = document.getElementById('begin');
    const $end = document.getElementById('end');

    //정답을 맞췄을 시 정답처리하는 함수를 호출 (processCorrect)
    //up 또는 down일 경우에는 min과 max값을 변경하고
    //executeUpDownAnimation 함수를 호출.
    if(secret === answer) {
        processCorrect($target);
        return;
    } else if(secret < answer) {
        //down일 경우
        gameData.max = answer - 1;
        $end.textContent = answer;
        executeUpDownAnimation(false);
    } else {
        //up인 경우
        gameData.min = answer + 1;
        $begin.textContent = answer;
        executeUpDownAnimation(true);
    }

    //판별 후에는 아이콘을 재 배치.
    clearNumberIcons($numbers); //현재 렌더링 되어 있는 아이콘들을 전체 삭제
    makeNumberIcons(); //min, max는 변경되어 있고 다시 아이콘을 배치
}


//핵심 실행 로직 즉시 실행 함수 (main 비슷한 역할)
(function() {

    const $numbers = makeNumberIcons();

    //숫자 아이콘 클릭 이벤트 (부모 요소에 이벤트를 설정)
    $numbers.addEventListener('click', e => {

        if(!e.target.matches('#numbers > .icon')) {
            return;
        }

        console.log(`${e.target.textContent} 클릭됨!`);

        gameData.answer = +e.target.textContent;

        //정답 체크 함수 호출
        checkAnswer($numbers, e.target);

    });

}());
 
 

css 코드 

 


/* reset */
a {
    color: inherit;
    text-decoration: none;
}

/* layout */
.wrapper {
    font-size: 18px;
    background: #8c8c8c;
    height: 100vh;
    position: relative;
}

section.main {
    width: 40%;
    background: #f6f6f6;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

section.main .main-title {
    padding: 30px 20px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    background: #a3f8ff;
    border-bottom: 1px solid #d3d3d3;
}

section.main .number-wrapper {
    padding: 50px 20px;
}

section.main .number-wrapper h2 {
    font-size: 22px;
    text-align: center;
    text-decoration: underline;
}

section.main .number-wrapper h2 em {
    font-size: 1.2em;
    font-weight: 700;
    color: red;
}

#numbers {
    width: 70%;
    height: 400px;
    border: 1px solid #000;
    border-radius: 10px;
    margin: 30px auto 0;
    padding: 30px 50px;
    overflow: auto;
}

#numbers .icon {
    width: 100px;
    height: 100px;
    font-size: 32px;
    font-weight: 700;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 100px;
    margin-right: 15px;
    margin-bottom: 10px;

    display: inline-block;
    cursor: pointer;
}

#numbers .icon:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

#numbers .icon:nth-child(4n) {
    background: orangered;
}
#numbers .icon:nth-child(4n-1) {
    background: skyblue;
}
#numbers .icon:nth-child(4n-2) {
    background: yellowgreen;
}
#numbers .icon:nth-child(4n-3) {
    background: orange;
}

/* UP & DOWN 아이콘 */

.result {
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
}

.result div[id] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 150px;
    margin-bottom: 30px;
}

#up {
    background: red;
}

#down {
    background: blue;
}

.result div.selected {
    animation: jumping 0.1s infinite linear alternate;
}

@keyframes jumping {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* finish 영역 */
#finish {
    width: 60%;
    height: 200px;
    background: tomato;
    font-size: 80px;
    font-weight: 700;
    border: 2px solid #000;
    border-radius: 20px;
    text-align: center;
    line-height: 200px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    opacity: 0;
    z-index: -10;

}

#finish.show {
    animation: showUp 1s linear forwards;
}

@keyframes showUp {
    0% {
        opacity: 0;
        z-index: -10;
        top: -50%;
    }
    50% {
        opacity: 0.5;
        top: 0;
    }
    100% {
        opacity: 1;
        z-index: 10;
        top: 50%;
    }
}

/* 정답 아이콘에 id=move가 붙으면 해당 아이콘이 커지면서 움직이도록 */
#move {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 10;
    border: 4px dashed #000;
    animation: move 2s linear forwards;
}

@keyframes move {
    0% {
        top: 0;
        transform: translateX(0) scale(1);
    }
    100% {
        top: 10%;
        transform: translateX(-50%) scale(2);
    }
}

 

완성된 사이트

 

 

 

※  모든 코드는 중x정보x리학원 이x민 강사님의 코드를 활용하여 제작하였음을 알려드립니다.

반응형

'Web 개발' 카테고리의 다른 글

맥북에어 M1칩셋 후기 겸 M1칩셋으로 웹 개발 환경(이클립스 스프링 등)  (0) 2022.01.31
(HTML,CSS,JS) 자바스크립트 TODOlist만들기  (0) 2022.01.19
(Web) 드디어 첫 사이트 완성하다. (HTML, CSS)  (0) 2022.01.11
HTML 방문자 카운팅 커터 카운터  (0) 2022.01.10
파일질라로 내 포트폴리오 사이트 올리기 (HTML, CSS)  (0) 2022.01.09
반응형

평소 자주 가는 산책 코스인 파주 삼릉에 가던 중 엄청 큰 통일로 빵 카페가 있엇다.

궁굼하여 한번 들어가봤다.

맛있는 빵들이 많았다 

거의 다 디저트류 의 빵들 

가격은 생각보다 높았다. 

사진은 흔들렸으나 평균 가격은 5000원 선이며 빵의 크기는 보통 빵보다 1.2배 정도 큰듯 했다. 

물론 모든 빵들의 퀄리티가 좋았다. 배만 고팟다면 더 많은 빵을 사먹었을 텐데 나중에 다시 한번 방문을 해봐야겠다.

 

내가산 빵 생크림이 안에 가득 들어가 있어 혈관은 죽여달라고 하지만 뇌는 뿅가는 맛이다. 

아메리카노 2잔까지 19,000원 이다 아아 2잔에 1만원 케잌 9천원 

 

근데 먹기가 좀 불편하다.. 

 

 

이건 오늘먹은 학원근처 밥집 맛있엇다.

 

근데 이건 왜올렷지..?

반응형

'일상' 카테고리의 다른 글

오미크론 자가격리 후기  (0) 2022.03.21
신당동 떡볶이 맛집 추천(아이러브떡볶이)  (0) 2022.02.21
개발자 직무 전환 회계에서 웹 개발자로(1) Feat. 국비학원  (0) 2022.02.18
2022년도에 보는 아이폰SE1(1세대) 리뷰  (0) 2022.01.19
반응형

드디어 HTML , CSS , 약간의 JS로 짠 나의 첫 포트폴리오 개재용 사이트가 완성 되었다. 

 

기능 설명을 하자면 

 

1. 슬라이드 다운

 

HOME 버튼 및 Testimonals까지 누르면 해당 페이지로 이동이 된다. 

 

사실 그외 기능은 없다. 아직 js를 잘 쓸줄 모르기 떄문이다. 

 

 

2. 포지션 fixed를 설정하여 상단 바 고정

 

 

상단바에 z-index를 1순위로 주어 어떤 포지션이 와도 상단에 고정되게 한다. 

 

 

3. 스킬 

 

 

사실 저기에 나온 skills에 대한 것은 꼼수를 부렸다. 

 

코드를 보자면 

 

  <div class="skill">
                <div class="skills__description">
                    <span>J-Query</span>
                    <span>10%</span>
                </div>
                <div class="skills__bar">
                    <div class="skills__value" style="width: 10%;"></div>
                </div>

 

위 의 식으로 스킬바 자체에 width를 적용하였다. ㅋㅋㅋ 

 

 

 

 

4. mywork 부분 

 

저기 위애다 이제 내가 한 포트폴리오 들을 올릴 예정이다. 

올해가 가기전에 4칸을 채우는 것이 목표이다. 

아직은 내 포트폴리오 사이트가 하나이기 떄문에 아무것도 없다

 

5. 사용 후기(?) 부분 

 

 

나의 동반자 일론머스크 형이 나에대해서 얘기를 한다. 

 

이것도 다른 사람이 직접 이야기를 해주면 좋지만 나중에 학원 강사님이나 주변 지인에게 직접 써달라고 부탁하고 싶다. 

 

 

 

이상 약 4일간의 작업을 마친 나의 첫 웹페이지가 세상에 탄생하였다. 

 

아직 베타 버전이지만 계속 업데이트를 할 예정이다.

 

마지막으로 주소이다.

 

mls0000.dothome.co.kr

 

 

반응형

'Web 개발' 카테고리의 다른 글

(HTML,CSS,JS) 자바스크립트 TODOlist만들기  (0) 2022.01.19
(HTML,CSS,JS) 로 업다운게임 만들기.  (0) 2022.01.18
HTML 방문자 카운팅 커터 카운터  (0) 2022.01.10
파일질라로 내 포트폴리오 사이트 올리기 (HTML, CSS)  (0) 2022.01.09
1. 내 포트폴리오 사이트 만들기 (HTML CSS)  (0) 2022.01.02
반응형
 

커터 카운터 : www.cutercounter.com/

 

로그인, 코딩없이 무료로 방문자 카운터 위젯을 사용할 수 있습니다.

 

Starting Count : 카운트 시작 숫자

Number of Digits : 자릿수

Your Website URL : 사이트 URL 입력

Counter Type : Page Views는 1명이 사이트에 방문해서 2개의 페이지를 봤다면 +2가 되는거고 Unique Visitors는 명당 +1이 됩니다.

Select Counter Style을 선택해주고 Get Your Counter HTML Code를 누르면 자동으로 소스가 생성됩니다.

원하는 위치에 소스를 넣어주면 방문자 카운터가 잘 실행되는 걸 보실 수 있습니다.

반응형

'Web 개발' 카테고리의 다른 글

(HTML,CSS,JS) 자바스크립트 TODOlist만들기  (0) 2022.01.19
(HTML,CSS,JS) 로 업다운게임 만들기.  (0) 2022.01.18
(Web) 드디어 첫 사이트 완성하다. (HTML, CSS)  (0) 2022.01.11
파일질라로 내 포트폴리오 사이트 올리기 (HTML, CSS)  (0) 2022.01.09
1. 내 포트폴리오 사이트 만들기 (HTML CSS)  (0) 2022.01.02

+ Recent posts

티스토리툴바