[Web] 1. 파일 다루기

 

C / web_projects / test-site / 1~4

1. index.html: 홈페이지의 내용 포함, 즉 사이트에 처음 접속시 나오는 화면(텍스트&이미지). 텍스트 에디터로 작성.
2. images 폴더: 사이트에 이용할 모든 이미지
3. styles 폴더: CSS 코드 포함 (문자, 배경색 세팅 등)
4. scripts 폴더: JavaScript 코드를 포함, 즉 사이트에 상호작용하는 기능을 추가할 때 (클릭할 때 자료를 불러오는 버튼 등)

HTML에 이미지 불러오기:

    <img src="" alt="My test image">

 

파일 경로 관련 규칙

• 호출하는 HTML 파일과 같은 디렉토리에 있는 파일을 연결하려면 파일이름만 사용하면 됩니다. 예시: my-image.jpg.
• 하위 폴더에 위치한 파일을 참조하기 위해서는, 디렉토리 이름과 전방향 슬래시(/)를 경로 앞에 추가합니다. 예시: subdirectory/my-image.jpg.
• 호출하는 HTML 파일의 상위 디렉토리에 있는 파일을 연결하려면, 두 점을 찍어야 합니다. 예를 들면, 만약 index.html가 test-site의 하위 폴더 안에 있고 my-image.png가 test-site 안에 있을 때, 여러분은 ../my-image.png 경로를 통해 index.html에서 my-image.png를 참조할 수 있습니다.
• 여러분이 원하는대로 조합해서 사용할 수도 있습니다, 예를 들면, ../subdirectory/another-subdirectory/my-image.png.