FrontEnd34 [Web] HTML : Sementic tag 시맨틱 태그 Sementic tag 문서구조화시맨틱 태그를 사용하여 웹 문서의 구조와 의미를 전달시맨틱 태그는 콘텐츠의 의미와 역할을 설명하고 검색 엔진 최적화와 웹 접근성(SEO)을 향상시킴 기존 HTML은 웹 문서 구조를 표현하는 태그가 없었음→ 나 로 구조화 되어보이게 작성했었음→ HTML 페이지의 소스를 보면 문서 구조를 파악할 수 없었음 시맨틱 웹 : 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹시맨틱 태그 : 문서의 구조와 의미를 전달하는 태그 1. HTML 문서의 최상위 요소모든 HTML요소는 저기 안에 포함되어야 함 2. 문서의 메타데이터, 스타일시트, 스크립트 등의 정보를 포함하는 부분(브라우저 표시 X) 3. 실제로 화면에 나타나는 요소가 들어가는 부분 4. 웹 페이지 상단에 나타나.. 2023. 9. 4. [Web] HTML : Inline Frame (iframe) Inline Frame iframeHTML 요소를 다른 웹페이지나 현재 웹페이지에 삽입하는 데 사용현재 페이지 일부 영역에서 다른 문서를 표시하고 상호작용을 하며, 독립적인 컨테이너 역할을 함 문서 삽입 : src 속성을 활용하여 다른 웹페이지, 문서, 이미지, 동영상 등 외부 리소스를 삽입할 수 있음 독립성 : 독립적인 컨테이너를 가짐 → iframe 내부에 로드된 문서는 외부 문서와 격리되어 있음 (충돌 방지) 크기 조절 상호작용 : iframe과 다른 문서들이 상호작용이 가능 충돌 및 성능 고려사항 : iframe 너무 많이 사용하게 되면, 성능 저하가 일어남 ( 부모, 자식 프레임 충돌발생 주의 ) 보안 고려사항 : CORS 정책으로 일부 사이트에서는 다른 도메인의 리소스가 인라인 프레임으로 .. 2023. 9. 1. [Web] HTML 태그 또는 또는 기본 구조 hello world! 태그 종류타이틀 달기 ~ 문단 제목 달기여러 HTML 태그들을 블록으로 묶는 컨테이너단락 나누기텍스트 일부분에 특별한 모양을 주거나 할 때 사용이 안에 있는건 고대로 출력됨horizontal rule 수평선break 줄바꿈&npspnon break space 띄어쓰기진하게중요한강조이탤릭으로 강조작은문자취소선밑줄선윗첨자아랫첨자하이라이팅이미지리스트표anchor 앵커 div와 span의 차이 division블록 단위의 컨테이너 요소다른 요소들을 그룹화 하는데 사용 (div 안에 넣으면 한줄로 나옴)div 태그는 다른 요소들과 줄바꿈 되어 나타남 (블록단위여서)인라인 단위의 .. 2023. 9. 1. [Web] 학습 일정 정리 1. HTML(Hyper Text Markup Language)웹 페이지의 구조와 내용 - 뼈Hyper Text :어딘가와 연결되어 있는 텍스트Markup Language :태그로 이루어진 언어웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어 2. CSS(Cascading Style Sheet)웹 페이지의 모양(디자인) - 가죽스타일 시트 혹은 종속형 시트Cascading : 폭포처럼 물 흐르듯이 HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격 3. Javascript웹 페이지의 행동 · 응용 프로그램 - 근육스크립트 언어로 이루어짐(응용 프로그램을 제어하는 역할을 한다는 뜻)자바와 연관 없음ㅎ HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해 이벤트 .. 2023. 9. 1. 이전 1 2 3 다음