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. 그리드시스템, 왜 사용하는 걸까? 그리드 시스템은 격자를 의미한다. 디자인의 요소끼리 간격이나 여백을 쉽게 배치하는 용도이다. 격자가 없으면 디자인의 요소끼리 배치하는게 어렵다. 디자인을 구성하는 요소를 간단히 도식화 하면 큰 박스로 표현하는 것이 Column이라고 한다. 디자인을 하는 모든 요소들이 그리드 안에서 Column들이 이루어진다. 처음 시작하는 디자이너들이 오류를 범하는 것 중에 하나가 디자인적인 요소들이 모두 다 그리드에 맞춘다고 생각한다. 그리고 Navigation Bar 안에서는 로고, 메뉴들이 배치 되어 있는데 이런 것들이 어떻게 그리드에 맞춰야 되는지 질문이 많다. Navigation Bar 같은 경우는 한 개의 column으로 표기를 하고 column 안에 로고와 메뉴들은 각..

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

1. 해상도 개념 윈도우에 디스플레이 영역에 들어가면 해상도가 보인다. 1920 : width 1080 : height 이 숫자 뒤에 숨어 있는 단위가 px이다. 👉🏻 가로 : 1920px, 높이 : 1080px로 출력하겠다는 의미이다. * px : 픽셀은 조건에 따라 작을 수도 있고 클 수도 있는 가변의 크기를 가진다. 물리적인 32인치의 모니터 크기는 동일하지만 그 안에 px를 1920px로 나열할 것인지 1280px로 나열할 것인지에 따라서 전체적인 px이 분포되는 크기가 다르다. 그래서 해상도는 모니터의 크기의 가로와 높이에 표현되는 px이 물리적으로 몇 개 들어가는지 판단한다. 2. 디바이스 구분하는 법 컴퓨터 입장에서 디바이스를 구분할 때 분기점(Breakpoints) 기준으로 한다. Mobi..

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 🎈 강조 글씨체가 두껍게 표..