html, css, js 파일 연결하는 법

hazel's·2022년 2월 21일
0

html

목록 보기
2/3
post-custom-banner

html -> css 적용

1.html 문서의 부분에 로해서 css code 넣기

<head>
<meta charset="utf-8">
<style>
#example1 {
     background: url('img/image.png') no-repeat, url('img/bg.jpg') repeat;
    padding: 15px;
}
#div1{
    margin-left: 150px;
    margin-top: 150px;
    padding: 30px;
    width: 80%;
    height: 800px;
    background-color:#dddddd;
}
</style>
</head>

2.html tag안에 style 속성으로 css 넣기

<div class="row" style="padding-top: 10px;">

3.하나의 폴더를 만들어 html과 별도의 css파일을 만들어 연결하기

//html <head>안에 적용
<link rel="stylesheet" href="css/style.css">
//style.css
#div1{
    margin-left: 150px;
    margin-top: 150px;
    padding: 30px;
    width: 80%;
    height: 800px;
    background-color:#dddddd;
}

Javascript를 html문서에 적용하기

1.html 문서에 직접 적용

 <script>
   alert("error"); 
  </script>

2.js file을 만든 후 html에 적용하기

 //index.js 파일 
 alert("error);
 //html <body>에 적용.
  <script src ="index.js"></script>

1번의 경우 코드가 적을 경우 유용하고
2번은 코드가 길고 복잡할경우 유용하다.

profile
좋아하는 것을 하나하나 채워가면 행복해질꺼야
post-custom-banner

0개의 댓글