본문 바로가기

전체 글153

[CSS] block elements 인데 옆에 오는 이유 + nth-child와 nth-of-type 차이점 block elements인데 inline elements처럼 옆에 오는 이유는? 예전 클론코딩 과제를 하면서 생긴 의문점나는 분명 block 요소인 h1, header를 사용했는데 왜 또 다른 블록 요소인 div의 옆으로 배치되는 건지 이해가 안 됐었다분명 둘 다 블록요소니까 다른 줄에 배치되어야 하는 거 아닌가? 그래서 검색을 해보니까 display:flex; 를 주면 flex 아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼 차지하게 된다고 한다.즉 Body안에 display flex 속성값을 주면 그 안의 블록이 모두 inline-block처럼 변한다처음에 flex 요소의 특징을 잘 몰라서 고민 끝에 제목이 있는 header를 position:absolute; 그리고 top의 값.. 2021. 6. 19.
[드림코딩]자바스크립트 기초 정리 ④ 클래스 오브젝트 차이점 (class vs object) , 객체지향 언어 클래스 정리 class 클래스란? class person { name; age; speak(); } : 자바스크립트의 class란 관련 있는 변수나 함수를 묶어놓은 것으로 위의 코드를 통해 이해할 수 있는 건 name, age 같은 속성 (field)와 speak 같은 행동 (method)가 존재한다. 반면 필드는 있지만 메소드가 없는 경우도 많은데 이는 data class 데이터클래스라 부른다. 여기서 class는 붕어빵을 만들 수 있는 틀이라고 생각하면 이해하기 쉽다 이 class 자체에는 데이터는 존재하지 않고 틀만 정하는 것이다. (그러고보니 학점은행제에서 배우는 객체지향 프로그래밍 언어에서도 class와 object 설명을 해줄 때 다들 붕어빵 틀에 비유해서 설명해줬다. 비유가 찰떡이라 그런가 보다,,!) .. 2021. 6. 18.
[드림코딩]자바스크립트 기초 정리 ③ 함수선언과 함수표현, Arrow Function 사용방법 function 함수의 정의 및 기능? function 함수는 sub-program이라고도 불린다. 프로그램 안에서 각각의 작은 단위의 기능들을 수행한다. 프로그램을 구성하는 매우 기본적인 블록이다. 함수는 여러 번 재사용이 가능하다 한 가지의 일 (하나의 함수엔 하나의 기능을!) 또는 어떤 것을 계산할 때 사용한다. 이름을 정하는 네이밍은 동사 형식으로 지정한다 (함수명을 보고 어떤 동작을 하는 함수인지 알 수 있게끔) 자바스크립트에서 함수는 오브젝트이다 Input(parameters)를 받아서 Output(return)하는 것이 함수이다. API를 사용할 때 함수의 이름을 보고 대충 '이러한 동작을 하겠구나'라고 유추할 수 있고, 전달해야 하는 parameter의 값은 무엇인지, 어떠한 값이 리턴되길.. 2021. 6. 17.
[드림코딩]자바스크립트 기초 정리 ② var let const 변수 차이점 , 호이스팅과 블럭스코프란? var, let, const의 차이점을 설명하기에 앞서 여기서 나올 기본개념을 정리해보자면, 우선 자바스크립트의 데이터 타입은 크게 두 가지로 분류가 가능하다 계속 변경이 가능한 Mutable 데이터 타입과, 변경이 불가능한 Immutable 데이터 타입이 존재한다. 이 두 가지의 예시는 밑에서 더 자세히 정리해보겠다 위의 그림을 조금씩 참고해가며 var, let, const에 대해 이해하자 Var ? 요즘엔 var를 사용하는 추세는 아니지만 (아직 현업에서 사용하는 곳도 있긴 하다고 들었다) 왜 사용하지 않는지, ES6부터 새로 나온 let, const와 다른 점은 무엇인지 알아볼 필요가 있다. var의 가장 큰 차이점은 변수의 재선언 var age = 1이라고 작성 후, 밑에서 var age = 2라.. 2021. 6. 16.
[드림코딩]자바스크립트 기초 정리 ① operator, if, for loop 처음 자바스크립트 독학하면서 알게 된 유튜버 드림코딩 엘리님의 강의. 기초까진 괜찮았다가 함수들이 점점 나오면서 이해가 아예 되지 않아서 멘붕의 연속이었다 그래서 같은 강의를 거의 5번 넘게 돌려보고, 그래도 이해가 안 되는 부분은 책을 읽어가며 이해했다. 내 머리가 좋지 않다는 건 알고 있었지만 이렇게까지 심각했나? 싶을 정도였는데, 강의 밑의 댓글들을 보니 동지들이 많았다 ^^.. 절대 혼자만 헤매고 있는 게 아니니 자바스크립트에서 너무 좌절하지 않도록! 프런트엔드의 경우 HTML, CSS는 비교적 쉽게 접근이 가능하여 (이 둘은 프로그래밍 언어가 아니다.) 프런트엔드를 만만하게 볼 수 있지만 자바스크립트를 맞닥뜨리는 순간, 이 분야에 쉽게 얻을 수 있는 건 없다고 느낄 것이다.. 나는 정말 뼈저리게.. 2021. 6. 15.
script 로딩방법 - async와 defer의 차이와 장단점 html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재한다. 오늘은 상황에 따라서 어떻게 script를 불러와야 효율적인지 각각의 방법과 그 특징에 대해서 알아보자! 1. 에 를 별다른 조건 없이 넣는 경우 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자체를 막아버리기 때문에 (자바스크립트의 기본 옵션은? 동기처리이다! ) 스크립트에서 DOM 요소에 접근이 불가능해진다. 실행 흐름을 보면, 브라우저가 html 문서를 위에서부터 아래로 쭉 읽는데 여기서 script를 만나면 바로 script 안의 내용을 한 줄 한 줄 해석하기 시작한다. 하지만 .. 2021. 6. 14.
반응형

티스토리툴바