전체 글
코코아톡 클론코딩 중! 메모!
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..
[신년운세코딩패키지 힙한 취미코딩 이벤트] 2일차 개발일지
본 페이지와 결과 페이지를 연결하는 방법 아까, #대신 a태그에 href="--.html" 연결하고 싶은 페이지를 넣는다. 쥐 태그 - Enter키와 같은 역할 즉, 바로 줄바꿈을 해준다. 마음을 알아주는 따뜻한 사람을 만날 것이야! 일이 잘 안 풀리는 것 같아도 연말에는 호탕하게 웃을 수 있을 지어니 너무 걱정하지 말고 하루하루 잘 나아가봐~ 줄간 간격 을 나타내주는 CSS line-height 결과물 https://new-year.spartacodingclub.kr/oxfm1UEzpaTA/index.html 느낀 점 지금, html, css, js강의 다른 강의를 듣고 있어서인지 간단한 javascript맛보기할 때 뒤로가기와 공유하기 클릭을 위한 코드스니펫 주는 거라서 조금 아쉬웠다. 아마 이 강의..
[신년운세코딩패키지 힙한 취미코딩 이벤트] 1주차 개발일지
2021년 신년운세 by 르탄, 믿거나 말거나~ 쥐 소 호랑이 토끼 용 뱀 말 양 원숭이 닭 개 돼지 이 중에서 이미 알고있는 것을 제외하고 정리를 해주면, 기억해야 할 것은 1. a태그에 갈곳이 없을 경우, # 붙여준다. 2. 그림자를 넣고 싶다. box-shadow 이용한다. box-shadow: 0px 0px 10px 0px darkred; 3. margin 값을 동등하게 하고 싶다. margin: auto; 4. 백그라운드 이미지를 넣고 싶다. background-image / background-size / background-position background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png'); backg..
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 생활화하자!!!