Life of Jibro

때때로 요소의 기본 접근자 이름이 없는 경우, 또는 그것의 콘텐츠를 명확하게 설명하지 못한 경우, 그리고 해당 요소에게 의미를 주기 위한 객체와 연관된 DOM 안에 표시가능한 콘텐츠가 없는 경우가 있습니다. 흔한 예로 SVG 또는 어떠한 텍스트도 없이 icon 폰트(사용되어서는 안되는 방법입니다.)만을 가진 button 요소가 있습니다. 이렇게 접근자 가능한 접근자 이름이 없거나, 초기 접근자 이름이 적합하지 않은 경우, aria-label 속성을 사용하여 요소의 접근자 이름을 정의할 수 있습니다. 대표적인 예로 교보문고 웹 페이지를 살펴볼 수 있을 것 같습니다. 여기서 웹페이지의 "

HTML의 많고 많은 요소 중 이번에 다루고자 하는 주제는 바로 이다! 이 label 요소는 언제 어떻게 사용하는 용도로 만들어졌는지 살펴보고 사례를 통해 보다 명확하게 그 용법을 익혀보도록 하고자 한다. 사실 이 주제를 생각한 이유는 이 label 요소를 원래의 취지와 맞지 않게 사용하는 경우가 많은 것 같아 공부하였던 것을 시작으로 적게 되었다. 을 왜 사용해야하나요? 보통 label 요소는 input 요소와 같이 사용되곤 한다. 그 이유는 원래 label 요소가 다음을 목적으로 두고 만들어진 요소이기 때문이다. 필자의 비약한 설명을 진행하기에 앞서 친절한 MDN 선생님을 모셔 이야기를 들어보자! The HTML element represents a caption for an item in a use..

웹 개발자.. 그 중에서도 특히 프론트엔드 개발자라면 시멘틱한 HTML을 작성하기 위해 노력을 기울인다. 따라서 시멘틱한 HTML을 작성하는 방법에 대해 이야기를 조금 더 이어 가고자 한다. 앞선 Semantic HTML이 중요한 이유!에 이어 그 두 번째 이야기로 "section 요소와 article 요소에 heading 요소를 넣어야 하는가?" 하는 문제이다. 당연하게도 section과 article에도 heading 요소를 넣어 주어야 한다. 즉 브라우저가 HTML문서를 리딩하는 과정에서 해당 section과 article에 어떠한 정보가 들어 있는지 명확하게 파악시키기 위함이다. 자! 그렇다면 section과 article에는 어떤 heading 요소를 넣어야 할까? h1 요소는 그 존재 자체가 ..

웹사이트를 제작하다 보면 반드시 Form 요소를 사용하게 되는 순간이 온다. 그도 당연할 것이 사용자의 정보를 입력 받거나, 검색이 가능하게 하는 등의 사용자와의 인터렉션 공간이 바로 Form 요소 안의 내용들이기 때문이다. Form에 대해서는 다룰 주제가 너무나도 많지만, 우선 이번 포스팅에서는 Form 요소와 Button 요소의 관계에 대해 알아보고자 한다. 다음 아래와 같은 HTML 문서가 있다고 하자. 여러분들의 생각을 적어주세요~ 제출1 제출2 자! 이제 웹 브라우저 상에 위의 코드를 렌더링하면 아래와 같이 브라우저에 나타난다. 이제 form 안에 있는 input 요소에 아무런 값도 넣어주지 않고 "제출1" 버튼을 눌러보자! 그 결과 다음과 같이 input 요소 안을 채우라는 안내 문구가 나타났..

[Semantic HTML의 중요성] Semantic HTML? 그게 왜 중요한거야? 처음 HTML에 대해 학습을 하게 되면 가장 먼저 학습하게 되는 것은 당연 HTML 요소일 것이다. 그리고 처음 VS Code를 통해 local에서 "Hello World!"를 작성한 그 순간의 짜릿함이란... 😁 하지만, 그 기쁨도 잠시... 여러 자료들을 찾아서 HTML을 공부하다보면 Semantic HTML(의미론적 HTML)에 대한 글을 보게 된다. 그리고 그게 무엇인지 궁금해서 이곳 저곳 찾아보면 Semantic하게 HTML을 작성해야한다는 글들을 보게 된다. 그러나 초보자가 보기에는 다 그게 그거인 것만 같다. div 태그나 article 태그나 초입자가 보기에 결과물은 다 고만고만한데 도대체 왜 프론트엔드 ..

[Emmet 작성법] HTML 및 CSS 를 작성하는 과정에서 요소 또는 속성들을 하나 하나 작성하는 것도 물론 좋지만, 이러한 방법은 Emmet 약어(Emmet Abbreviation)를 사용하는 것보다는 효율성이 떨어지는 것이 사실이다. 따라서 Emmet 약어의 문법을 익혀 그 효율성을 증대시키고자 한다. [Emmet Syntax] Child: > 요소 안에 자식 요소를 추가하는 경우 >를 사용한다. (예시) nav>ul>li Sibling: + 요소와 동일한 레벨(형제)의 요소를 추가하는 경우 +를 사용한다. (예시) div+p+bq Climb-up: ^ 동일 레벨(형제) 요소보다 한 단계 윗 단계에 요소를 추가하고자 하는 경우 ^를 사용한다. (예시) div+div>p>span+em^bq (예시)..

[HTML 콘텐츠 모델] HTML의 각 요소에는 요소의 예상 내용에 대한 설명인 콘텐츠 모델이 있다. 여기서, 콘텐츠 모델이란 해당 요소가 어떤 콘텐츠를 담고 있는지에 대한 포괄적 개념이라고 할 수 있다. 또한, HTML 요소에는 요소의 콘텐츠 모델에 설명된 요구 사항과 일치하는 콘텐츠가 있어야 한다. ["nothing" 콘텐츠 모델] 요소 간 공백을 제외한 그 어떠한 콘텐츠도 포함하고 있지 않은 경우(이러한 경우를 텍스트 노드와 요소 노드가 모두 없다고 한다.)의 콘텐츠 모델을 "nothing" 콘텐츠 모델이라고 한다. NOTE: 콘텐츠 모델이 "nothing"인 대부분의 HTML 요소는 편의상 void 요소(HTML 구문에 닫는 태그가 없는 요소 = 스스로 닫는 요소)이기도 하다. 하지만, 이들은 완..

[호환 모드(Quirks mode)와 표준 모드 (Standards mode)] 과거 브라우저 전쟁의 양대산맥이었던 Netscape Navigator와 IE의 독과점으로 인해 해당 시기의 웹 페이지는 서로 다른 웹 기준을 기반으로 작성되었다. 브라우저 전쟁이 끝나고 W3C를 통한 웹 표준을 제정하게 됨에 따라 기존의 웹 브라우저들은 새롭게 만들어진 웹 표준을 기반으로 하는 웹 사이트들을 제대로 표현할 수 없게 되었다. 따라서 웹 브라우저들은 웹 표준을 따른 사이트와 그 이전에 제작된 사이트를 모두 렌더링하기 위한 두 가지 모드를 제공하게 되었다. 웹 브라우저의 레이아웃 엔진으로 호환 모드(quirks mode), 거의 표준 모드(almost standards mode), 표준 모드(standards mo..

[DOCTYPE 선언] DOCTYPE은 HTML, XML, SGML, SVG 등 다양한 마크업 기반의 언어에서 사용되며, 문서의 타입과 버전을 명시하기 위해 사용되는 선언문이다. 보통 DOCTYPE 선언은 HTML 문서의 가장 첫 번째 줄에 작성된다. DOCTYPE은 웹 문서가 웹 브라우저 상에서 표준 모드로 활성화되기 위해 존재한다. DOCTYPE 선언을 하지 않을 경우 웹 문서를 작성함에 있어 DOCTYPE 선언을 하지 않은 경우, 브라우저는 해당 파일을 렌더링함에 있어 표준 모드(Standard mode)가 아닌 호환 모드(Quirks mode)라고 하는 하위 호환성 모드로 나타내게 된다. Note 생각보다 HTML에 대한 웹브라우저의 엄격함은 느슨해서 치명적인 오류가 아닌 이상 왠만해서는 렌더링하..

[HTML의 기본 형식] HTML 웹 문서를 작성함에 있어 가장 기본 골격이 되는 구조는 아래와 같다. HTML 문서 작성시 해당 문서의 HTML 버전을 명시적으로 (explicitly) 선언하여야 한다. HTML Living Standard 버전부터는 로 선언한다. head 요소는 문서의 METADATA를 담고 있다. 태그는 HTML 문서에 관한 METADATA를 정의한다. 여기서, Metadata는 웹 문서 상의 데이터에 관한 정보를 가지고 있다. 즉, 웹 문서 상에서 어떻게 데이터가 표현될 것인지 정의하여 주는 것이라고 볼 수 있다. 태그는 항상 요소 안에 존재하며, 다음의 데이터 속성을 구체화하는데 사용된다. 문자 설정(character set) 페이지 묘사(page description) 키워드..