🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [24]일차🚀24일차에는 CSS의 float속성, clear속성, 폰트 사용법 등과 함께 자기소개 페이지의 틀을 만들어볼 수 있었다.자바스크립트를 시작하면서 자바와 비슷하면서도 다른 면이 많은 문법을 배울 수 있었다.타입을 정확히 선언하지 않지만 var, let, const 변수에 담을 수 있는 것과 var은 더이상 권장하지 않는 다는 점을 배울 수 있었다.SPA Single Page Application (단일 페이지 애플리케이션)사용자의 몰입도를 높이기 위한 기술로 OTT, 인스타그램 앱 같은 서비스에서 사용웹페이지의 최신 업데이트를 빠르게 반영하여 로딩 속도 향상 및 트래픽 감소 가능페이지 전환이 부드러워지고, 페이지 로딩 시간을 단축하..
🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [23]일차🚀23일차에는 CSS의 선택자를 배웠는데, 개인적으로는 선택자를 배우면서 좀 어려움을 많이 느꼈다.선택자 옵션 자체가 많은 것 같기도했고, >, ~, nth-child 등 비슷하면서도 구분하기 좀 어려운 선택자도 많다고 느껴졌다.이전에 공부할때도 가장 중요하다고 느꼈던 position 옵션도 여전히 어려운 점이 많았다. 단순히 그 태그의 속성만 신경쓰는 것이 아닌 부모 태그의 position 옵션도 고려하여 작성해야한다는 것이다.이러한 점때문에 오늘 회고를 진행하면서 CSS의 선택자와 position 옵션에 좀 더 친숙해져야겠다고 느꼈다.자바스크립트의 서버자바스크립트의 lite-server : 웹서버의 역할로 단순히 요청에 응답을 ..
🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [22]일차🚀22일차에는 HTML의 기초와 태그들, 본격적으로 CSS를 배웠다.학부때 배웠던 내용을 더 자세히, 다양한 실습으로 배운 느낌이라 얻은게 많은 22일차였다.회고를 통해 CSS의 다양한 실습을 진행해보았다.XML 태그들 ... 로 시작해서 로 끝나는 형태를 XML(확장가능한 마크업언어)XML을 이용해서 HTML을 만든 것각각의 문서는 스키마(schema)를 가지고 있다.XML은 데이터를 전송할때 표준적으로 어떻게 보내야할지를 도와주는 역할을 한다. 이렇게 태그별로 전송하게되면 단순히 데이터를 전송할때보다 명확한 역할을 가지게 될 것이다.👀공공데이터를 XML로 제공하기도 하지만 점점 json 타입으로 제공하는 방식이 많아지고있다...
CSS의 간단한 문법을 복습해보고 CSS 꾸미기의 유용한 도구인 부트스트랩에 대해서 공부해보고자 합니다. : 내 눈에 보이는 부분입니다. : 구역을 나누는 태그로, 여러가지 태그들을 한번에 옮길때 묶어서 옮길 수 있습니다. : 문단을 뜻합니다. : 문장 중에서 특정 글자에만 무언가를 효과주고싶을때 사용합니다. : 하이퍼링크를 사용할 수 있습니다. : 가로선을 주는 태그 CSS 주석처리 : 태그에서 /* 텍스트 */ HTML 주석처리 : 태그에서 1. div 태그 >> Button의 부모태그는 div태그라고 한다. >> 부모태그의 내용을 상속받는 것이다. 2. image 태그 이미지를 넣을때는 background-image:url("링크"); background-size:cover; background-p..
강의를 참고해 객체에 간단한 애니메이션을 주는 방법에 대해 알아봅니다. 먼저 CSS에는 애니메이션에 쓰일 Animation 속성이 있는가 하면 간단하게 바꿀 수 있는 Transition 과 Transform 속성이 있습니다. Transition은 속성을 서서히 변화시키는 효과, Transform은 객체를 회전시키거나 크기 조절, 이동, 기울임 등을 지정할 수 있는 속성입니다. Introduction Transition transition : property timing-function duration delay | initial | inherit property : 속성을 정할 수 있습니다. ex) width, background 등을 포함할 수 있습니다. timing-function : 트랜지션의 속도..
강의를 참고해 홈페이지 디자인, UI를 만들어봅니다. 간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다. 이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다. Introduction Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다. float: left | right 필요한 요소 : 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등 로고(버튼 좌측에 위치하도록 함) 가장 먼저 보여질 Top Bar 부분 전체 코드 (Editing_homepage.html) 로그인 | 회원가입 | 마이페이지 | 주문배송 조회 | 장바구니 | 이용안내 | 고객센터 | myshop 소개 ..
강의를 참고해 절대 위치와 상대 위치에 대해 알아봅니다. 절대 위치와 상대 위치는 position 위치에 대한 요소를 의미합니다. 절대 위치는 다른 객체에 영향받지 않고 지정한 위치나 속성에 따라 고정값을 가지는 위치를 의미합니다. 절대값이며, 부모 요소를 기준으로 위치를 정하게 됩니다.상대 위치는 자신의 위치에서 상대적인 위치로 이동이 되는 속성입니다. 다른 객체를 이용할 수 있고, 간단히 이동하고자 할때 사용하기도 합니다. Introduction 보통 도형이나 박스 혹은 객체들을 만들어줄때 크기나 위치를 지정해주기도 합니다. 크기 속성으로는 width (너비 - 가로) 와 height (높이 - 세로) 속성이 있고,위치 속성으로는 position : absolute | relative 외로 left ..
강의를 참고해 박스에 스타일을 적용합니다. 태그 내에 box-shadow 속성을 적용하여 박스에 그림자를 적용하고, 태그 내에 border, border-color, border-width 등의 속성을 이용해 테두리를 적용합니다. Introduction 박스 그림자 속성은 box-shadow 를 통해 지정해 줄 수 있습니다. box-shadow: none | x-position y-position blur spread color | inset | initial | inherit 이러한 문법을 가지는데, 왼쪽부터 none : 그림자를 적용하지 않음 x-position : 가로에 대한 그림자 위치를 나타내며, + 시 오른쪽에 그림자가 생기고, - 시에는 왼쪽에 그림자가 만들어집니다. (필수) y-positi..
강의를 참고해 선택자에 대한 예제를 실습해봅니다. 간단한 실습이며, h1 = 적용하고자 하는 태그 test1 = 임의 클래스명 { color : blue } = 지정하고자하는 속성 전체 코드 (class_selector.html) 가벼운 마음으로 배우는-녹색 가벼운 마음으로 배우는-파란색 가벼운 마음으로 배우는-빨간색 Result 다음은 구조 선택자입니다. 구조 선택자는 '일반구조 선택자'와 '형태구조 선택자'로 나뉩니다. 일반구조 선택자에서는 홀수나 짝수번째에 다른 스타일을 적용하고자할때 사용합니다.'요소의 class 특성에 기반해 요소를 선택하는 선택자' 입니다. 형태구조 선택자에서는 일반구조 선택자와는 다르게 태그의 형태를 구분합니다. 특정 태그를 선택하여 스타일을 적용하게됩니다. 선택자 형태 : ..
