ilsancityboy

AWS(Amazion Web Service) ec2 AWS (https://aws.amazon.com/ko/) 에서 제공되는 ec2 ( Elastic Compute Cloud ) 는 독립된 가상의 컴퓨터를 임대해주는 서비스이다.물리적인 컴퓨터를 직접 빌려주는것이 아니라 리눅스나 윈도우와 같은 OS가 설치된 가상 머신을 임대해주는 것으로 이를 원격제어하여 접속하고 사용할 수 있다. 이러한 가상머신을 우리는 인스턴스 라고 부른다.이번 글에서는 이를 활용해 나만의 웹 서버와 사이트를 만들어 볼 것이다. AWS 가입하기 https://aws.amazon.com/ko/ 에 가입한다. EC2 서비스 우리는 가상서버를 띄우고 사이트에 접속할 것이니 AWS가 제공하는 서비스중 EC2 서비스를 들어간다. 인스턴스 시작버..

이번 글에서는 흔히 많이 보았던 http와 https 에 대해서 알아볼 것이다. HTTP ( HyperText Transfer Protocol ) http는 인터넷을 통해 데이터를 주고받기 위한 프로토콜이다. 데이터를 평문으로 (암호화 하지 않은 텍스트) 전송하기 때문에 도청당할 수 있고 보안에 취약하다. HTTPS (HyperText Transfer Protocol Secure) https는 http 의 보안 버전으로 데이터를 암호화 하여 보호한다. 이를 위해 SSL (Secure Sockets Layer) , TLS (Transport Layer Security) 프로토콜을 사용한다. SSL,TLS ? SSL 이라는 프로토콜을 넷스케이프에서 만들었는데 어느날 표준화가 되었고 표준화가 되며 이름이 TL..

는 "division" 을 의미하며 html 문서에서 레이아웃을 구성하기 위한 컨테이너 역할이다. 제목 내용 내용 내용... 위 내용에서는 content 클래스를 가진 div 즉, 컨테이너 요소로서 내용에는 제목과 속 내용이 포함되어있다. 앞으로 자주 쓰일 것 같다.

MVC 패턴이란 무엇인가? MVC 패턴은 소프트웨어 개발에서 사용되는 디자인 패턴 중 하나로, 소프트웨어를 구성하는 세 가지 주요 컴포넌트를 나타냅니다 Model (모델): 이 부분은 데이터와 데이터의 처리를 담당합니다. 데이터는 어플리케이션의 상태나 정보를 나타내며, 모델은 이 데이터를 관리하고 조작하는 역할을 합니다. View (뷰): 뷰는 사용자 인터페이스(UI)를 나타냅니다. 이 부분은 사용자에게 정보를 표시하고 사용자의 입력을 받는 역할을 합니다. 뷰는 모델의 데이터를 시각적으로 표현합니다. Controller (컨트롤러): 컨트롤러는 모델과 뷰 사이의 중개자 역할을 합니다. 사용자의 입력을 받아 모델의 데이터를 업데이트하거나, 모델의 상태에 따라 뷰를 업데이트하는 역할을 수행합니다. MVC 패..

사이트를 보면 제일 상단에 위치하며 메인로고와 각종 버튼들이 있다. 또한 사용자가 스크롤을 내려도 해당 바는 사라지지 않고 사용자의 이동을 따라다닌다. 해당 기능은 HTML 문서 내에서 기능을 구현할 수 있고 CSS도 기본적으로 받쳐줘야한다. 이 기능에 대해 기본 구조를 알아보자. HTML //HTML 문서 구조-- 로고 홈 서비스 포트폴리오 연락 CSS /* 네비게이션 바 스타일링 */ header { background-color: #333; /* 네비게이션 바 배경색 */ color: #fff; /* 텍스트 색상 */ padding: 20px 0; /* 위아래 패딩 */ position: fixed; /* 화면 상단 고정 */ width: 100%; /* 너비 100% */ top: 0; /* 화면..

이번 글에서는 코드펜 (https://codepen.io/) 사이트에 대해 알아보고 활용할 것이다. 먼저 사이트에 접속해보자. 해당 사이트에서는 HTML , CSS , JS 를 실시간으로 테스팅할 수 있다. 왼쪽에 Start Coding을 눌러보면 HTML , CSS , JS 문서를 입력할 수 있는 공간이 나오고 결과물이 출력되는 공간이 나온다. 입력시에 바로바로 미리볼 수 있게끔 출력이 된다. 또한 코드펜에 활용성은 여기서 끝나지 않고 남들이 공유한 결과물을 보고 가져올 수 있다. 코드펜 메인페이지의 검색창에 원하는 카테고리를 입력해 검색해보자. 작성자는 login 을 검색해보았다. 그럼 login 카테고리와 연관된 결과물들이 나오는데 여기서 맘에드는 결과물을 클릭해 해당 페이지를 만들때 사용된 HTM..

이번 글에서는 JS (javascript) 에 대해서 알아볼 것이다. 앞에서 배운대로 HTML 과 CSS를 사용해서 로그인 페이지를 뼈대만 구현해냈다. 그럼 로그인 기능을 구현하기 위해 동작을 담당하는 JS를 사용한다. 기본 구조 JS의 기본 구조이다. head나 body에 스크립트를 정의하던가 JS 확장자로 파일을 만들어 HTML 에 연동시킬수 있다. C언어나 파이썬과 비슷하게 사용된다. 사용자가 웹 페이지에서 어떠한 행동을 해서 이벤트를 발생시켰을때 어떤 결과를 반환시킬지 만들수 있다. 지난글에서 HMTL 문서 내에서 어떠한 요소에 id를 주었었는데 이 id를 찾아와 행동을 줄 수 있다. document.getElementById('myButton') - id가 'myButton'인 요소를 찾아온다...

지난 글에서는 HTML 로 로그인 페이지 뼈대를 만들어 보았다. 이번 글에서는 HTML 메인 페이지와 CSS로 페이지를 조금 더 꾸며본다. 메모장을 열어 HTML 문서를 작성후에 .HTML 형태로 저장후 브라우저에서 열면 그대로 실행이 된다. 따라서 오늘은 해당 방법으로 진행 할 것이다. 메인 페이지를 만들고 로그인 버튼 이미지를 삽입 후 해당 이미지를 누르면 로그인 페이지로 이동시키기. 로그인 페이지에서 로고버튼을 누르면 다시 메인페이지로 이동시키기 먼저 웹 사이트에 띄워볼 이미지를 얻어와 test.jpg라는 이름으로 저장해두고 같은 경로에 test.txt로 텍스트 파일(메모장) 을 하나 만들었다. 그 후 test.txt에 html 문서를 작성할 것이다. 이미지 삽입 태그 이미지를 삽입하는 방법이다. ..

지난 글에서 HTML 기본 구조에 대해 알아보았다. 이번 글에서는 HTML 문서에 폼을 작성해 아이디를 받아내는 폼 , 비밀번호를 받아내는 폼 , 로그인 버튼을 만들어 간단하게 실제로 동작하진 않지만 뼈대만을 생성해 그럴싸한 로그인 페이지를 만들어보겠다. 여기서 폼(Form) 이란? 웹 페이지에서 사용자로부터 정보를 입력받아 서버로 보내 처리하거나 클라이언트에서 처리해주는 도구이다. HTML의 폼(form) 요소는 다음과 같은 구조를 가진다. action - 사용자로부터 입력받은 정보를 어떤 서버스크립트나 웹페이지로 전송할지 지정해주는 요소이다. method - HTTP 요청 메서드를 설정한다. 일반적으론 "GET" 이나 "POST"를 사용한다. GET은 데이터를 URL에 추가하여 전송하고 POST는 요..

지난 글에서 HTML , JS , CSS 에 대해서 간단하게 알아보았다. 이번 글에서는 HTML 문서를 간단하게 작성해보고 대략적인 구조를 알아볼 것이다. HMTL 문서의 기본적인 구성이다. 제목1 이것은 단락입니다. : html5 문서임을 정의한다. ( html5 - html 의 다섯번째 버전으로 최신버전) - HTML 문서의 시작과 끝을 알린다. 모든 HTML 요소는 태그 안에 있어야한다. 제목입니다. 안녕하세요 연습중입니다. HTML 삽입 미리보기할 수 없는 소스