Twitter Markup Challenge 1. 구조적인 웹 문서 설계 웹 문서를 설계한다는 거는 글의 구조를 쉽게 파악하는 것이다. 글의 전개 흐름을 파악하고 정보의 위계질서를 파악할 수 있다. 이럴 땐 사용하는 거는 Sectioning Elements이다. ``, ``, ``, `` , ``, ``, ``로 구성되어 있다. 상황에 맞는 적절한 Sectioning Elements를 올바르게 사용하는 방법으로 구조적으로 아름답게 웹 문서 설계를 작성해야 한다. - 검색 최적화에 도움이 된다. 2. 올바른 Sectioning Element 공통적으로 지켜야할 룰 섹션의 제목 ... 메뉴 링크 `Sectioning Element` 내에는 반드시 ``를 작성해야 한다. 눈에 보이지 않아도 제목을 반드시 명시..

1. DOCTYPE & Document Structure 🎈 HTML문서를 작성할 때 가장 먼저 해줘야 하는 것이 ``을 선언 해줘야 한다. HTML5 표준에 맞게 작성된 문서라는 거를 브라우저에게 선언하는 것이다. 🎈 ``에는 ` 웹 문서에 관한 중요하지만 보이지 않은 메타 데이터를 선언할 때 사용하는 태그이다. 문서가 어떻게 작성해야 하고 문서가 참조하고 있는 다른 문서는 어떤 것인지 등등 눈에 보이지 않는 정보들을 담아두는 것이다. 🎈 웹 문서에게 보여주게 될 문서의 모든 콘텐츠를 담아내는 태그이다. 2. Title, Link, Style & Script 🎈 HTML의 대제목 역할을 하는 태그이다. 검색 최적화에 굉장히 큰 역할을 한다. 👉🏻 title를 잘 쓰는 방법 - 키워드를 단순히 나열하는 ..

1. Form 🎈 사용자로부터 어떤 정보나 데이터를 받기 위한 태그이다. ``을 사용할 때는 브라우저에게 알려줘야 한다. 주의해야할 것은 사용자로부터 무엇인가를 받고 그것을 처리하는 과정도 같이 들어가야 한다는 점이다. 1) attribute 👉🏻 action ``을 작성했을 때 `input`값을 가지고 전달을 해줘야 하는 `action`이다. 처리할 로직을 API 서버쪽에게 접근 가능한`URL`을 작성을 해야 한다. 백엔드에서 ``을 로직을 담은 서버 쪽 코드를 만들어 놓은 접근할 수 있는 경로를 `action`값에 넣어주면 된다. 👉🏻 method 서버쪽에서 긴밀하게 연결되어져 있어 서버에서 어떻게 처리할지 방법을 선택하는 속성이다. - GET : 단순히 정보를 읽고 싶을 때 쓴다. - POST : ..

1. 태그해부학 1) Tag 내용 꺽쇠에서 시작해서 꺽쇠에서 끝난다. 2) Attribute 내용 태그가 담지 못하는 추가적인 정보를 넣어주는 역할을 한다. 2. 제목과 문단 Headings Tag Paragraph Tag 1) Headings Tag 🎈 (heading) 제목 제목 제목 제목 제목 제목 어떠한 내용에 대한 핵심을 뽑아 놓아주는 태그이다. 에서 까지 순서대로 크기가 작아지면서 마크업을 한다. 2) Paragraph Tag 🎈 (paragraph) 문단 주제에 대해서 설명해주는 태그이다. 3. 강조 Emphasis 특별히 강조하고 싶은 부분을 표현하는 태그이다. 1) Emphasis Tag 🎈 (emphasis) 강조 기울기를 표현한다. 2) Strong Tag 🎈 강조 글씨체가 두껍게 표..