부트스트랩

개발자 macan·2022년 4월 6일

개발 - 공부

목록 보기

17/28

부트스트랩을 통해 카드 뉴스 만들기

하이퍼링크 쓰는 법

<a href="https://www.naver.com" target="self"> </a>

. target : 다른 웹 브라우저 창이나 프레임 셋 기능을 이용하여 프레임창에
하이퍼 링크로 연결한 문서가 나타나게 합니다.
지정하지 않았을 경우 같은 웹 브라우저 창에 하이퍼링크로
연결한 문서가 나타납니다.

  1. blank  : 새로운 웹 브라우저 창에 하이퍼 링크로 연결한 문서가  

                나타나게 합니다.

  2. parent : 프레임 문서의 구조에서 하이퍼링크로 연결한 문서를
                현재 프레임이 포함된 상위 프레임 창에 나타나게 합니다.

  3. top    : 프레임 문서의 구조라 할지라도 웹 브라우저 창의 형태로 
                하이퍼링크로 연결한 문서를 보여줍니다.

  4. self   : 현재와 같은 웹브라우저 창에 하이퍼링크로 연결한 문서를

               보여줍니다.

  5. 프레임 이름 : 프레임 문서의 구조에서 지정한 프레임 창에
                        하이퍼 링크로 연결한 문서를 보여줍니다.

글씨 굵게 하는 법은 다음과 같다.

css에서 font-weight를 설정한다.

body에서

<b></b>

를 작성하면 된다.

코드 전문은 다음과 같다.

```

<!-- 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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Jua&display=swap" rel="stylesheet">

<style>
    * {
        font-family: 'Do Hyeon', sans-serif;
        font-family: 'Jua', sans-serif;
    }

    .wrap {
        width: 900px;
        margin: auto;
    }

    .ps {
        color: blue;
        text-decoration-thickness: initial;
    }

</style>