본문 바로가기

Web Dev17

Advanced Javascript and DOM Manipulation - Drum kit addEventListener() The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, Document, and Window, but the target may be any object that supports events (such as XMLHttpRequest). addEventListener() works by adding a function or an object that implements EventListener to the list of event l.. 2021. 1. 6.
Dicee var randomNumber1 = Math.floor(Math.random() * 6) + 1; var randomImageSource = "images/dice" + randomNumber1 + ".png"; var image1 = document.querySelectorAll("img")[0] var image2 = document.querySelectorAll("img")[1] image1.setAttribute("src", randomImageSource) // Image 1 var randomNumber1 = Math.floor(Math.random() * 6) + 1; var randomImageSource = "images/dice" + randomNumber1 + ".png"; var i.. 2021. 1. 5.
The Document Object Model (DOM) Inline, Internal, and External JS Inline JS By applying inline js, a problem occurs about quotation marks. To fix this, we have to use different quotation marks that are single and double. Like this. * Recommend: Avoid inline JS, Like CSS. Internal JS External JS Unlike css, js script needs to be inside of body tag. If the css link located at the below js link, then alert pops up and show css st.. 2021. 1. 3.
Intermediate Javascript Comparator and Equality Three equal signs ("===") is also checking the datatypes are matching.(more strict) Two equal signs doesn't care about the data types. && : AND II : OR function bmiCalculator (weight, height) { var interpretation =weight/(height*height); if(interpretation=18.5)&&(interpretation24.9){ return("Your BMI is "+ interpretation+", so you are overweight."); } } Finish a line with.. 2021. 1. 2.
Intermediate CSS - PART III (Refactoring II, Selector Priority) Refactoring Give colored-section to each section And remove css with the same stylings. Selector Priority inline styles are more specific than internal or external CSS styles. As you can see, inline style overrides external CSS. h1 element VS. class VS. Id Id style overrides all the other styles. Even though I changed the order of class and id, id style overrides all since it's more specific. Ti.. 2020. 12. 27.
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.

티스토리툴바