본문 바로가기

분류 전체보기

 (231)
Responsive NavBar 기본 NavBar의 화면은 다음과 같이 표시된다 화면이 줄어들면 메뉴바는 사라지고 작은메뉴(햄버거)가 생긴다. 작은메뉴(햄버거)를 클릭하면 아래로 메뉴가 추가된다. 이때는 js를 이용하였다. hover기능도 표시되도록 추가하였다. 메뉴바를 만들면서 최대한 기능을 익숙하게 사용하기위해 주석을 달았다. 앞으로 새로운 Responsive NavBar를 사용할때 참고하면 좋을것 같다. GitHub 코드 : https://github.com/bellcastle88/nav_bar
10 VS Code emmet tips to make you more productive VS Code and Emmet Visual Studio Code(aka, VS Code) is one of the leading source code editor(also an IDE) and arguably one of the best today for web development. Emmet is a plug-in based infrastructure that can produce HTML/CSS code snippets from short-hand syntaxes. VS Code supports Emmet 2.0 out of the box. It means you do not need any additional extensions to take advantage of it. Let us see t..
DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (3) Material Design Color Tool 컬러 지정해줄 주는 사이트 https://material.io/resources/color/#!/?view.left=0&view.right=0 Flexbox (css의 꽃) 박스안에서 자유롭게 배치할 수 있는것 Container에 지정되는 속성값 Item에 지정되는 속성값 Flex-grow : 윈도우 창에 맞춰서 커지고 줄어든다 Flex-shrink : 창에 따라 줄어들지 Align-self : 원하는 박스만 따로 배치하고싶을떄 Float CSS Tricks for Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Flexboxfroggy // flexbox연습사이트 https://flexb..
DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (2) 웹사이트 만들때 가장 중요한것 Box를 원하는 위치,사이즈로 배치하는것 display, position에 대해서 알아야 한다 Span은 내용이 있어야 표시된다 Div는 block 레벨이라서 한줄에 하나씩 나옴 Span은 한줄에 여러게 나옴 Inline = 물건 Inline black = 상자인데 한줄에 여러개가 진열될 수 있는 특별한 상자 Black = 한줄당 하나씩 들어가는 상자 Position Position = 기본값으로 static을 가진다 relative = 원래 있어야 하는 자리에서 옴겨간다. absolute = item이 담겨있는 상자안에서 위치한다 ( class="container" ) Fixed = 전체윈도우 화면에서 위치한다 Sticky = 스크롤이 움직여도 원래자리에서 유지된다 브라우..
Introduction to the DOM Introduction to the DOM The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. In this guide, we'll briefly introduce the DOM. We'll look at how the DOM represents an HTML or XML document in memory and how you use APIs to create web content and applications. What is the DOM? The Document Object Model (DOM) is a ..
DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (1) css-Flex Box 알면 도움된다 모두다 마스터 할 필요는 없다 Mark up언어 : 구조적으로 작성된것 head : 상세설명 body : 사용자에게 보여지는 tag로 이루어져 있다 MDN : 사이트 추천 validator.w3.ort : Html오류가 있는지 검증 해주는 사이트 Document and website structure: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure Box : 웹사이트는 box들로 이루어져 있다 Jsbin : https://jsbin.com/?html,output href : 링크하고싶은 주소입력 Target : 어디에 이 페이지를..
Spring & Hibernate for Beginners 수료 스프링 개념을 이해하기위해 공부했던 Spring & Hibernate 코스를 마무리했다 전체적인 개념을 이해하고 실제 코드설명을 들으며 코딩하니 이해가 잘 되었고 흐름을 잡는데 큰 도움이 된거같다. 꽤나 긴 강의였는데, 끝내고나니 섭섭한 마음이 앞선다 4달정도 매일 수업을 시간내서 수강한것같다.
React - Spring Boot Toy Project (1) 가장 만들고 싶었던 Spring boot + React 프로젝트를 드디어 시작하게 되었다. 그 동안 공부한 Spring REST API, Spring Data JPA를 활용해볼 수 있을것 같다. React도 백엔드에서 api를 받아 어떻게 페이지를 구성하는 공부할 것이다. 먼저 start.spring.io/에서 start파일을 구성한다. 위에 구성을 체크하여 받아준다. 사용하는 IDE에서 파일을 열어준다. Package 를 생성하고난 후 User Class를 생성한다. package com.myapp.springboot.model; import javax.persistence.*; @Entity @Table(name = "users") public class User { @Id @GeneratedValu..

티스토리툴바