목록WEB STUDY (244)
whatisthis?
GET / POST HTTP 프로토콜을 이용해서 서버에 데이터(resource)를 전달할 때 사용하는 방식 html에서 form 요소의 경우 src와 함께 method 속성에 GET 또는 POST 방식을 적어준다. 여기서, GET과 POST 는 무엇인지 알아보자. GET 정보 조회 서버에서 어떤 데이터를 가져와 조회하는 메서드. Select. URL의 끝에 ‘?’ 가 붙고, 요청정보가 (key=value) 형태의 쌍을 이루어 서버로 전송됨. 요청정보가 여러개일 경우 ‘&’ 로 구분. 예> - 이는 길이 제한이 있어서 대용량의 정보를 불러오기엔 한계가 있다. (주소값+파라미터의 양은 255자로 제한됨.) - 사용자가 값을 쉽게 볼 수 있으므로 보안에 취약함. - 속도는 POST 방식보다 빠르다. POST ..
URI URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다. URL URL은 흔히 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. 즉, URI의 서브셋이다. ** 서브셋 이란? 부분집합(部分集合, 영어: subset) URI는 Uniform Resource Identifier URL은 Uniform Resource Locator 즉, 자원의 식별자(URI), 위치(URL), 이름(URN) photo+info cr: https://velog.io/@jch9537/URI-URL URI & URL 웹개발 공부를 하면서 URL..
https://beautifulcss.com/archives/2812 Beautiful CSS » 포지셔닝 : Flexbox 이 게시물은 2020년 10월 25일 수정판입니다. Image from Introducing Flexbox Fridays 이야기에 앞서 Flexbox Layout은, 새롭게 CSS3 명세에 반영된 레이아웃 모듈로서, 요소들이 수용된 공간을 어떻게 효과적으로 beautifulcss.com -Flexbox로 레이아웃을 잡으면 모바일을 포함한 하이브리드 앱으로 만들때도 별도의 추가작업이 필요하지 않음. Flexbox는, 유연한 요소(내용물) 그리고 그 요소를 담을 그릇으로 이루어짐. 1. 그릇에 해당하는 부모 요소(=컨테이너) 에 display: flex 를 입력해주어 flexbox임을..
17. Table 기본 구조 테이블 헤더 테이블 데이터 테이블 태그의 기본 구조는 table>tr>th+td 이다. 셀이 헤더에 관련된 것 = th 셀이 데이터에 관련된 것 = td table row = tr (row는 가로줄) 즉, tr 묶음당 가로줄에 들어갈 데이터를 좌->우 순으로 입력해 주면 됨. ID 이름 나이 thisis 김ㅇㅇ 22 yjin 최ㅇㅇ 31 injung 박ㅇㅇ 18 th 개수만큼 반드시 td를 넣어줘야한다. 즉, 빈칸으로 두더라도, 는 반드시 입력해야함. th만 있는 tr부분은, 로 다시한번 감싸주고, 아래 부분은 로 감싸주면 의미가 명확해진다. ** tfoot 은 테이블 푸터(footer)으로, 주로 '총합'. '평균'등의 값을 나타낼때 따로 구분해줌. 18. Tabel 심화 ..
area base br col command embed hr img input keygen link meta param source 종료태그를 쓰지 않는 요소 대신, XML처럼 />로 마무리할 수 있다. 형태로 작성하여 태그의 종료를 알리는 편이 좋다. 왜? 위 요소들은 닫는태그가 없을까? - 태그 내부에 넣을 값이 없기 때문.
1. html 자동완성 ! + Tab .html 문서를 생성한 후에 !를 입력하고 Tab키를 누르면 위와 같이 자동완성이 된다. 기본 구조이므로, 다른것은 그냥 냅둬도 되고, 오류를 줄이기 위해서는 lang="en"이 아닌 "ko"로 변경해주면 좋다. 2. 세로줄 커서 변경 alt+shift+드래그 위와 같이 세로로 커서 선택하고 싶을땐, 시작 부분에 커서를 두고, alt+shift+드래그 해주면 '하위'부분만 변경할 수 있다! 3. 한꺼번에 커서로 수정 alt + 클릭 4. 단어 찾아서 수정 단어 드래그한 상태에서 ctrl+shift+L 4. 에밋(emmet) html, css 등 문서를 편집할 때 빠른 코딩을 지원하는 플러그인. 1) 자식 태그 만들기 div>ul>li 와 같이 입력하고, Tab 누르..
HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation ) 1. 태그 해부학 마크업을 하고자하는 내용과 와 같이 열림태그, 닫힘태그로 이루어져있다. 태그 속성 속성값 thisisyjin lang이라는 속성은 언어를 나타내며, lang 속성에 대한 value가 궁금하다면 구글 mywebproject.tistory.com Headings / Paragraph / Emphasis / Anchor / Image / List 8. 인용 Quotation 태그 문단, 내용 전체가 인용문인 경우. 보다는 태그를 더 자주 사용. Think like a man of action and act like man of thoug..
1. 태그 해부학 마크업을 하고자하는 내용과 와 같이 열림태그, 닫힘태그로 이루어져있다. 태그 속성 속성값 thisisyjin lang이라는 속성은 언어를 나타내며, lang 속성에 대한 value가 궁금하다면 구글링 > html lang values https://www.w3schools.com/tags/ref_language_codes.asp HTML ISO Language Code Reference HTML Language Code Reference ISO Language Codes You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to ass..
김버그의 HTML&CSS는 재밌다 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 21-10-04 시작. 크롬 개발자 도구 윈도우 = F12 맥 = 옵션 + 커맨드 + i 코드 에디터를 직접 설치하자. vscode 추천. ( Visual Studio code) https://ide.goorm.io/ 구름IDE - 설치가 필요없는 통합개발환경 서비스 구름IDE는 언제 어디서나 사용 가능한 클라우드 통합개발환경(Integrated Development Environment IDE)을 제공합니다. 웹브라우저만 있으면 코딩, 디버그, 컴파일, 배포 등 개발에 관련된 모든 작업을 클라 ide..
JavaScript for...in Loop The JavaScript for...in statement loops through the properties of an object. Syntax for (let variable in object) { // code to be executed } https://www.w3schools.com/js/js_object_properties.asp JavaScript Properties JavaScript Object Properties Properties are the most important part of any JavaScript object. JavaScript Properties Properties are the values associated with..