본문 바로가기

Web Dev17

Introduction to Bootstrap 4 - PART II 1. Why we need Javascript and JQuery? (Setting up project) Toggle's not working At first, Its toggle not seemes to work in our project's html. But on the codeply, it works. Why? Because in order for the booststrap collapsable menu to work, need Javascript and JQuery. How to make it work? Choose one of them, bundle or separate. As docs says, bundle inclueds Popper itself, not JQuery. So only two .. 2020. 12. 24.
Introduction to Bootstrap 4 - PART I d1. Wireframing a low fidelity representation of your design(low fidelity = low resolution) What is a wireframe? 웹사이트 와이어 프레임 (Website wireframe) 페이지 회로도 또는 화면 청사진이라고도하는 웹 사이트 와이어 프레임은 웹 사이트의 골격 프레임 워크를 나타내는 시각적 가이드입니다. 와이어 프레임은 특정 목적을 가장 잘 달성하도록 요소를 배열하기 위해 만들어졌습니다. 2. Mock-up a high fidelty representation of your web Workflow By looking at other's web sites. 1.Simple sketch 2.mock up 3.prototy.. 2020. 12. 24.
Installation Bootstrap 4 Bootstrap: Front-end Library Ways to install Bootstrap 1. CSS: install with maxcdn link from head. 2. Copy starter template. 3. download css and js source code. Recommended: CDN( low latency ) 2020. 12. 23.
Intermediate CSS - Confusing part: Box, Border What makes me kind of confusing. 1.Box model padding, width, height, margin, border Example is " tag". tag is inside of the bottom-container. original with only color attribute applied fig a + padding 40px all side 40px padding padding seems to expand it self. So clickable area is changed to the range of padding. fig a + margin 40px Like padding, the text distance becomes same. But the clickable.. 2020. 12. 23.
Intermediate CSS - PART II 1. Static and Relative Positioning CSS positioning 5-1. Content is Everything 5-2. Order Comes From Code 5-3. Children sit on parents Position 1. Static(default): go along with html 2. Relative 3. Absolute 4. Fixed Relative Positioning relative and left Coordinates - Top - Bottom - Left - Right ** relative top 50 means 50 margin from top by overlapping **relative** to its origin ! ** relative do.. 2020. 12. 22.
Intermediate CSS - PART I 1. Favicon favicon.io/favicon-converter/ Favicon.io - The Ultimate Favicon Generator (Free) With Favicon.io you can quickly generate a favicon for your website for free! favicon.io 2. Div margin 3. Box Model width, height, border, padding, margin top right bottom left values are clock-wise unless specifies the property 4. Display Block elements: - paragraphs - headers - divisions - lists and lis.. 2020. 12. 22.
CSS - Introduction to CSS 1. Inline CSS 2. Internal CSS inside head not body 3. External CSS make css file and link to it html css /********** Tag Selectors ***********/ h1 { color: red; font-family: Arial, Helvetica, sans-serif; } img:hover { background-color: gold; } /********** Class Selectors ***********/ .bacon { background-color: red; } .broccoli { background-color: green; } .circular { border-radius: 50%; } /*****.. 2020. 12. 22.
Introduction to HTML The Complete 2020 Web Development Bootcamp The Complete 2020 Web Development Bootcamp Become a full-stack web developer with just one course. HTML, CSS, Javascript, Node, React, MongoDB and more! www.udemy.com Making italic font in html **Recommended: use instead of vs. New developers are often confused at seeing multiple elements that produce similar results. and are a common example, since the.. 2020. 12. 21.