개발언어

SVG 이미지 파일 형식.

SVG 는 픽셀이 없는 이미지 파일형식. 수학으로만 구성된 형식. 아이콘 추가 방법 2가지종류 - 직접 이미지 아이콘 추가 - SVG SVG방법 - Heroicons [Heroicons - Free Open Source SVG Icon Library] https://heroicons.com/ - Fontawesome [Font Awesome] https://fontawesome.com/ Sizing Icons 문서를 보려면 여기! https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons - 스크립트는 body 태그 닫기 직전에 위치시킴

BEM 규칙

- BEM(Block Element Modifier)은 좀 더 쉽게 읽히는 CSS를 가지는 것이다. - CSS를 작성할 때 id였는지 class였는지 헷갈릴 때가 많다. → 때문에 element앞에 "온점(.)"을 붙인다. - BEM에서 문제가 하나 생긴다면, 그것은 class가 엄청 커질 수 있다는 것이다. - BEM을 싫어하는 사람도 있으며, 그냥 id와 class를 섞어 쓰는 사람들도 있다. - 두 가지 방법 모두 쓰이기 때문에, 본인이 더 맞는 방법을 사용하면 된다. BEM(Block Element Modifier) —추천 규칙 - block : .btn {} - elements : .btn__price {} - modifiers : .btn--big {} 단점 : 클래스 선언 종류가 많아서 코드..

고급 CSS ( Transition, Transformation, Animation, Media query)

Transition ▶ CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것 state가 없는 요소이며, 처음 생겨난 곳 즉, 원래 element에 속해야 한다. ★ State에 따라 바뀌는 property를 갖고 있으면 사용한다. ★ 방법 1. 지정된 한 요소만 바꾸고 싶을 경우. a { color: wheat; background-color: tomato; transition: background-color 10s ease-in-out, color 5s ease-in-out; } a:hover { color: tomato; background-color: wheat; } 방법 2. 모두 요소들을 다 포함하고 싶을 경우. a { color: w..

CSS 살펴보기

CSS (margin, padding, flex) margin: 경계의 '바깥'에 있는 공간 padding: 경계의 '안쪽'에 있는 공간 - span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다. - 하지만 padding은 사방에 가질 수 있다. - 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다. id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다. - 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다 CSS Flex 에 대해서 알아보기 좋은 자료 https://studiomeal.c..

HTML 간단히 살펴보기

Website The Nico Times 123 Road Altavista © 2020 N.C HTML Element MDN https://developer.mozilla.org/ko/docs/Web/HTML/Element 생활화하자!!!

HTML, CSS (feat.JavaScript) 에 대해서 간단하게 알아보자.

웹사이트는 브라우저가 text파일을 이해하여 구현해 준다. 그래서 코드로 감싸진 text들로 이뤄져 있다. HTML은 Markup launguage, / 브라우저에게 웹사이트에 어떤 contents가 있는지를 알려주는 역할이자 뼈대. CSS는 Design, Style launguage, / 브라우저에게 contents이 어떻게 보여야하는지를 알려주는 역할이자 근육. Javascript만 Programming language, / 웹사이트를 동적으로(interactively) 만들어주는 역할이자 뇌. CSS 만으로 웹사이트 NO! HTML만으로 웹사이트 Sososo.... HTML과 CSS는 together! JavaScript는 sometimes use. #contents : text, image, ti..

Weather날씨 만들기

navigator.geolocation.getCurrentPosition(success, error) Step 1. 사용자의 위치를 알아본다. (현재 위치의 위도와 경도) function onGeoOk(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."); } // 사용자의 현재 위치를 요청한다. navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); function onGeoOk(position) { const lat = position.coords.latitude; const lon = position.coor..

To Do List 만들기

기본 세팅 const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector(" #todo-form input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event.preventDefault(); // input의 현재 value를 새로운 변수에 복사하는 것. const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit", handleToDoSubmit); ToDo 추가하기 co..