전체 글 13

{ 김버그의 HTML는 재밌다 } #2 - form, input, label, select, option, textarea, button, table, source, address

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

FrontEnd/HTML 2022.01.03

{ UI GUI 디자인 } #1 - 해상도

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

{ 김버그의 HTML는 재밌다 } #1 - h1, p, em, a, img, li, dl, blockquote , div, span

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

FrontEnd/HTML 2022.01.01