web8 [AWS] AWS 가입하기-가입절차 개인 홈페이지를 구축해볼까 생각이 들었습니다. 근데 서버로 쓸만한 장비가 딱히 없기도하고, 클라우드 서버가 대세라고 하길래 무장적 해보려고 합니다. 혹시나 같은 경험이 필요한 분들을 위해 AWS를 사용하는 과정을 기록합니다! Let's Go~! 1. 구글에 aws 를 검색하거나 https://aws.amazon.com/ 로 접속 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services 컴퓨팅에 대한 새로운 소식 거의 모든 애플리케이션을 어디에서나 지원할 수 있는 AWS 설계 칩, 인스턴스 및 하이브리드 솔루션과 같은 컴퓨팅 혁신에 대해 알아보세요. 발표 내용 살펴보기 aws.amazon.com 2. 사이트 접속 후 우측 상단에 "AWS 계정 생성" 을 클릭합니다. 3. 가입 5단계.. 2023. 1. 9. [HTML+CSS] slide 애니메이션있는 사이드메뉴 효과내기 사이드의 메뉴를 열었다, 닫았다 하는 예제입니다. See the Pen side slide 효과 by limqo (@limqo) on CodePen. 1. 먼저 메뉴부분과 버튼부분으로 영역을 잡아주고, 적절한 위치에 배치를 해줍니다. 2. animate(이동방향거리, delay); 를 이용하여 화면 밖의 영역으로 div를 이동해 줍니다. 3. toggleClass를 이용하여 메뉴의 상태와 화살표 방향을 변경해 줍니다. 생각보다 간단하면서 있어보이는(?) 효과를 나태낼수 있고, 디자인적으로 좀더 신경을 쓴다면 훌륭한 연출을 할 수 있을 것 입니다. 2020. 7. 27. [HTML+CSS] div 자연스러운 테두리 효과(box-shadow) 3D의 dashborad의 느낌으로 div를 꾸미기 위해 box-shadow를 이용하면 자연스러운 연출을 할 수 있습니다. See the Pen 테두리 그라에디션 효과 by limqo (@limqo) on CodePen. box-shadow는 shadow방향(ouset, inset), Xoffset, Yoffset, Blur(흐림), Spread(확산), color로 구성되 있습니다. 크롬의 DevTools를 이용하면 쉽게 사용하고 이해할 수 있습니다. 그림처럼 DevTools에 Style 탭에서 box-shadow앞에 아이콘을 확인할 수 있습니다. 이 아이콘을 클릭하게 되면 아래와 같은 설정창이 나옵니다. 위 창에서 원하는 수치를 확인하면서 작업하면 더 쉽게 작업을 할 수 있습니다. 2020. 7. 27. [HTML+CSS] ul, li 태그로 트리구조 만들기 트리구조는 아래의 그림처럼 우리가 흔히 볼 수 있는 폴더의 구조입니다. 또한 웹개발을 할때 메뉴, 카테고리 등을 표현할 때 필요한 구조입니다. 다음은 코드입니다. See the Pen Tree by limqo (@limqo) on CodePen. 구조는 이 기본 한 묶음이고, 하위 트리를 생성할 경우는 하위에 새로운 을 추가하면 됩니다. javascript를 응용하여 동적으로 생성 할 수 있습니다. 마지막 노드 여부를 class="lastTree"로 판단하고, 여기에 필요한 이벤트를 추가하면 됩니다. 코드를 보면 선택 여부를 를 이용하여 선택 여부를 확인합니다. 2020. 7. 17. [HTML+CSS] 간단한 플로팅 배너 예제 플로팅 배너(따라다니는 배너) 흔히 쇼핑몰 사이트이나 사이드 광고에서 많이 볼 수 있는 기능입니다. 아래 그림처럼 오른쪽에 '장바구니', '최근본상품' 같은 내용을 보여줍니다. 플로팅 배너는 쉽게 말하면, 현재 스크롤이 이동한 높이를 배너의 높이에 적용시킨다라고 생각하면 쉽게 이해하실 수 있습니다. 아래의 예제 코드를 살펴 보겠습니다. See the Pen KKVGwOa by limqo (@limqo) on CodePen. js를 보면 $(window).scroll()를 이용하여 스크롤이 입력되면 인식할 수 있습니다. 추가적으로 $("#target").scroll()처럼 특정 영역을 id나 class로 지정하여 사용할 수도 있습니다. 스크롤을 인식 하였다면 animate()을 이용하여 좀더 자연스럽게 동.. 2020. 7. 16. 이전 1 2 다음 728x90 반응형
