본문 바로가기

분류 전체보기267

Intermediate CSS - PART II (Media Query Breakpoints, Refactoring, Selectors) Media Query Breakpoints This is CSS native functionality. Structure: @media This code means that under the condition that max-width is 900px or less apply "h1" color to be "red" by overriding existing color of "h1". Hello World @media (max-width: 900px){ h1 { color: red; } } Also multiple conditions can be applied like this. @media (min-width: 900px) and (max-width: 1000px) { h1 { color: red; } .. 2020. 12. 26.
CSS position: Relative VS. Absolute Currently not clear in my head. 1. Get definition from docs The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. position property를 사용한다면 top, right, bottom, left에 의해 position이 사용된 element의 최종 위치가 결정. --- Position property의 value: static(default), relative, absolute, fixed, stic.. 2020. 12. 25.
Intermediate CSS - PART I multi curcor in VSCODE ctrl + alt + up/down 1. Carousel ( kind of slideshow) I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof. Pebbles, New York My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think. Beverly, Illinois Previous Next /* Testimonials */ #testimonials { text-align: center; background-color: #ef81.. 2020. 12. 25.
Introduction to Bootstrap - PART III 1. Responsive div Meet new and interesting dogs nearby. Download Download Trouble shooting - CSS style order [ Problem ] Can't change the font-weight by applying google fonts stackoverflow.com/questions/38153600/why-is-google-font-weight-not-working/38153695 Why is google font weight not working? I'm trying to change h1 to font-weight: 300. Except when I did: .h1{ font-weight: 300; } Nothing hap.. 2020. 12. 24.
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.

티스토리툴바