웹 사이트를 구성하는 파일

  

  내용에 사용할 수 있는 파일에 대해 알고 싶다.

  웹 페이지에 파일을 사용할 수 있는 규칙에 대해서 알고 싶다.

하나의 웹 페이지를 만들기 위해서는 최한 하나의 HTML파일이 필요하다. 다만 웹 페이지에 그림을 삽입하거나 디자인을 위해서는 CSS파일을 준비해야 하기 때문에 HTML 파일과 별도로 파일을 준비해야 합니다.

사용되는 파일과 확장자

HTML 파일: 확장자는 "html' 이나 'htm' ('htm'은 거의 사용하지 않음)

일반적으로 하나의 웹 페이지를 만들려면 하나의 HTML 파일을 준비해야 하지만 HTML 파일 안에는 다른 HTML 파일을 포함시키는 경우도 있습니다.

CSS파일: 확장자는 'css'

HTML은 페이지의 내용을 기술하기 위한 언어이므로 디자인 하거나 레이아웃을 만드는 구조는 없습니디다. 디자인이나 레이아웃을 한다는 것은 'CSS' 라는 HTML과 다른 언어로 이루어집니다.

JavaScript 파일: 파일 확장자는 '.js'

HTML과 CSS로 만든 웹 페이지는 한번 읽어 들이면 다시 읽어 들이거나 다른 페이지로 이동하기 전에는 변화가 없습니다. 그래서 내용의 일부를 다시 작성하면 자동으로 새로 읽어 들일 수 없으므로 사용자가 조작하기 쉽도록 Ul를 페이지에서 삽입해야 합니다. 이렇게 HTML과 CSS만으로 불가능한 기능을 추가하고 싶을 때 'JavaScript'라는 프로그래밍 언어를 사용합니다. 특히, 스마트용 웹 페이지를 만들 때  Ul등에서 필히 사용하고 있습니다.

그림 파일 

파일명	설명	확장자
JPEG 파일	주로 사진이나 색상이 많이 사용된 일러스트 등에 사용되는 파일 포맷	Jpg jpeg
PNG 파일	주로 색상을 적게 사용한 일러스트나 그림, 로고 등에 사용되는 포맷.  마스크를 적용할 수 있는 것이 특징으로 그림 주위를 투명하게 하여 배경과 어룰릴 수 있습니다.	png
GIF 파일	색상이 적은 그래픽으로 사용할 수 있는 포맷으로,그라테이션이 적용된 그림이라면 PNG 포맷으로 작성하는 것이 파일 용량을 작아지므로 현재는 GIF 파일을 거의 사용되지 않습니다. 다만, GIF 포맷은 ‘애니메이션 gif’라는 움직이는 만화 같은 그림을 제작할 수 잇는 특징이 있습니다. 요즘 길이가 짧은 동영상(움짤)이 인기가 있어서 그런 것을 만들 때 GIF 포맷을 사용합니다.	gif
SVG 파일	웹 페이지에서 사용할 수 있는 유일한 벡터 형식의 그림 파일입니다. 다른 그림 파일과 달리 확대, 축소해도 화질의 변화가 없다는 것이 특징입니다.
동영상 파일		Mp4
음악 파일		Mp3

파일 이름을 붙이는 방법

웹 사이트에 사용하는 파일의 이름은 기본적으로 다음과 같은 문자를 사용합니다. 

영문

숫자

하이픈(-), 언더바(_),마침표(.)

단,마침표는 한 글자만은 사용할 수 없다. 

1) 한글이나 한자 등 위에서 제시하지 않은 기호 등도 사용할 수 있지만 일반적으로 사용 안한다.

2) 영어는 대문자, 소문다 모두 사용할 수 있지만, 소문자를 사용하는 것이 안전하다.

    OS에 의해서 '대문자와 소문잘를 별도의 문자로 구분하는냐'에 따라 달라지기 때문입니다.

3) 웹 사이트를 제작할 때 Windows나 Mac을 사용한다. 이런 컴퓨터는 대문자와 소문자를 구별하지 

   하지 않습니다. 'About.html'과 'about.html을 다른 파일로 보지 않는다.

파일 이름 예	여부	설명
Product.html	o	사용 가능한 문자만을 사용하고 있음
Article-3027.html	o	사용 가능한 문자만을 사용하고 있음
10기사.html		일반적으로 한글, 한자 등은 사용하지 않음
logoBic.png		대문자 사용은 피하는 것이 안전함
News?html	x	?, $ 등의 기호는 사용할 수 없음
.updata-next.css	x	‘.’로 시작하는 문자는 웹 서버나 macOS에는 특수한 파일을 의미하므로 사용하지 않음

웹 사이트 폴더. 파일 구성

웹 사이트를 제작하려면 여러가지 파일을 준비해야 합니다.작업을 원활하게 진행하기 위해서는 파일을

 제대로 정리해 두어야 합니다.  또한 웹 사이트의 폴더 구조나 파일 이름이 그대로 URL로 표시되므로

 기본적으로 URL이 가능한 짧고 알기 쉽도록 주의를 기울이면서 폴더 구조를 설계해야 합니다. 특히,

다음과 같은 사항들이 중요합니다.

- 폴더나 파일 이름을 길게 사용하지 않는다.

- 폴더의 계층을 깊지 않게 한다.(폴더 안에 폴더를 만들 뿐이다)

- 폴더 이름이나 파일 이름만 봐도 어떤 내용인지 대략적으로 알수 있도록 명확한 이름을 붙인다.

기본적인 폴더. 파일 구성 1: (계층을 가급적 얕게 구성하는 경우)

웹 사이트의 폴더나 파일 구성 중에서 전형적인 것으로 'HTML 파일을 가능한 루트에 놓았을 겨우'입니다. 이 방법은 폴더 계층이 매우 얕기 때문에 URL이 짧게 표시됩니다. 소규모 웹 사이트에서 사용하기 좋습니다.

기본적인 폴더. 파일 구성 2: (카테고리 폴더를 만드는 경우 ) 

웹 사이트틔 Top 페이지를 루트 폴더에 두고 그 다른 페이지는 '카테고리 폴더'를 만들고 그 안에 저장하는 경우입니다. 폴더 계층은 깊어지지만 카테고리의 Top 페이지의 파일 이름이 'index.html'이 되므로 깔끔한 URL을 만들 수 있습니다.