본문 바로가기

728x90

프론트엔드/HTML

(6)
상대 경로, 절대 경로 경로라는 것은 특정 파일의 위치를 말합니다이때 경로를 2가지로 나눌 수 있습니다상대경로 : 현재 위치를 기준으로 파일, 리소스의 위치를 나타냄절대경로 : 현재 위치가 어디에 있든 정확한 위치를 나타냄예시: 현재 위치가 남산타워 케이블카 승강장에 있을 때절대경로절대경로는 웹 사이트의 파일이 인터넷 상의 정확한 위치를 나타냅니다.서울특별시 용산구 남산공원길 105상대경로상대경로는 현재 파일의 위치를 기준으로 다른 파일이나 리소스의 위치를 나타냅니다.케이블카를 탑승 후 하차만약 현재 위치가 부산역일 때절대경로서울특별시 용산구 남산공원길 105상대경로기차 탑승서울역 하차서울역버스환승센터(5번승강장)까지 이동402번 버스 탑승보성여중고입구 정류장 하차남산서울타워까지 걷기이렇게 현재 위치에 따라 경로가 달라지는 것..
[HTML] head태그 안에 들어가는 태그 알아보기 이번 글은 head 태그(페이지의 정보) 안에 들어가는 태그들에 대해 알아보겠습니다.1. link 태그 특징단일 태그: 태그는 닫는 태그 없이 단독으로 사용됩니다.rel 속성: Relationship의 약자로, 해당 속성은 가져올 문서와의 관계를 의미합니다. (예: stylesheet, icon 등)href 속성: 가져올 문서의 경로를 의미합니다. 상대 경로 또는 절대 경로로 설정할 수 있습니다.  2. script 태그특징src(Source) 속성: 외부 JS 파일을 연결할 때 사용합니다.내부 스크립트 작성 가능: HTML 문서 내에서 직접 script를 작성할 수 있습니다.3. meta 태그메타 데이터라는 말을 들어보셨을 겁니다. 메타 데이터란 데이터의 정보, 즉 데이터에 대한 데이터를 의미합니다...
[HTML] CSS, JS 연결하기 HTML 파일과 CSS 파일 연결하기index.html Hello World main.cssdiv { color: orange; font-size: 50px;} 현재 HTML 파일과 CSS 파일은 연결되지 않은 상태입니다.  head 태그에 CSS 연결하기head 태그는 현재 HTML의 정보를 나타내는 태그입니다. HTML 파일에 외부 파일을 연결할 때는 head 태그를 주로 사용합니다.head 태그 안에 CSS 파일 연결하는 방법 Hello World 연결이 되지 않을 경우 확인할 사항파일명이 잘못되었을 때주소를 잘못 입력했을 때입력 후 저장하지 않았을 때파일 위치와 파일명을 꼭 확인해주세요.  연결이 되었을 때이렇게 출력이 되는 것을 확인하실 수 있습니다. 의 역할 태그는 외부에 있는 파일을 ..
[HTML] HTML, HEAD, BODY 태그 HTML 문서의 기본 구조HTML 문서는 태그로 시작하여 태그로 끝납니다.시작 태그: 종료 태그: 이 태그는 HTML 문서의 전체 범위를 정의하며, 브라우저에 문서의 시작과 끝을 알려줍니다.HTML 문서의 구성문서의 전체 범위 ( 태그) 태그: HTML 문서의 시작과 끝을 정의합니다. 문서 전체를 감싸는 태그입니다.: HTML5 문서임을 선언합니다. 브라우저에 문서가 HTML5 표준을 따르도록 알려줍니다. 문서의 정보를 나타내는 : 문서의 문자 집합을 정의합니다. 보통 UTF-8을 사용하여 다양한 문자를 지원합니다.: 모바일 장치에서의 표시를 조정합니다.: 브라우저 탭에 표시될 문서의 제목을 정의합니다. 태그는 문서의 메타데이터를 포함합니다. 이 부분은 웹 페이지에서 직접 보이지 않으..
[HTML] <!DOCTYPE html> HTML의 태그 태그는 HTML 문서의 첫 번째 줄에 위치하며, 문서의 HTML 버전을 브라우저에 알리는 역할을 합니다. 이 태그는 문서가 어떤 HTML 표준에 따라 해석되어야 하는지를 브라우저에 지시합니다.HTML 버전HTML은 여러 버전이 있으며, 각각의 버전은 HTML의 문법과 기능을 정의합니다. 주요 HTML 버전은 다음과 같습니다:HTML 1.0: HTML의 첫 번째 버전, 기본적인 문서 구조를 정의합니다.HTML 2.0: 표준화된 HTML 문서 작성법을 제공하며, 폼과 테이블 같은 기능을 추가했습니다.HTML 3.2: 스타일 시트와 스크립트 지원을 포함하여 웹 페이지 디자인을 향상시켰습니다.HTML 4.01: 구조와 표현을 분리하고, XML 기반의 XHTML 문서로의 전환을 도왔습니다.XHT..
[HTML] HTML 기본 구조 HTML의 기본 구조와 주요 개념들을 다음과 같이 정리할 수 있습니다:HTML의 기본 구조 --> 태그 --> 안녕하세요  선언HTML 문서의 버전을 정의하며, 브라우저가 HTML을 해석하는 방식을 결정합니다.HTML5에서는 로 선언합니다.주석HTML 코드 내에서 설명을 추가할 수 있으며, 브라우저는 이를 무시합니다.주석은 형태로 작성됩니다.와 : 문서의 메타데이터를 포함합니다. 화면에 표시되지 않으며, 문서 제목, 문자 집합, CSS, 자바스크립트 등을 포함할 수 있습니다.: 문서의 실제 내용을 포함하며, 화면에 표시됩니다.요소 (Element)HTML 요소는 시작 태그, 내용, 끝 태그로 구성됩니다.예: 웹 페이지 제목HTML 작성 시 주의사항태그 이름의 대소문자태그 이름은 대소문자를 구분하지 않..

728x90