리액트 웹사이트를 만든 후 디바이스별로 스타일이 잘 적용되었는지 확인하던 중 이상한 현상을 발견했다. 아이폰에서 사파리로 내가 만든 웹사이트를 접속하면 다른 여타 사이트들과 달리 상단바가 까맣게 표시되어서 매우 거슬렸다. 그래서 무엇이 문제인지 알아봤다. 굉장히 삽질을 많이 했지만 결론만 말하자면, 이런 현상이 발생한 이유는 파일에 다음과 같은 코드가 포함되어 있기 때문이었다. 를 제거하고 나면 내 웹사이트에 접속할 때 다른 웹사이트처럼 상단바의 색이 자연스럽게 표시된다. 라이트모드, 다크모드 둘 다 페이지의 배경색에 맞춰 색이 적용됐다. 지금부터 이렇게 된 이유에 대해 알아보자. 사파리의 웹 사이트 색조로 물들이기 기능 아이폰의 사파리에는 기능이 있다. 웹 사이트 틸팅 기능이라고도 한다. 이 기능은 사파리에 접속했을 때 웹 사이트의 전체적인 색조를 파악한 후 상단바 등 기타 UI에 그 색조를 적용해 자연스럽게 보이도록 도와주는 기능이다. 아이폰 설정에서 사파리 탭에 들어가 기…

시작하기에 앞서, Convention이란 무엇일까요? Convention은 ‘관습’이라는 의미로 Coding Convention은 코드를 읽기 쉽도록 일관되고 체계적으로 유지하는 것입니다. 일정 기준에 맞춰서 코드를 작성하는 것은 협업에서 중요한 일입니다. HTML을 작성하면서 지켜야할 Convention에 대해 알아봤습니다. 적절한 문서구조 사용하기 HTML 문서는 , , 요소가 없어도 대부분 잘 작동합니다. 하지만 다음과 같은 문제가 발생할 수 있습니다. 를 생략하면 오래된 브라우저에서 오류를 발생할 수 있습니다. 과 를 생략하면 DOM과 XML 소프트웨어가 충돌할 수 있습니다. 없이 과 만 존재할 경우, 브라우저는 이전의 모든 요소를 기본 에 추가해줍니다. 하지만 기본적으로 를 작성하는 것이 좋습니다. 따라서 다음과 같은 적절한 문서 구조를 사용해서 오류를 방지하고 일관성을 유지해야 합니다. Doctype 올바르게 선언하기 문서 유형은 항상 첫번째 줄로 선언해야 합니다. …

HTML을 통해 사용자로부터 데이터를 받기 위해 요소를 사용합니다. Form은 무엇인지, 어떻게 사용하는지 알아봤습니다. Form이란? 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 기술 웹사이트 안 폼을 통해 사용자는 데이터를 전송할 수 있습니다. 폼을 사용하기 위해서는 요소를 사용해야 합니다. 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 의미합니다. Form 사용하기 아래와 같이 요소를 사용할 수 있습니다. , , , 등 을 사용해서 Form을 구성할 수 있습니다. 위 form 에서는 을 사용해서 데이터를 받고 Form을 제출했습니다. 데이터를 받는 요소에는 name 속성을 꼭 부여해줘야 합니다. 그렇지 않으면 Form을 제출해도 데이터를 사용할 수 없습니다. Form을 제출하기 위해서는 말고도 을 사용할 수 있습니다. 은 type 속성의 기본값이 “submit” 이므로 과 달리 type을 따로 명시하지 않아도 됩니다. 참고 나의 첫…

HTML이란? Hypertext Markup Language 웹페이지가 어떻게 구조화되어 있는지 브라우저가 알 수 있도록 하는 마크업 언어 HTML를 통해 웹페이지의 구조를 나타낼 수 있습니다. HTML은 프로그래밍 언어가 아닌 마크업 언어라는 것을 알고 있어야 합니다. HTML은 이런 식으로 태그를 열고 닫아 작성할 수 있습니다. 태그가 아래처럼 제대로 닫히지 않을 경우 제대로 동작하지 않습니다. 블럭 레벨 요소와 인라인 요소 HTML은 블럭 레벨 요소(Block level element)와 인라인 요소(Inline element)라는 두가지 요소(Element)를 가집니다. 이 요소들은 CSS의 Block boxes와 Inline boxes 와는 다른 단어입니다. 블럭 레벨 요소 Block level element 웹페이지 상에 블록(Block)을 만드는 요소입니다. 앞뒤 요소 사이에 새로운 Line을 만듭니다. 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다. 주로 사…