Design & Impression

https://www.pinterest.co.kr/search/pins/?rs=ac&len=2&q=responsive%20website&eq=responsive&etslf=5843&term_meta[]=responsive%7Cautocomplete%7C1&term_meta[]=website%7Cautocomplete%7C1 

 

Pinterest

요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.

www.pinterest.co.kr

 

 

https://dribbble.com/

 

Dribbble - Discover the World’s Top Designers & Creative Professionals

Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals. Sign up

dribbble.com

 

https://codepen.io/

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

 

https://todomvc.com/

 

TodoMVC

Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more

todomvc.com

https://2colors.colorion.co/

 

 

https://uigradients.com/

https://www.w3schools.com/tags/ref_colornames.asp

 

 

API

 

https://giphy.com/

 

GIPHY - Be Animated

GIPHY is the platform that animates your world. Find the GIFs, Clips, and Stickers that make your conversations more positive, more expressive, and more you.

giphy.com

 

 

https://www.spotify.com/kr-ko/premium/?utm_source=kr_brand_none_text&utm_medium=paidsearch&utm_campaign=alwayson_kr_kr_premiumbusiness_koreasearch+desktop+core_brand+text+exact+kr+google&gclid=Cj0KCQiArt6PBhCoARIsAMF5wagDLHJh7_rjJNSiPRZeLWNX9c_b-N_I_iYCYvzp12WxkhHYrRzJB5MaAkafEALw_wcB&gclsrc=aw.ds 

 

Premium 멤버십

일주일 동안 Spotify의 Premium 스트리밍 서비스를 체험해보세요. 이미 체험해보셨나요? 지금 가입하면 3개월 더 무료로 이용하실 수 있습니다.

www.spotify.com

 

https://www.themoviedb.org/?language=ko 

 

The Movie Database (TMDB)

찾으시는 영화나 TV 프로그램이 없나요? 로그인 하셔서 직접 만들어주세요.

www.themoviedb.org

 

https://www.edamam.com/

 

Edamam - Eat better!

 

www.edamam.com

 

https://apimeme.com/

 

APIMeme - Meme Generator API

 

apimeme.com

 

https://www.kiwoom.com/h/customer/download/VOpenApiInfoView?Ap4kn=NaMHTpMR2WhPhQSqyHq3iQEfMrA8gChfhQdSoiEahBtyNaMJhBnFWjXHojhZTQUXH6EAHOErrHXj0iEIS8iAAq61HQXDrjLq2et3dTGmWrMerO8JwrdTwQUM0EUJwXLaTTgqTJME0eiiijda28d6wXdFNBXTdH5aTrGnT1dLG1oZwJfaNxGuwpdFSjiTgxiei1AEw1UCWqArWJdpI6dS0VLpW1SVoB8JIiEfw1LMWH6Zo4MqwT3awiAGWTUYIjUpdJAMT4wuSJDQIBXJH6Di2VS2oVi0rELDIiGJwqdHGJD8o45JSXEA2rUayEUZojUgG1guTpdfojiU0jdtIQDCdHEmd4XiwBGaTVTpA1LWiEUeoHTuGBdgT1wudJGur6SrG6uuHxdFGrSjrxStwVAQHEAOWpS0d63hG1AqdHf3WTDeIQqJIXEHdHGxoTDQW8XhIQM1AEAgyOEZWqXEi1UK2TIuHTtSdjXrSeXnA1LtWrXVHT3I0JDKT4dpgxSGIBAaTV94wXdSNQXjdQ5a0OMfgxUEwOi10jdqIrXfdVdZwOM8wxGaiqAngQUad1TZdBAqIHtfdVdaNr9ZdTXaSOLK0HE4rjiUW8haITUudHErdpMYdiSq0Jiu2rUqd1i0ApUq28UugOEg2xX10BJFlCMnhBnFGriQAxLQ2ei6Ae8Zg4GFgrIaIrgJGQIqgQGUAx9qAHIqgeouAx6Dg4oD2x61Gro3gxTa2xdQIBg1GBo4IpAUIHGXIropg48DIQMX2eMFAB84AriBAxLXIBIpGxEXgxT1AeiQgB9aGB5JAHo1gpMQgr5pAHAU2r8p2rG6gBAQGBhFlCMUwahPHqqcVVJ%253D&JRO2QHs6F=ZHVtbXlWYWwlM0Qw 

 

키움증권

키움 Open API+는 프로그램 개발 확장성을 고려하여 OCX 컨트롤로 제작 지원합니다. 사용자 편의에 따라 VB, 엑셀, 웹기반, MFC 등으로 프로그램 제작이 가능합니다. 데이터 요청 및 수신은 TR 서비스

www.kiwoom.com

 

https://www.data.go.kr/

 

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

https://developers.naver.com/main/

 

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음

developers.naver.com

 

https://publicapi.dev/

 

PublicAPI - A collection of free APIs for software and web development use

PublicAPI is a free directory of public APIs for software, mobile and web development use. You can search, filter and mark the APIs and use them in your apps for free!

publicapi.dev

 

https://github.com/public-apis/public-apis

 

GitHub - public-apis/public-apis: A collective list of free APIs

A collective list of free APIs. Contribute to public-apis/public-apis development by creating an account on GitHub.

github.com

 

 

https://www.youtube.com/watch?v=8-uJ_4136uI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=12 

 

 

 

 

 

https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9 

 

 

Container

 

 

display

 

flex-direction : main axis, cross axis 어느 방향으로 정렬할 것인지 정하는 것에 의해 바뀜.

 

flex-wrap

 

flex-flow

 

justify-content

 

align-items

 

align-content

 

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>
.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* flex-flow: column nowrap */
/*   justify-content: space-between;
  align-items: baseline;
  align-content: space-between; */
}
.item {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}
.item1 {
  background: #ef0a0a;
  flex-grow: 1;
  flex-shrink: 1;
  
  align-self: center;
  
  /* flex-basis: 30%; */
}
.item2 {
  background: #f48fb1;
  flex-grow: 1;
  flex-shrink: 1;
}
.item3 {
  background: #ce93d8;
  flex-grow: 1;
  flex-shrink: 1;
}

 

 

 

 

Color 선택할 때 유용한 사이트 

 

https://material.io/resources/color/#!/?view.left=0&view.right=0 

 

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

material.io

 

 

Flex Box 복습 게임

 

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8 

 

 

display 

 

block : 상자로 변환 한줄에 한개

 

inline : 인라인으로 변환 (물건)

 

inline-block : 상자로 변환되어서 안에 컨텐츠와는 상관없이 박스의 width나 height에 맞춰서 표기

 

 

 

 

Position

 

static : Postion의 기본값 Html에 정의된 순서대로 자연스럽게 보이는 것.

 

relative : 원래 있어야할 자리에서 이동. (static의 위치에서 변경 값만큼 이동)

 

absolute : 아이템이 담겨있는 가장 가까운 box안에서 위치 변경이 이루어진다. 

 

fixed : 상자에서 벗어나서 웹페이지의 기준으로 이동한다. 

 

sticky : 원래있어야할 자리에 있지만 스크롤을 내려도 따라옴. 

 

 

 

브라우저에서 CSS를 사용할 수 있는지 확인하는 사이트

 

https://caniuse.com/

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

 

 

 

 

https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7 

 

CSS (Cascading Style Sheet)

 

CSS는 우리가 작성한 HTML을 우리가 원하는대로 꾸며줄 수 있게 해준다. 

 

 

Cascading

 

정의된 세부적인 것이 있을경우 그것을 쓰고 없으면 다음으로 넘어간다.

 

다음 순서를 따른다.

 

1. Author Style : 우리가 정의한 Style

 

2. User Style: 사용자가 정의한 Style

 

3. Browser가 정의한 Style

 

!important 는 Cascading을 분리하는 방법 가능하면 쓰지 않는 것이 좋다.

 

 

 

Selectors

 

 

Tag 가까이 설정한 값들이 Universal보다 우선순위에 있다. 

 

 

Attribute Selector

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

 

 

CSS Selector 를 연습할 수 있는 사이트

 

https://flukeout.github.io/

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

 

 

 

 

https://www.youtube.com/watch?v=OoA70D2TE0A&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=6 

 

공부할때에는 세부적인 것을 배우는 것도 중요하지만 멀리서 큰 그림을 먼저 보는 것이 중요하다. 

 

 

Tag의 분류

 

Tag는 사용자에게 보여지지 않는 Box와 사용자에게 보여지는 Item 두개의 종류로 분류할 수 있다. 

 

 

재사용가능한 것들을 묶어서 나타내 주는 것이 article이다. 

 

 

 

Block과 Inline구조

 

 

엘레먼트와 노드

 

 

 

어트리뷰트

 

 

 

HTML Tag 분석

 

<a href="https://google.com" target=_blank>Click</a> <!-- target은 a태그를 클릭했을 때, 어디에 웹페이지를 열것인지를 정의힌다. -->

 

 

ol : order list

ul : unorder list

 

+ Recent posts