[개발일지] jQuery 다뤄보기 / show, hide, css, text

* 개발자도구[F12] - Console 에서 스크립트를 실행해 볼 수 있다.

1. jQuery 사용하기

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다.

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

jQuery를 사용하기 위해 상단 링크에 접속하여 "Goofle CDN"을 복사해서 head 안에 넣어준다.

부트스트랩을 사용하는 경우에는 부트스트랩 탬플릿 안에 이미 있음.

1. div 보이기/숨기기

$('#DIV아이디').show()

$('#DIV아이디').hide()

2. css값 가져와보기

$('#DIV아이디').css('display(원하는 css값 입력)')

3. 태그 내 텍스트 입력하기

$('#태그아이디').text('넣고싶은 텍스트 입력')

4. 태그 내 html 입력하기

let temp_html =`html소스`

$('#html소스 추가할 부분 아이디').append(temp_html)

2. jQuery 적용하기

예시 : 포스팅박스 열기/닫기 기능

See the Pen 포스팅박스 열기/닫기 by MAY486 (@MAY486) on CodePen.

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>부트스트랩 연습하기</title>


    <style>
        .wrap {
            width: 1200px;
            margin: 0 auto;
        }

        .posting-box {
            width: 600px;
            margin: 50px auto;
            padding: 50px;
            border: 5px solid #000;
            border-radius: 20px;
            display: none;
        }
    </style>

    <script>
       function openclose() {
           let status = $('#post-box').css('display');
           if (status == 'block') {
               $('#post-box').hide();
               $('#btn-posting-box').text('포스팅박스 열기');
           } else {
               $('#post-box').show();
               $('#btn-posting-box').text('포스팅박스 닫기');
           }
       }
    </script>
</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
            featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅 박스</a>
        </p>
    </div>

    <div class="posting-box" id="post-box">
        <div class="form-group">
            <label>아티클 URL</label>
            <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
                   placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">간단 코멘트</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>

    <div class="card-columns" id="card-box">
        <div class="card">
            <img class="card-img-top" src="https://www.codingfactory.net/wp-content/uploads/abc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.codingfactory.net/wp-content/uploads/abc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.codingfactory.net/wp-content/uploads/abc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.codingfactory.net/wp-content/uploads/abc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.codingfactory.net/wp-content/uploads/abc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.codingfactory.net/wp-content/uploads/abc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
</div>
</body>

</html>

저작자표시

'코딩' 카테고리의 다른 글

[개발일지] jQuery + Ajax 시작, JSONveiw 설치, 연습하기 (0)	2022.01.20
[개발일지] jQuery 빈칸 체크, 이메일 판별 함수, 텍스트 입력/지우기 (0)	2022.01.13
[개발일지] 웹개발 : 부트스트랩, 예쁜 CSS 모음집 (0)	2021.12.22
[개발일지] 웹개발 : 구글 웹 폰트 사용법 (0)	2021.12.13
[개발일지] 웹개발 : 파이참 라이센스 등록 / HTML, CSS 기본내용 (0)	2021.12.07

배움공유

[개발일지] jQuery 다뤄보기 / show, hide, css, text