HTML: 기본, 요소, 경로지정
florent의 개발 적응기
이 글의 주요 내용
[인터넷과 웹사이트 기본 개념]
[HTML/CSS/JS의 대략적인 정의]
[HTML의 요소(element)]
[헤딩(heading) 요소]
[문단(paragraph) 요소]
[목록(List) 요소]
[앵커(anchor) 요소]
[이미지(image) 요소]
[HTML 내 파일 경로 지정하기]
[웹 페이지(Webpage)]
[인터넷과 웹사이트 기본 개념]
인터넷: 여러 컴퓨터를 연결하는 많은 케이블 역할
인터넷의 작동 원리: 컴퓨터가 도메인으로 요청을 보냄 → ISP(인터넷 서비스 제공자)가 해당 요청을 받은 후 DNS에 넘김 → DNS가 IP 주소를 찾음 → (정보가 렌더링되고 전송됨) ISP가 그 정보를 받은 후 컴퓨터에게 전송 → 컴퓨터가 정보를 받음
컴퓨터는 DNS 서버의 IP 주소로 직접 웹에 접근할 수도 있음
DNS 서버는 보통 3가지 종류의 정보를 보냄: HTML, CSS, JavaScript
[HTML/CSS/JS의 대략적인 정의]
HTML: 웹사이트의 컨텐츠(content)를 담당 ⇒ 만약 웹사이트가 집이라면, HTML은 벽돌 (원재료)
CSS: 스타일(style)을 담당 ⇒ 웹사이트의 외관을 결정
JavaScript: 웹사이트가 기능 및 동작(functionality)하게 해줌 ⇒ 유저와 상호작용이 가능
[HTML의 요소(element)]
HTML은 기본적으로 태그(<tag></tag>)를 통해 요소를 구성
각 요소의 앞 태그에는 ‘속성(attribute)’을 가질 수 있음 ⇒ <tag attribute1=”value” attribute2 = “value></tag>
빈 요소(void elements)
비어 있지 않은 요소(non-void elements): <p> 또는 <h#>와 같이 콘텐츠를 포함하는 요소를 의미
빈 요소 태그는 다른 요소들(=비어 있지 않은 요소)과 달리 컨텐츠를 포함하지 않으며, <hr /> (수평선 요소)와 같이 닫는 태그가 끝에 위치함
수평선 태그 <hr /> = 콘텐츠를 분리하는 수평선 생성
줄 바꿈 태그 <br /> = 콘텐츠 내에서 줄 바꿈 생성 ⇒ 개별의 컨텐츠인 경우 줄 바꿈 태그를 사용해 문단을 구분하지 말고 각 문단에 문단 태그를 사용할 것 → 의미론적 명확성과 구조화, 접근성, 유지보수 등의 이유
빈 요소 태그는 슬래시 없이 빈 요소 코드를 사용할 수 있지만(ex. <br /> = <br>, 다른 태그들과 구분 및 가독성을 위해 슬래시를 사용하는 것이 좋음
헤딩(heading) 요소: <h#></h#>
HTML Heading 태그는 h1부터 h6까지 있음
숫자가 작을수록 크기가 크며, 중요하거나 분류의 기준이 됨을 의미하므로 남용해선 안 됨
여러 Heading을 사용시 숫자를 건너뛰지 말고 순차적으로 사용해야 함(ex. <h1></h1> 사용 후 <h3></h3>로 넘어가는 것)
문단(paragraph) 요소: <p></p>
<p>(paragraph) 태그를 사용하면 웹사이트에서 문단이 시각적으로나 컨텐츠적으로나 분리되고 구분됨
문단이 웹사이트에서 어떻게 보이는지 테스트할 때 사용하는 사이트: lipsum.com / baconipsum.com / broipsum.com
목록(List) 요소: <ul 또는 ol><li></li></ul 또는 ol>
목록 요소는 순서형 목록(<ol></ol>)과 비순서형 목록(<ul></ul>)으로 나뉘며, 각 목록은 항목을 나타내기 위해 항목 태그(<li></li>를 포함해야 함
순서형 목록(<ol></ol>): 숫자로 항목을 표시한 목록을 구성
비순서형 목록(<ul></ul>): 글머리 기호(bullet point)로 항목을 표시한 목록을 구성
항목 태그(<li></li> 내에 목록 태그를 넣어 추가적인 목록을 끼워넣을 수 있음 ⇒ 전체 리스트를 들여쓰기(indentation)하여 목록 내에 목록을 중첩(nest)시킬 수 있음 → '중첩 목록' 생성
앵커(anchor) 요소: <a></a>
태그 내 컨텐츠를 하이퍼링크로 만듦
href 속성: Hypertext REFerence의 줄인말로, 해당 요소가 연결할 목적지의 경로 혹은 URL을 지정
draggable=true/false → 사용자가 콘텐츠를 클릭하고 드래그할 수 있게/없게 만듦
이미지(image) 요소: <img />
src 속성: SouRCe의 줄인 말로, 리소스를 지정할 때 사용하는 속성 ⇒ <img>, <video>, <audio>, <script>, <iframe>에 사용됨
앵커 태그와 달리 이미지 태그는 자체 폐쇄 슬래시를 포함 (= 빈 요소)
alt 속성은 대체 텍스트 설명을 나타내며, 소수자를 위해 음성으로 이미지를 설명
[HTML 내 파일 경로 지정하기]
파일 경로(File path)
절대(absolute) 파일 경로: 루트에서 시작해 특정 파일이나 폴더에 도달할 때까지 모든 폴더를 탐색 → 예: C:/Project/Images/cat.png ⇒ 컴퓨터에서 탐색할 때 유용
상대(relative) 파일 경로: 절대 파일 경로보다 짧으며 상위 폴더가 이동해도 영향을 받지 않음 ⇒ 웹 개발에 유용 (파일이 옮겨지는 경우가 있기 때문에, 절대 경로를 사용하면 코드가 작동하지 않을 위험이 크기 때문)
특수 문자
‘..’(두 점): 상위 디렉토리 ⇒ ex. ../cat.png = 상위 디렉토리에서 cat.png 파일 지정
‘.’(한 점): 현재 디렉토리 ⇒ ex. ./cat.png = 현재 디렉토리에서 cat.png 파일 지정
[웹 페이지(Webpage)]
하나 또는 여러 개의 HTML 페이지가 프로젝트에 포함되어 여러 페이지로 구성된 웹사이트를 형성
페이지를 사용하려면 소스 속성이 다른 페이지를 가리키는 앵커 태그를 사용하고 href 속성을 사용
<!DOCTYPE html>: DOCTYPE 선언, 브라우저에 작성된 HTML 버전을 알림
<html lang="en">: HTML 기본 구조의 루트, 모든 요소가 이 안에 포함
<head>: 웹페이지에서 사용자에게 보이지 않는 영역으로, 중요한 정보(ex. 메타데이터, 스타일시트 링크, 제목 등)가 head 태그 안에 포함
<body>: 사용자에게 노출될 웹페이지를 구성하는 영역,
호스팅(Hosting)
호스팅은 웹사이트를 인터넷에 공개하는 과정
로컬 개발 = 웹사이트의 모든 파일이 컴퓨터에 로컬로 저장됨 → 다른 사람들이 접근하려면 모든 파일을 복사해야 함
웹 호스팅 = 웹 서버에 웹사이트(및 파일)를 업로드하여 인터넷에 연결할 수 있도록 함
