코코아톡클론
코코아톡 클론코딩 중! 메모!
Reset CSS - 리셋 CSS는 CSS 파일이다. 브라우저에 기본적으로 적용되어 있는 스타일을 초기화 해준다. - 먼저 브라우저 스타일을 없애고, 직접 디자인 하는게 더 좋은 방법이다. - styles.css에서 작성한 한 부분도 따로 css파일을 만들어 분리해주는 것이 깔끔하게 작업할 수 있는 방법이다. → CSS 코드를 여러 파일로 분할했다가 다시 합친다. 기타 - 모든 input에 focus를 없앨 것이기 때문에, reset.css에 input:focus{ outline: none; }을 적용한다. - 어떤 css파일이건 styles.css에 적용시키고 싶다면, 반드시 import를 해줘야 한다. - 가상 클래스 선택자(pseudo element) - :not()→ 뭔가가 적용되는 걸 원하지 않..
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..