Web
[Bootstrap] 부트스트랩 정리
부트스트랩 기본 원리 부트 스트랩 사용 예시 div class="d-inline p-2 bg-primary text-white" div class="box bg-warning d-sm-none d-md-block" div class="box bg-success d-md-non d-xl-block" - Layout d-{value} 'd-'는 display를 의미 values none inline inline-block block grid table table-cell tabel-row flex inline-flex - Breakpoint 중단점 클래스 너비 X-Small = 576 px Medium md >= 768 px Large lg >= 992 px X-Large ..
웹 페이지 제작단계
기획 - 디자인 - 퍼블리싱 - 프로그래밍 기획 사이트에 들어갈 내용 정리, 사이트맵 (전체적인 메뉴의 구조), 스토리보드, 웹 기획서 디자인 디자인보드 내용을 토대로 보기좋게 만들기 퍼블리싱 디자인 이미지 파일을 웹에서 볼 수 있는 언어로 작업, 자바스크립트를 사용한 애니매이션 등 활용 프로그래밍 웹 페이지의 기능을 구현 카페24, 고도몰, 메이크샵 : 쇼핑몰 특화 솔루션, 필요한 기능을 미리 구현해서 제공, 빠르게 쇼핑몰 페이지 제작 가능 그누보드 : 회원관리, 게시판관리 설치형 솔루션 스토리보드 작성에 도움이 되는 페이지 피그마 : http://www.figma.com 참고링크 https://youtu.be/yVeRaROxVDw https://youtu.be/ra3EpF9WTow
[CSS] Flexbox Froggy - CSS 연습 게임
어렵지 않은 수준의 CSS 학습용 게임 사이트다. Flexbox의 정렬, 위치를 이해할 수 있다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com
[CSS] CSS Dinner - CSS 문법 연습 게임
드림코딩 엘리님의 영상을 보다가 알게 된 사이트다. CSS 문법을 지루하지 않도록 게임을 할 수 있다. 오른쪽 목록의 설명이나 단계명을 힌트삼아 쉽게 풀어갈 수 있다. 도움없이 과연 몇 단계까지 올라갈 수 있을지..! https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io
[생활코딩] CSS 강의
HTML : 정보를 어떻게 가장 잘 표현할 것인가 CSS : HTML의 정보를 어떻게 디자인 할 것인가 html에 css 삽입하는 방법 Hello World Hello World sytle 태그에 CSS를 담는다 CSS 언어 문법에 따라 html 스타일을 지정하게 된다 html 내에 직접 style을 지정하는 방법도 가능 선택자와 선언 HTML CSS JavaScript 구글 images에 css selector를 검색하면 css 문법 명을 확인할 수 있다 선택자의 종류 .. HTML CSS JavaScript id : 특정 부분의 스타일을 다르게 하고 싶을 때 사용 id라는 속성을 주고 속성값을 주면 css에서 사용할 때 #을 기입 클래스를 대상으로 css에서 사용할 때 .을 기입 세 가지의 선택자 :..
[생활코딩] HTML 강의
html 속성, a태그 해당 링크가 표시되는 텍스트 a 태그 : 문서와 문서를 연결해줄 때 사용, anchor의 약자 target : "_blank"를 지정하면 새로운 탭에서 해당 링크로 이동 title : 링크의 이름, 마우스를 올려놓으면 title이 표시 됨 li 태그 기술소개 기본문법 유재석 박명수 li 태그 : 리스트 형태로 입력 ul 태그 : 성격이 같은 항목끼리 묶기 위해 사용, unordered list ol 태그 : 리스트에 번호를 나타내도록 함, ordered list 문서의 구조 HTML 선행학습 title 태그 : 탭의 제목 입력 meta 태그 : html 페이지에 인코딩 적용, 한글의 경우 utf-8을 보통 사용 페이지 설정의 경우 head 태그를 사용, 본문인 경우 body 태그를..