디노문경

https://www.youtube.com/watch?v=JaMCxVWtW58&t=100s 위의 영상을 보고 정리한 내용입니다. 마크업 css는 bootstrap과 fontawesome을 사용해줍니다. MyBookList Title Author ISBN# Title Author ISBN# JavaScript 위의 영상에서는 객체 지향으로 자바스크립트 코드를 짰다. 먼저, 여러 개의 Book을 만들 수 있도록 Book class를 만든다. // Book Class: Represents a Book class Book { constructor(title, author, isbn) { this.title = title; this.author = author; this.isbn = isbn; } } 그리고 UI..

자바스크립트란 무엇인가? 1. 자바스크립트는 C, C++과 반대로 High level의 언어이고, 컴파일언어가 아닌 인터프리터 언어이다. * High level의 언어: 기계와 멀다. (느리다.) * 인터프리터 언어: 프로그램이 실행되는 순간 한 줄씩 해석하며 실행한다. 2. JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다. * ECMAScript: javascript를 표준화하기 위해 만들어짐. * JavaScript와 ECMAScript의 차이 https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html JavaScript와 ECMAScript는 무슨 ..

이 글은 리베하얀님의 유튜브 강의 "CSS3 기초"를 보고 정리한 글입니다. animation transition vs animation transition은 이벤트가 반드시 있어야 실행되지만, animation은 이벤트가 없이 스스로도 실행될 수 있다. 먼저, keyframes를 만들어주고, 애니메이션을 실행시키고 싶은 요소 안에 animation을 넣어준다. animation: 키프레임명 실행시간 time-function 딜레이 반복횟수 이동방향 flex flex 해버렸지 모얌..? 진짜 완전 편하다..... 대박!! 부모 요소에 display:flex를 주고, 자식 요소에 flex: 1을 주면, 모두 같은 너비로 사이좋게 나눠가진다. float을 써서 하면 부모 요소 높이 사라지니까, clear도 ..

이 글은 리베하얀님의 유튜브 강의 "CSS3 기초"를 보고 정리한 글입니다. border-radius 1. 정사각형에서 한 변의 길이와 같은 값을 border-radius 주면 원이 된다. 2. 둥그스름한 버튼을 만드려면 높이와 같은 값의 radius를 주면된다. 예를 들어, 아래와 같은..! 3. 2개의 값을 주면 border에서는 상하 좌우였지만 border-radius는 11,5시 1,7시 방향을 의미한다. 3개의 값을 주면 11시 1,7시 5시이고 4개의 값을 주면 11시부터 시계방향! 4. border-top-left-radius와 같이 사용해서 한 방향에만 radius를 줄 수도 있다. outline과 outline-offset 1. outline은 border와 비슷한 데 border보다 바..

이 글은 리베하얀님의 유튜브 강의 "CSS1, CSS2기초" 를 듣고 정리한 글입니다. 우선순위 전체 선택자(*): 0점 요소 선택자: 1점 클래스 선택자: 10점 id 선택자: 100점 inline style: 1000점 !important: 절대값 (사용법: div { color: red !important } 만약 점수가 같다면 나중에 적은 것의 우선순위가 더 높다. 여백 (padding과 margin) border를 기준으로 안쪽 여백 -> padding 바깥쪽 여백 -> margin div { padding: 4px 8px } 상하 4px, 좌우 8px div { padding: 4px 6px 8px } 상 4px, 좌우 6px, 하 8px div { padding: 1px 2px 3px 4px..

이 글은 리베하얀님의 유튜브 강의 "HTML4 기초"와 "HTML5 기초"를 보고 정리한 것입니다. 특징 1. 현재 위치에 대한 정보를 알려준다. 2. 화면 낭독기가 가장 먼저 읽어주는 요소이다. 팁 * 페이지 마다 title이 따로 있는 것이 좋다(페이지를 이동할 때마다 title 변하도록) * 사이트명 - 현재 위치보다는 현재 위치 - 사이트명이 사용자 입장에서 더 편하다. (탭이 많을수록) 네이버는 사이트명 현재 위치로 되어있고 카카오는 현재위치 | 사이트명으로 되어있다. 특징 1. 제목 (+블록 요소) 2. 인라인 요소와 텍스트만 표현할 수 있다. 3. 계층구조를 준수해야 한다. (h1 -> h2 ->... -> h6 순서대로!) 4. h1요소는 한 페이지에 한 번만 제공해야 한다. 5. 굵은 글..

오늘은 뭐하지~~ 심심해하면서 유튜브를 보다가 Serendipity~~! 조코딩님이 Google을 따라서 간단하게 만드는 것을 보고 해보기로 결정! via GIPHY 먼저 결과물을 보시죠! 유튜브에 조코딩님의 영상이 있어서 코드까지는 설명하지 않겠습니다.ㅎㅎ 궁금하신 분들은 유튜브에 조코딩 검색해보세요. 정말 잘 설명해주시구 다른 좋은 영상들도 많아요 :) https://www.youtube.com/channel/UCQNE2JmbasNYbjGAcuBiRRg 그리고 더 신기하고 재밌는 건 Moogle의 검색창에 검색어를 쓰고 Enter를 눌러도 Google이랑 똑같이 검색이 된답니다!! 재밌지 않나요??ㅎㅎ 그럼 안녕~~ by Serendipity