Amazing Story

AWS에서 EC2 인스턴스를 생성하게 되면,키파일을 주잖아요. 그걸로, putty도 접속하구, Filezilla FTP도 접속하고 했는데..Editplus에서 FTP 들어가려니깐, 키파일 올리는 데가 없어요!!키파일 업로드 하는 곳이 아무리 뒤져봐도 없는거에요. 그래서 다른 분들도 혹시 저처럼 헤매실까봐 올려봅니다.Editplus에서 키파일로 AWS EC2 인스턴스 접근하기지금부터 시작합니다. 먼저, pageant.exe를 다운로드 받으세요.여기 사이트에 들어가서 목록 중에 pageant.exe를 찾아서 다운로드 받으시거나https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 간단히 이 링크를 누르셔도 다운로드가 가능합니다.http://the.ea..

오늘은 책을 한 권 소개할까 합니다. HTML, CSS 포스팅을 하면서 정말 많이 참고한 책이에요~제가 배운 학원에서 교재로 썼던 책이기도 하구요^^ 제목은모던 웹 디자인을 위한 HTML5 + CSS3 입문 입니다. (클릭하면 알라딘 서점으로 이동합니다^^) 많은 분들이 HTML, CSS 입문자들에게 정말 많이 추천하는 책이죵~제가 본 책은 2015년도 개정판이에요. 이 책 외에도 관련된 도서로 모던 웹을 위한 JavaScript + jQuery 입문,모던 웹을 위한 Node.js 프로그래밍,모던 웹을 위한 HTML5 프로그래밍 등이 있어요. 로드맵으로도 제공 하고 있네용~ 책 내용을 좀 살펴보면HTML과 CSS 태그, 속성 위주로 정리되어 있는 Cheat Sheet도 있구요. 마크업이나, 개념적인 부분..

비디오 파일을 GIF로 변환하는 방법에 대해서 알아보겠습니다. 소스코드 실행결과 보여드리려구 몇가지 써보다 보니깐너무 쉽고 너무 편한거 있죠? 여러분에게도 알려드리려구요ㅎㅎ처음에 헤매긴 했는데, 몇개 써보다가 여기로 정착했어요^^ 바로 입니다.(이미지 클릭하시면 ezgif.com으로 이동합니다.) 메인 화면은 이렇게 생겼어요. 위아래, 사이드에 광고가 조금 있지만,너무 편하니깐 광고쯤이야 패스하기로ㅎㅎ 먼저 상단 탭에서 Video to GIF 를 클릭합니다. 그 다음은 파일을 선택한 후에Upload video! 버튼을 클릭해주세요. 참쉽죠?전 트와이스 앨범 프리뷰 영상을 준비했어요원본영상은 TWICE(트와이스) "Summer Nights" NEW TRACKS PREVIEW 클릭하시면 유튜브에서 확인할 수..

■ 이미지 스프라이트(Image Sprite)란?- 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 background-position을 이용하여 배경이미지를 배치하는 방법- 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 감소하고 대역폭이 절약됩니다. 네이버의 경우에 메인화면에서 다음과 같은 Image Sprite를 사용하고 있고, 다음의 경우에는 다음과 같은 Image Sprite를 사용하고 있답니다. (여러개로 쪼개져 있는데 그 중 하나에요^^) 전 메뉴바를 이미지 스프라이트를 이용해서 만들어 보겠습니다. 기본 상태와 마..

일반적으로 사용되는 웹사이트의 기본 레이아웃에 대해 알아보겠습니다. 아래 그림과 같은 형태입니다. 왼쪽 또는 오른쪽 content 부분은 생략할 수도 있지만,헤더, 메뉴바(내비게이션), 메인 콘텐츠, 푸터보통은 이러한 형태를 갖고 있죠.이때 주의할 점은, body는 모든 요소를 그룹화하고 있으나 body아래 전체 요소를 그룹짓는 요소를 생성하는 것이 좋습니다. HTML5의 시멘틱 태그를 사용해서같은 형태로도 사용할 수 있고, 아래처럼 div에 id나 class를 선언해서 사용할 수도 있습니다. 어떤 형태로 쓰셔도 상관없지만, 중요한 건!!각각 그룹을 지어 사용한다는 점만 주의하시면 될 것 같아요. ■ 예시1 123456789101112131415161718192021222324252627282930313..

지난번에 이어 아래 소스로 드롭다운 메뉴바를 만들겠습니다. 버튼에 마우스를 올리면 아래로 메뉴가 촤르륵 뜨는 형태입니다. ■ HTML 소스 12345678910111213141516 Dropdown Link 1 Link 2 Link 3 ■ 스타일 소스※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요. 여기에 넣어주세요. 1234567891011121314151617181920212223242526272829303132333435.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;}.dropdown { position: relative;..

오늘은 4개의 카테고리를 가진 세로 메뉴바 / 가로 메뉴바를 만들어보겠습니다. w3school에 있는 예제를 참고했구요, html 소스는 다음과 같습니다. ■ HTML 소스 1234567891011121314 Home News Contact About 1. 세로 메뉴바 ■ 스타일 소스1※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요. 여기에 넣어주세요. 123456789101112131415161718192021ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;}li a { display: block; color: #000; padding: 8px 16px; text-de..

1. 퍼센트(%) 사용하기- body에 height 100%, 직계 자식요소의 width, height 값 100% 적용하기 ■ 예시1123456789101112131415161718레이아웃2 *{margin:0; padding: 0;} html, body{height: 100%;} .box{width: 100%; height: 100%; background-color: #00f;} .box1{width: 100%; height: 100%; background-color: #0f0;;} ■ 실행결과1※ 스크롤을 내려 확인해보세요. 각각의 div상자가 페이지 전체를 차지하고 있는 형태입니다. 2. 포지션(position) 사용하기 ■ 예시2 1234567891011121314레이아웃2 *{margin:0;..

1. 좌우 가운데 정렬 - 계층구조에서 부모요소에게 width값을 선언, height 값은 자식요소인 콘텐츠의 내용으로 사용. - 부모요소에 height를 고정값으로 넣지 말것!- width 값을 필수로 입력하고, 좌우 마진값을 auto로 설정한다. margin:0 auto; ■ 예시1 12345678910111213141516레이아웃 *{margin:0; padding:0;} .center{width: 200px; height: 100px; background-color: #ccc; margin:0 auto;} 블록요소의 가운데 정렬 ■ 실행결과1 2. 화면 가운데 배치하기- 화면 정가운데 배치는 position을 사용- left:50%; top:50%; margin-left: -(width의 1/2)..

14. 테이블 스타일※ 테이블에 스타일을 적용할 때, 자주 사용하는 속성을 알려드릴께요표의 선에는 border-spacing: 0; border-collapse:collapse; 를,제목을 나타내는 caption에는 display: none; 을 자주 사용합니다.(표제목은 웹접근성을 감안하여 꼭 작성해야 하지만, 디자인상 없애는 경우가 많습니다.) ■ 예시1 12345678910111213141516171819202122232425262728293031323334테이블 스타일 *{margin:0; padding: 0;} .aa{border: 5px solid #000; border-spacing: 0; border-collapse:collapse; } .aa *{margin:0; padding: 0;} ..