본문 바로가기
반응형

프론트엔드/HTML6

HTML | 헤더 섹션 설계 : 헤더 (<header> 태그), 내비게이션 링크 (<a href="/">) ⭕ HTML | 헤더 섹션 설계 : 헤더 ( 태그), 내비게이션 링크 ()➡️ 헤더 ( 태그)시맨틱 태그의 일부로서, 웹 페이지 상단에 위치함주로 로고, 내비게이션 링크, 검색창 등 주요 정보를 그룹화함기능을 수행하기보다는 구조적인 의미를 가지는 역활 ➡️ 내비게이션 링크 ()사용자가 클릭 시 메인 페이지로 이동하는 절대 경로를 제공함서브 메뉴 구성: 태그로 묶인 요소들이 각각의 메뉴 항목을 나타내며, 기능이 완성되기 전까지는 로 설정하여 어떠한 동작도 하지 않도록 함구분선 (::before 사용): 메뉴 항목 간에 시각적으로 구분선을 추가함 ➡️ 검색창를 사용하여 사용자 입력을 사용함사용자가 입력 필드에 포커스를 맞췄을 때 테두리가 변경되도록 border 속성을 사용하여 시각적으로 구분되게 함 2024. 5. 16.
HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol) ⭕ HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol)➡️ 좋은 메타데이터란?웹 페이지의 내용을 정확하게 반영하고, 사용자가 검색할 만한 키워드를 포함하는 것다양한 레퍼런스를 살펴보면, 사용자가 클릭할 만한, 너무 길지 않은 등의 요소가 중요하다는 점을 강조함결론적으로 정답이 있다기보다는, 정확하고 사용자의 이목을 끌 만한 키워드가 포함되어야 한다고 생각됩니다. ✨ ➡️ 문자 인코딩문자 인코딩을 UTF-8로 설정함UTF-8은 대부분의 문자를 표현할 수 있는 인코딩 방식으로, 글로벌 콘텐츠에 권장함 ➡️ 모바일 뷰포트모바일 장치의 뷰포트를 설정함반응형 디자인에 필수적임  ➡️ 파비콘(favicon)프로젝트 루트 폴더에 favico.. 2024. 5. 16.
HTML 태그: 웹 개발의 기본, 태그의 중요성과 활용법 ✅ HTML 태그HTML 문서는 웹 페이지를 작성하기 위한 기본적인 구성 요소인 "태그"를 사용합니다. 태그는 주로 열리는 태그(opening tag)와 닫히는 태그(closing tag)로 구성되며, 닫히는 태그에는 슬래시("/")가 붙어 구분됩니다. 태그는 요소들을 정의하고 웹 페이지의 구조를 형성하며, 중첩하여 사용하여 여러 요소를 묶을 수 있습니다. 💡 W3C(The World Wide Web Consortium): 웹 기술 표준의 중심W3C는 국제적으로 웹 기술을 표준화하는 단체로, HTML 태그의 예제와 정의를 제공하는 공식 홈페이지를 운영합니다. 이 사이트에서는 예제를 통해 태그의 사용법을 시각적으로 이해할 수 있으며, 이론적인 내용을 학습하는 데 도움이 됩니다. 두 가지 학습 방법 모두 .. 2023. 11. 7.
HTML 코딩을 위한 환경 설정: 에디터 선택과 비주얼 스튜디오 코드 소개 ✅ HTML 코딩 실습 환경 준비HTML을 배우고 웹 개발 실습을 시작하려면 먼저 적절한 코딩 환경을 설정해야 합니다. 이를 위해 다양한 에디터(Editor)를 사용할 수 있으며, 각 운영체제에 따라 사용할 수 있는 텍스트 편집기(Editor) 목록이 있습니다.  💡 에디터(Editor)HTML 코드를 작성하려면 텍스트 편집기(Editor)가 필요합니다.윈도우: 기본적으로 포함된 "메모장"을 사용할 수 있습니다. 메모장은 가벼우며 HTML 코드를 작성하는 데 필요한 기능을 제공합니다.맥(macOS): macOS에는 "텍스트 편집기(TextEdit)"가 기본적으로 포함되어 있습니다. TextEdit은 HTML 코드 작성에 유용하며, "포맷" 메뉴에서 "순수 텍스트" 모드를 선택하면 HTML 코드를 작성할.. 2023. 11. 7.
HTML과 퍼블릭 도메인: 웹의 언어 ✅ HTML: HyperText Markup LanguageHTML은 웹페이지를 생성하는 언어로, 웹의 기본 구조를 정의하는 중요한 역할을 합니다. HTM은 "HyperText"와 "Markup Language"의 약자로, 하이퍼텍스트를 생성하고 구조화하는 데 사용됩니다. 하이퍼텍스트는 텍스트, 이미지, 링크 등 다양한 미디어 요소를 포함할 수 있는데, 이를 웹페이지 내에서 연결하고 표현하기 위해 HTML을 사용합니다.HTML 문서는 태그(tag)로 이루어져 있으며, 이 태그들은 컴퓨터와 브라우저에게 웹페이지의 구조와 내용을 설명합니다. 예를 들어, , , ,  등의 태그를 사용하여 웹페이지의 제목, 본문, 이미지, 스타일 시트 등을 정의할 수 있습니다. HTML은 웹 개발에서의 기초 중 하나이며, 웹사.. 2023. 11. 7.
웹 구조 WEB | HTML, Hyper Text Markup Language | 하이퍼텍스트, 하이퍼링크, 태그 예시 ✅ HTML, Hyper Text Markup Language웹 페이지는 하이퍼텍스트로 작성되고는 하이퍼링크를 사용하여 이동한다. 💡 하이퍼텍스트HTML은 하이퍼텍스트를 기술하기 위한 언어이다.HTML은 태그라는 마크를 사용한다.마크로 문서 구조를 표현하기 때문에 HTML을 마크업 언어로 부른다. 태그 예시a: 하이퍼링크br: 줄 바꿈h: 표제header: 도입부hr: 밑줄img: 이미지 삽입meta: 페이지 설명p: 문장section: 페이지 각각table: 테이블 구조title: 타이틀 HTML로 작성한 페이지의 확장자는 html이나 htm이다. 💡 하이퍼링크 hypertext reference 약자 herf로 부른다. 2023. 2. 9.
반응형

티스토리툴바