패스트캠퍼스 챌린지 4일차 - Part1. Ch3

Ch3. 무작정 시작하기

 

이번에는 화면에 이미지를 출력해보겠다. 참고로 파일들을 관리할 땐 css, js, images 폴더 등으로 분류해서 작업하면 편하다. 이 때 index.html은 최상위 경로(Root Path)에 존재해야한다.

img 태그를 넣은 후 src에 이미지의 주소, alt 에는 대체 텍스트 즉 이미지가 출력되지 못하는 경우 대신 출력할 텍스트를 넣어준다. 

이미지 출력해보기

 

 

링크를 넣고 싶을 땐 a 태그를 이용한다. href에 링크의 주소를 적고, 태그 사이에 내용을 넣어주면 해당 내용을 클릭했을 때 링크로 넘어가게 된다. href에 파일이 아니라 폴더 경로만 적으면 해당 폴더에서 자동으로 index.html 파일을 찾아 해당 내용을 출력해준다.

 

다음으로 개발자 도구에 대해 간단한 사용법을 알아보겠다. 브라우저에서 개발자 환경을 열고 원하는 부분을 선택하고 요소탭을 보면 자동으로 해당하는 부분이 표시된다. 아래에서 해당 코드에 입혀진 스타일도 확인할 수 있다. 여기서 element.style 에 css를 임시로 직접 입력해 볼 수 있다. 물론 임시로 적용한 것이므로 새로고침을 하면 사라진다.

 

---

경로는 상대 경로와 절대 경로로 나눌 수 있다. 

상대 경로에서 ./ 는 생략 가능하며 주변에서 찾는 개념, ../ 는 상위 폴더에서 찾는 개념이다.

절대 경로에서는 http(https) 로 원격의 다른 사이트를 의미하거나 / 로 루트 경로를 나타낸다.

 

my_project 폴더 내에 images 폴더<heropy.png,  css 폴더<main.css,  index.html 이렇게 파일이 있을 때

• index.html 파일을 기준으로 heropy.png의 위치를 보면

상대경로 : ./images/heropy.png 혹은 images/heropy.png

절대경로 : /images/heropy.png

 

• main.css 파일을 기준으로 heropy.png의 위치를 보면

상대경로 : ../images/heropy.png

절대경로 : /images/heropy.png

 

절대경로는 기준 파일의 위치와 상관없이 경로가 모두 일치하는것을 볼 수 있다!!

 

---

4일차 완료^_^

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa