Notice
Recent Posts
Recent Comments
Link
250x250
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

바닥부터 시작하는 개발 공부

[프론트엔드]혼자서 공부하기 day1: HTML에서 java script, css, image 불러오기 본문

프론트엔드

[프론트엔드]혼자서 공부하기 day1: HTML에서 java script, css, image 불러오기

Im_light.J 2023. 4. 10. 22:04
728x90

Java sript, css, image 파일을 불러와서 다음의 결과물을 만들어보겠습니다

 

 

 

1. jave script 

 

아래와 같이 main.js로 저장한 java script 파일을 불러와보겠습니다

 

#main.js 

console.log('lightJ')

F12를 들어갔을때 나오는 console 창에서 lightJ라는 텍스트를 출력하게 해보겠습니다 

<head> 
	<script src="./main.js"></script>

<head>태그에서 다음과 같이 파일을 불러옵니다

 

이때 src = 파일의 상대 경로입니다  그러니까 이 경우에는 main.js는 html 파일과 같은 폴더에 위치하고 있습니다 

 

 

2.CSS

 

CSS는 html로 나타내지는 페이지에서 디자인을 담당하는 친구입니다. 

마찬가지로 html 내에 동일하게 구현할 수 있지만 

프로젝트 관리/ 가독성(아마도..?)를 위해서 별도로 관리하는 거 같습니다 

 

#main.css 
div {
  color: red;	
	font-size: 100px; 
}

java script를 불러올 때는 <script>라는 태그와 src를 통해서 경로를 지정해주었습니다 

css에서는 <link>라는 태그를 사용해서 css파일을 불러옵니다 

 

 

<link rel=역할 href = 상대경로>입니다 

 

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

 

 

3.Image

 

이미지를 불러오는 태그입니다

githup의 README.md를 많이 활용해보신 분들이라면 

익숙한 태그일거 같습니다 

 

<img src =상대경로 alt =이미지를 표시못하는 경우 대체하는 텍스트>

 

위에서와는 다르게 head가 아니라 <body>태그에서 불러와 줍니다

 

<body> 
	<img src="images/logo.png" alt="ImagefromHeropy"> 
    <img src="https://heropy.blog/css/images/logo.png" alt="주소로불러온이미지">
</body>

 

전체코드 

<!DOCTYPE html> 
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css"> 
    <script src="./js/main.js"></script> 

</head>
<body>
    <div>Hello world!</div>
    <img src="images/logo.png" alt="ImagefromHeropy"> 
    <img src="https://heropy.blog/css/images/logo.png" alt="주소로불러온이미지">
</body>
</html>

 

728x90

'프론트엔드' 카테고리의 다른 글

[프론트엔드]혼자서 공부하기 day3: CSS와 선택자  (0) 2023.04.11
[프론트엔드]혼자서 공부하기 day2: Html 기본  (0) 2023.04.11
[프론트엔드]혼자서 공부하기 day1: HTML(2) Hello world 출력  (0) 2023.04.09
[프론트엔드]혼자서 공부하기 day1: HTML(1) 태그의 종류  (0) 2023.04.09
'프론트엔드' Related Articles more
Comments