Front-End64 [HTML] Chapter 04. 시멘틱 웹 시멘틱 웹(Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다. non-semantic(div, span) non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?" 내부에 담긴 콘텐츠들이 의미를 갖고있다면 그 의미에 적합한 태그를 사용하는 고민을 해볼 것. 의미론적인 마크업을 사용하면 아래와 같은 이점이 있다. 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용할 수 있다. 의미가 없는 끊임없는 div들을 탐색하는 것보다, 의미있.. 2022. 11. 18. [HTML] Chapter 03. 콘텐츠 블록(Block)과 인라인(Inline) 블록 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. 상자를 아래로 쌓는 것 인라인(Inline) 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다. 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다. 차이점 블록은 자기가 차지할 수 있는 가로를 죄다 차지하는 반면, 인라인은 컨텐츠가 가지고 있는 공간 만큼만 차지한다. 포함 규칙 - 같은 형태의 다른 요소를 안에 포함할 수 있다. (블록 > 블록, 인라인 > 인라인) - 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다. - 인라인 요소는 블록 요소를 포함 할 수 없다. ("자식이 부모를 가질 수 없다".. 2022. 11. 15. [HTML] Chapter 02. HTML 문서의 구조 빈 요소 (Empty Elements) 내용(content)이 없다면? → 이미지 , 수평선 , 줄바꿈 등 내용이 없는 요소를 빈 요소(Empty Element)라 부른다. 이 경우, 닫는 태그를 추가로 명시하지 않아도 된다. Empty element, Self-Closing element, Void element, Single tag ... 예시 만약 를 한다고 해서, 빈 요소가 될 수 없다. 빈 요소를 쓸 수 있는 태그들은 태어날 때 부터 웹표준에 정의되어있다. HTML 문서의 구조 html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보 meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시 body : 웹브라우저.. 2022. 11. 10. [HTML] Chapter 01. HTML, CSS 그리고 JavaScript 1. HTML(Hyper Text Markup Language)이란? HTML : 다양한 인터넷 정보를 웹 브라우저에 보여줄 때 사용하는 언어, 웹 문서를 만들 때 쓰이는 언어이다. Hyper Text : 문서를 서로 연결해주는 링크를 말한다. 엑셀이나 워드오 다르게 웹 문서를 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다르다. [구조] HTML : 웹 문서의 기본적인 골격을 담당 [표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당 [동작] JavaScript : 동적인 요소(사용자와의 인터랙션)을 담당 웹 페이지 방향성 : 웹 표준, 웹 접근성, 웹 호환성 웹 표준 (Web Standards) 브라우저들끼리의 법칙. HTML5는 W3C에서 2014년에 공식 표준화 2019년에 WH.. 2022. 11. 9. 이전 1 ··· 4 5 6 7 다음
