올리비아 코딩스쿨

내가 만든 웹페이지가 모바일에 적합한지 알 수 있는 사이트가 있다. 요즘은 모바일에 친화적이지 않으면, 같은 키워드로 검색했을 때 나의 웹페이지가 검색 순위에서 밀려난다고 알려져있다. 따라서 웹사이트를 만들 때, 모바일 친화성을 고려하며 만들어야 한다. 자신이 만든 웹사이트를 모바일 친화성 테스트로 검증해보자. 구글에서 만들었다. https://search.google.com/test/mobile-friendly 모바일 친화성 테스트 - Google Search Console Search Console 정보 Search Console에서는 해킹된 콘텐츠 감지와 같은 중요한 사이트 오류를 알리고 콘텐츠가 검색결과에 표시되는 방식을 관리할 수 있도록 돕습니다. search.google.com 방문자가 휴대기..

날이 갈 수록 PC보다 모바일의 중요성이 커지고 있다. 실제로 요즘 10대들은컴퓨터를 사용하는 시간보다, 모바일에 쏟는 시간이 훨~씬 많다. 영상편집, 글쓰기, 검색 등을 모두 할 수 있으니 컴퓨터 플러그를 연결하고, 전원을 켜고, 부팅하고, 사이트로 들어가, 로그인을 하고, 작업을 하는 긴 과정보다 자동로그인 되어 있는 모바일의 버튼 하나만 클릭하면 되는 간편함을 요즘 시대는 추구하는 것이 당연하기도 하다. 그렇다면 웹개발자는 이런 시대의 특성을 반영해야 한다. 실제로 구글에서는 웹사이트를 검색에서 노출시킬 때, 해당 웹사이트가 다양한 사이즈의 화면에서도 유동적으로 크기를 조절하고 배치하는 웹반응형인지를 체크하고, 그렇지 않다면 검색 순위에서 떨어뜨린다. 따라서 웹개발자는 반응형웹을 구성할 수 있어야 ..

1. 기본 stacking order html에서는 쓰여진 순서대로 차례차례 쌓이는(stack) 것이 기본이다. yellow blue red .yellow { height: 100px; width: 100px; background-color:yellow; } .blue { height: 100px; width: 100px; left:50px; background-color:lightblue; } .red { height: 100px; width: 100px; left:100px; background-color:red; } 2. 부모-자식 parent-child 그런데 HTML 요소 간에 계열이 있다면, 부모 위에 자식이 올라온다. 노랑(부모) - 파랑(자식) 간의 계열로 바꾸면 파랑이 노랑색보다 위에 있..

부트스트랩에서 카드를 만들어 자료 구조를 시각화해보자. 1. card-header, body, footer 카드는 html이 헤드, 바디, 푸터로 나누어 코드를 작성하는 것처럼 코드를 쓴다. 이번에는 헤더와 바디만 써보도록 하자. card header card body 2. 크기에 따른 반응형 class ="row", class="col-lg-6" 등을 사용하여 반응형 카드를 만들어보자. col-lg-4 화면의 크기가 'lg' 이상일 때는 한 줄의 4/12만큼의 크기로 존재하다가, 그 이하로 줄어들면 화면의 100%로 바뀐다. 첫 번째 카드 두 번째 카드 세 번째 카드 이번에는 이 상태에서 col-md-6, col-md-12를 추가하여 첫 번째, 두 번째 카드는 가로 사이즈가 md 이상일 때는 전체의 6..

부트스트랩, 리액트, 노드 등 다양한 프레임워크를 기반으로 한 UI 키트, 탬플릿, 대시보드를 제공한다. 대부분 유료이다. 하지만 무료인 것 중에도 꽤 최신이고, 품질 좋은 것을 구할 수 있다. 크리에이티브 팀 사이트를 소개한다. https://www.creative-tim.com/ Premium Bootstrap Themes and Templates UI Kits, Templates and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js and Laravel. Join 2,065,602+ users and to access all our free items! www.creative-tim.com 장점은 다음과 같다. 다양한 프..