Dev/HTML 5

웹 표준 및 HTML 마크업 시 유의사항

웹 표준 및 HTML 마크업 시 유의사항 DOCTYPE 써주기 모든 페이지에는 h1 태그가 한개씩만 존재해야 한다 img 태그에는 반드시 alt 속성을 써줘야 한다 문단을 나눌 때 br 태그 쓰지 않기 인라인 태그안에 블록 태그 쓰지 않기 (a 태그 예외) 인라인 스타일 작성 금지 DOCTYPE 써주기 현재 상용되는 HTML5을 기준으로 html파일 최상단에 필수로 작성해야 함. HTML5 이전 버전에서는 문서 형식 선언문이 길었지만, HTML5로 넘어오면서 선언문이 짧아짐. 만약 문서 형식 선언을 하지 않는다면 구형 브라우저에서는 쿼크 모드(Quirks mode) 라고 불리는 표준 모드로 웹사이트를 구동해 의도한바와 다르게 화면에 출력될 수 있음. 모든 페이지에는 h1 태그가 한개씩만 존재해야 한다 h..

Dev/HTML 2022.12.22

HTML 정리

HTML이란? HyperText Markup Language HTML은 웹 페이지를 작성하기 위한 표준 Markup Language이며, 현재는 HTML5가 상용화되어 사용되고 있다. HTML의 구성 가장 기본적인 틀은 아래와 같고, 하나하나 알아보자. DOCTYPE이란 말그대로 Document Type으로 작성할 HTML의 문서 형식 정의(DTD: Document Type Definition) 를 해주는 선언문이며, 뒤에 붙는 html은 HTML5 임을 명시해준다. DOCTYPE을 선언하지 않으면 브라우저는 쿼크모드(Quirks mode)로 렌더링하게 되고, 예상과 다른 결과가 화면에 뿌려지게 된다. html HTML 문서의 루트 엘리먼트를 나타낸다. lang 속성은 필수로 작성해야하며 해당 문서의 기..

Dev/HTML 2021.07.02

HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag)

HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag) 시맨틱 웹이란? 구글에 검색했을때 위키백과에 나오는 내용을 그대로 적어보면 아래와 같다. 시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다. 쉽게 생각하면 첫 줄만 읽으면 된다. 의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다. 시맨틱 웹의..

Dev/HTML 2021.07.01

마크업 개발 레벨 테스트

마크업 개발 레벨 테스트 서핑중에 흥미로운 테스트가 있어 해보고, 공유하는 차원으로 작성함. FE를 주력으로 하고 있다면 면접에서 나올법한 질문들이니 한번 쯤 테스트 해보면 좋을 것 같다. 마크업 테스트 예시 답안 위 : 작성한 답 아래 : 검색 결과 (없을 시 답이 맞은것) HTML Doctype을 사용하지 않을 때는 무슨 일이 발생할까요? HTML5이전 버전으로 렌더링되어 레이아웃이 깨짐 웹이 quirks mode로 작동해 구형 브라우저에서 동작하던 것과 같이 동작함 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요? , ,는 단순히 style을 제공하는 태그로 의미있는 태그가 아님 block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요. 블록 : di..

Dev/HTML 2021.07.01

웹 접근성(Graceful Degradation 과 Progressive Enhancement)

Graceful Degradation 우아한 낮춤 또는 적절한 퇴보 등으로 해석되며, 최신 기술 기반 또는 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 기기에서도 유사한 성능으로 동작하도록 조치하는것. 예를들어 자바스크립트가 동작하지 않는 브라우저에서 접속 했을 때, “자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화해주세요”와같은 메세지를 띄우는 것이다. Progressive Enhancement 점진적 향상이라 부르며, 말 그대로 가장 기초적인 기술을 기반으로 점차 향상시키는 방법이다. 웹을 예시로 들면 유행하는 스택은 브라우저 지원 범위가 정해져 있는데, 이를 고려하지 않아도 되는 HTML, CSS, JS로 기본에 충실한 사이트를 구성하는 것이다. 구체적으로 여러 ..

Dev/HTML 2021.07.01