HTML, CSS/HTML5 HTML 특수문자(entity) 코드 HTML에서 특수 문자를 표시하기 위해 사용되는 코드입니다.기호엔티티 코드설명<less than (작다)>>greater than (크다)&&ampersand (앤퍼샌드)""double quote (큰따옴표)''single quote (작은따옴표)©©저작권 기호®®등록 상표 기호€€유로 화폐 기호¥¥엔 화폐 기호￦&won;원 화폐 기호✓✓체크 마크××곱하기 기호÷÷나누기 기호→→오른쪽 화살표←←왼쪽 화살표↑↑위쪽 화살표↓↓아래쪽 화살표 줄 바꿈 없는 공백HTML 엔티티 코드는 문자 그대로 표현하고 싶을 때 사용웹 페이지에서 보안적으로 필요한 경우에도 활용 (.. 2025. 3. 5. HTML 태그 종류 1. 문서 구조 및 메타데이터HTML 문서의 기본 골격과 문서에 대한 정보를 정의하는 요소들입니다.문서의 타입(HTML 버전)을 선언합니다.HTML 문서의 루트 요소입니다.문서의 메타데이터(문서 제목, 문자셋, 스타일, 스크립트 등)를 포함합니다.문자셋, 설명, 키워드 등 문서 메타 정보를 제공합니다.문서의 제목을 정의하며, 브라우저 탭에 표시됩니다.문서 내의 모든 상대 URL에 대한 기준 URL을 지정합니다.외부 리소스(예, CSS 파일)와 문서의 관계를 정의합니다.문서 내에 CSS 스타일 규칙을 포함합니다.자바스크립트와 같은 클라이언트 사이드 스크립트를 정의하거나 외부 파일을 연결합니다.HTML 주석으로, 코드 내에 설명이나 메모를 작성할 때 사용합니다.2. 페이지 구조와 레이아웃문서의 주요 영역과 .. 2024. 12. 13. HTML 메타(Meta)태그 1. 메타태그란?정의:HTML 문서의 HEAD 영역(또는 BODY 태그 앞쪽)에 위치하는 태그로, 브라우저와 검색 엔진 등에게 문서에 관한 정보를 제공하는 역할을 합니다.위치:HEAD 태그 내부(또는 BODY 태그 바로 앞)에 위치해야 하며, 문서 최상단에 배치하는 것이 일반적입니다.─────────────────────────────2. 메타태그의 기본 속성메타태그에는 주로 세 가지 속성이 사용됩니다.http-equiv역할: 웹 브라우저나 서버에 특정 명령(HTTP 헤더와 유사한 역할)을 전달합니다.특징: HTML 문서가 HTTP 응답 헤더와 함께 전송될 때만 의미가 있으며, 문자 인코딩 설정 등에서 과거(html4) 사용되었으나, HTML5에서는 charset 속성으로 대체되는 경우가 많습니다.nam.. 2024. 12. 13. 절대경로 상대경로 절대경로상대경로절대적인 주소, 변하지 않는 주소를 경로로 지정 하나의 파일이 있는 위치에서 다른 파일이 위치한 주소를 경로로 지정 정적인 문자열을 통해 특정 컴퓨터의 파일 위치를 정확히 알려준다.반드시 비교대상이 있어야한다./home/usr/ubuntu/workspace/mypage/env/static/background.jpg (절대 경로)../static/background.jpg(상대경로)https://curiousweek.tistory.com/"> ${pageContext.request.contextPath}/images/true.png">" />파일의 위치를 고유경로로 알고 있어서 분실 가능성이 낮다.파일의 위치를 잊어버렸을 시 고유 경로를 알지 못하므로 소스 분실 가능성이 높다.최상위 폴더부터.. 2024. 12. 12. 특이한 HTML 태그 (details-summary, dialog, sub, sup, input[type], progress, meter) 1. details / summary hello world">helloworld역할:사용자가 접었다 폈다 할 수 있는 인터랙티브한 토글(접힘/펼침) 위젯을 제공합니다. 요소 내부에 요소를 포함하여, 제목(요약)을 클릭하면 내용이 펼쳐지거나 접힙니다.HTML 예시: hello worldCSS 예시:details { width: 100px; border: 1px solid black;}summary { /* 기본 마커 대신 커스텀 텍스트(여기서는 단순 예시) */ list-style-type: 'click v ';}/* 열렸을 때 패딩 추가 */details[open] { padding: 5px;}/* 열렸을 때 summary의 marker 변경 */details[open] summary .. 2024. 12. 12. 이전 1 다음
