알아두면쓸데있는신기한잡학사전/고군분투흔적들34 [Web] Network 동작방식/front-end, back-end 동작 방식 Network 동작 방식 인터넷은 어떻게 구성되어 있을까? - 이름 URL, 도메인 => www.naver.com - 주소 IP => 223.130.200.104 * 이름과 주소는 같다. - 문 PORT http://paullabedu.synology.me:5000/ http://paullabedu.synology.me:80/ * 뒤에 붙는 숫자에 따라 문이 다르다. - http - https https://mangkyu.tistory.com/98 - Switch - Router: 경로 잡아줌 - DNS: Domain Name Server - NAT: Network Address Translation * https://docs.microsoft.com/ko-kr/azure/rtos/netx-duo/net.. 2022. 8. 16. [Web] FE - HTML HTML HTML이란? HTML이란, Hypertext Markup Language의 줄임말로, 브라우저 화면에 표시되는 문서를 작성하는데 쓰는 Markup 언어이다. - HTML은 tag라고 불리는 요소들을 이용해 화면을 분할하고 텍스트와 이미지, 하이퍼링크 등을 배치할 수 있다. - 크롬 브라우저에서 화면 우클릭 > 검사를 누르면 개발자 도구에서 Elements 탭에서 웹페이지를 구성하는 HTML 요소들을 확인할 수 있다. F12 또는 Ctrl+Shift+I(윈도우즈) 단축키를 이용할 수도 있다. - 각 태그들을 보통 시작 태그 와 종료 태그 의 한 쌍으로 이루어져있다. - HTML 각 태그에 style 속성을 부여하여 크기, 정렬, 글꼴, 색 등을 정해 꾸며줄 수도 있지만, CSS(Cascading.. 2022. 8. 10. [Web] FE - 웹 기초(서버/클라이언트/웹의 동작 개념) 웹 기초 서버/클라이언트/웹의 동작 개념 1. 네이버 웹페이지 해킹해보기 네이버 메인 페이지의 메뉴에서 메일에 마우스를 두고 우 클릭하여 검사를 눌러보면 "메일"이라는 것을 볼 수 있다. 더블 클릭하여 원하는 단어로 바꿀 수 있는데... 네이버 페이지에서 "메일"이 "Mail"로 바뀐 것을 볼 수 있다....! 오 흥미로워... F5를 누르게 되면 새로고침이 되면서 다시 돌아오는 것을 확인할 수 잇다. 2. 웹의 동작 개념(HTML을 받는 경우) 우리가 보는 웹페이지는 모두 서버에서 미리 준비해뒀던 것을 "받아서", "그려주는"것이다. 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이다. 그래서 우리가 받은 HTML을 아무렇게나 수정 가능하고("메일"을 "Mai.. 2022. 8. 10. [Project] 2-tier와 3-tier 2-tier와 3-tier 웹 아키텍처에서 3-tier가 등장하기 전에는 대부분 2-tier 구조가 활용되었다. 1) 2-tier - Client - Server - 2-tier란 ec2와 같은 웹서버가 DB에 연결되는 형태를 말한다. (DB가 없이 웹 서버만 있다면 프론트엔드 개발만 가능하지만 DB가 있으면 백엔드도 사용이 가능해진다. 프론트엔드에 존재하는 데이터는 서버 문제로 쉽게 손실될 수 있으나 백엔드에 있는 데이터는 반영구적이며, 개인정보보호차원, 데이터활용차원에서 적합하다.) - 2-tier 구조는 트래픽이 많지 않은 경우 자주 사용되는 구조이다 - 2-tier 기반의 클라이언트/서버 환경은 애플리케이션 개발의 가장 일반적인 방법으로 하나의 클라이언트에 서버 프로세스가 하나씩 생성되는 방식이다.. 2022. 8. 4. [Project] WEB, WAS 서버 WEB 서버 - 브라우저 클라이언트로부터 HTTP 요청을 받고, HTML 등의 웹페이지 문서에 반응하는 프로그램(브라우저의 요청을 서비스) WAS 서버(Web Application Server) - HTTP를 통해 장치에서 애플리케이션을 수행해주는 미들웨어 - 동적 서버 콘텐츠를 수행 - 주로 DB 서버와 같이 수행 - ASP, PHP, JSP 등 개발 언어를 읽고 처리하여 동적 컨텐츠, 웹 응용 프로그램을 처리 두 서버를 함께 사용하는 이유 - WAS 서버는 WEB 서버가 처리할 수 있는 형태로 가공하여 제공해주는 웹 어플리케이션 - WEB 서버에서는 웹 문서만 처리하도록 기능을 분배하여 서버의 부담을 줄이기 위한 것 2022. 8. 4. [CSS3] 기초 선택자와 단위 01 선택자의 용도와 사용법 1. CSS 개요 - 선택자: CSS3에서 특정 HTML 태그를 선택할 때 사용 - 스타일시트 CSS로 작성된 코드 아이디 선택자 클래스 선택자 03 속성 선택자 04 후손 선택자와 자손선택자 => 자손 선택자인지 후손 선택자인지 잘 판단하고 봐야한다! 자손선택자 * > 를 씀으로써 자손선택자임을 나타낸다!! 태그 요소 선택할 때 자손 선택자 주의사항 05 반응, 상태, 구조 선택자 1. 반응 선택자 2. 상태 선택자 3. 구조 선택자 * 구조선택자 사용시 주의 사항 li > a:first-child { color: red; }를 li:first-child > a { color: red;}로 변경! 06 CSS3 단위 2022. 4. 27. [HTML5] 입력 양식 태그와 구조화 태그 01 입력 양식 태그 입력 양식 - 사용자에게 정보를 입력받는 요소 입력 양식 개요 - 태그: 영역 생성 데이터 전달 방식 - 태그는 method 속성의 방식으로 action 속성 장소에 데이터 전달 - GET 방식: 주소에 데이터를 입력해서 전달 - POST 방식: 주소 변경 없이 비밀스럽게 데이터 전달 입력 양식 종류 [예제 1] 간단한 입력 양식 생성 라디오 버튼의 name 속성을 이용해 여러 대상 중 하나만 선택하는 형태 [예제 2] 선택 가능한 입력 양식 1. 한 항목만 선택하기: 태그 이용 목록으로 보여 주는 항목 중 하나 또는 여러 개를 선택할 때 사용 기본적으로 하나만 선택가능 , 태그를 함께 사용 2. 여러 항목 선택하기: 태그의 multiple 속성 사용 3. 선택 옵션 묶기: 태그 사.. 2022. 4. 26. [HTML5] HTML5 기본 태그 요소는 HTML 페이지를 구성하는 각 부품이다. 태그는 요소를 만들 때 사용하는 작성 방법이다. 스타일 시트는 마크업 언어가 표시되는 방법을 기술하는 언어로 HTML 페이지의 스타일을 지정할 때 사용한다. HTML 요소의 태그, 속성, 속성값 구분하여 작성!! 태그: img 속성: title, alt, src 속성값: 바다, sea, sea.png HTML5 기본 페이지 형태 작성 01 글자 태그 1. 제목과 본문 글자 태그 - 문서의 제목을 표현할 때 사용 - h는 heading을 의미 제목 태그는 h1~h6까지 존재하며, 숫자가 작을 수록 크게 출력된다. - p는 paragraph의 약자 태그는 본문 문단을 구분하며, 글의 단락을 나타낸다. - br는 break의 약자 태그는 줄 바꿈을 생성한다. -.. 2022. 4. 16. [HTML5] 웹 페이지 기본 구조 HTML5 기본 용어 태그와 요소 - 요소: HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등) - 태그: 요소를 만들 때 사용하는 작성 방법 내에 태그의 이름이 작성되며 내용의 앞, 뒤를 시작 태그와 종료 태그로 감싼다. 시작 태그: , 종료 태그: * 태그 중첩 : 태그 안에 또 다른 태그를 선언할 수 있다. 속성 - 속성: 태그에 추가 정보를 부여할 때 사용하는 것 태그에 추가적인 정보나 제어를 설정하고, 태그의 이름 뒤에 속성 이름 ="속성값"으로 표현한다. 자식 태그는 부모 태그를 벗어나서 사용될 수 없다. 주석 - 주석: 코드 설명 기록(프로그램의 실행에 영향을 미치지 않음) 화면에 실제로 노출되지 않고, 개발자가 메모하는 용도로 사용된다. 내에 내용을 작성하며 여러 줄로 작성할 수.. 2022. 4. 16. 이전 1 2 3 4 다음
