※ 프로젝트의 최상위 경로에(root 경로에) 'index.html' 파일이 존재해야 한다.
이미지를 출력하는 두 가지 방법
<img src="" alt="">
alt : 대체텍스트
1) 파일
<img src="./images/마시.png" alt="마시 그림">
2) 이미지 링크
<img src="https://pbs.twimg.com/profile_images/1796687739087446016/jt7bgGhd_400x400.jpghttps://pbs.twimg.com/profile_images/1791247395365511168/QcmZ5kF-_400x400.jpg" alt="마시 그림">
경로
1) 상대 경로
-
- ./
- ../ ※ 상위 폴더로 이동
2) 절대 경로
- http
- https
- / ※ 최상위 경로(root)로 이동
- //
| 127.0.0.1:5500 |
| http://localhost:5500/ ※ localhost = 컴퓨터 = 로컬 |
| 컴퓨터에서 VS Code의 라이브 서버를 5500번 포트에 새롭게 열어서 프로젝트를 출력하고 있는 것임. ※ 외부에서는 접근이 불가능함. |
로컬 환경: Computer에서 개발하는 것
그 로컬 환경에서 Live Server 같은 플러그인의 도움을 받거나 기타 등등 Computer 내에서 특정한 개발용 서버를 열어줄 수 있다. 그 개발용 서버는 각각의 포트 번호에 의해서 구별된다.
| index.html | main.css |
|
<body>
<div>Hello World!</div>
<img src="./images/마시.png" alt="마시 그림">
<img src=" https://pbs.twimg.com/profile_images/1796687739087446016/jt7bgGhd_400x400.jpghttps://pbs.twimg.com/profile_images/1791247395365511168/QcmZ5kF-_400x400.jpg " alt="마시 그림">
</body>
|
div{ color: red;
font-size: 100px;
}
|
| index.html | main.css |
|
<body>
<div></div>
</body>
|
div{
width: 200px;
height: 200px;
background: url("../images/마시지혜.png");
}
|
background: url("");
★ CSS 파일은 세미콜론 필수! JS 파일은 아님.
'FE' 카테고리의 다른 글
| [FE][06] HTML 개요: 요소, 속성, 태그, 내용, 속성 (0) | 2024.07.09 |
|---|---|
| [FE][05] 브라우저 스타일 초기화, Emmet (자동완성) (0) | 2024.07.09 |
| [FE][04] <a>, 개발자 도구, codepen (0) | 2024.07.07 |
| [FE][02] HTML 기본 태그 (0) | 2024.07.06 |
| [FE][01] Visual Code 기본 세팅 및 단축키 (0) | 2024.07.06 |