안녕하세요 상훈입니다.

프론트엔드 부트스트랩 프레임워크를 사용하고 싶을때,

cdn으로 class와 id에 대한 javascript, css를 적용하는 방법을 포스팅하겠습니다.

 

아래의 링크를 복사하여 head 태그 안에 넣는 방법(1)

<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

<!-- Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

 

이곳에 들어가 해당되는 태그들을 복사하여 head 태그 안에 넣는 방법(2)

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

예시

이와 같이 head 태그 내에 넣는것이다.

반응형
저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

[HTML] a 태그에 꼭 추가 해야 하는 속성(Attr)  (0) 2025.03.07
[HTML] img 태그 현명하게 사용하기  (0) 2023.05.29
[NVM] Node.js 버전 낮춰서 Nuxt.js 프로젝트 구동하기 / window  (0) 2022.11.11
VSCode - HTML Formatter 설정하는 방법, html 서식 지정하기  (0) 2022.05.23
[ Html ] Title 이미지(Image) / 아이콘(Icon) 적용하는 방법  (0) 2021.10.05

 

안녕하세요 상훈입니다.

웹페이지에서 title에 적혀져 있는 icon 혹은 image를 변경하는 방법을 포스팅하겠습니다.

 

title 영역에 이미지/icon 표시

 

기본 Format

<link href="이미지경로" rel="shortcut icon" type="image/x-icon">

 

예시)

<!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> title name </title>
    
    <link href="../images/image-example.png" rel="shortcut icon" type="image/x-icon">
    
</head>

 

직접 이미지를 다운로드 받아 경로에 넣고 링크를 해주었습니다. 

 

감사합니다.

반응형
저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

[HTML] a 태그에 꼭 추가 해야 하는 속성(Attr)  (0) 2025.03.07
[HTML] img 태그 현명하게 사용하기  (0) 2023.05.29
[NVM] Node.js 버전 낮춰서 Nuxt.js 프로젝트 구동하기 / window  (0) 2022.11.11
VSCode - HTML Formatter 설정하는 방법, html 서식 지정하기  (0) 2022.05.23
[ BootStrap ] 부트스트랩 cdn 적용하는 방법  (0) 2021.10.06

React.js hook를 사용하려고 하던 와중 처음부터 이러한 에러를 대면했다...

Uncaught SyntaxError: Cannot use import statement outside a module

문제점

1. 리액트 훅을 기본적으로 적용하는 법을 몰랐다.

 

 

해결방법

1. script 를 html에 적용시키는 과정에서 script의 type을 지정해주어야 한다.

<script type="text/babel" src=" "> </script>

type="text/babel" 혹은

<script type="text/jsx" src="./01.useState.js"></script>

type="text/jsx"로 해결이 가능하다.

스크립트 타입을 변경해주시길 바랍니다.

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React-hooks ] useState를 활용한 증가버튼, 감소버튼 구현하기  (0) 2021.09.03
[ React.js ] 리액트 훅(React-Hooks) 시작하기 - 01. 프로젝트 구동  (0) 2021.09.03
[ React.js ] 체크박스, 체크 이벤트, 타이머, 스톱워치 응용 가능, 예제  (0) 2021.09.01
[ React.js ] Checkbox event, 체크박스 체크 이벤트, 예제  (0) 2021.09.01
[ React.js ] input, onChange 이벤트, 입력창 핸들링, 예제  (0) 2021.09.01

+ Recent posts

티스토리툴바