부스트코스13 네이버 부스트코스 JS Javascript 객체 객체 객체는 함수 위에서 존재한다. 서로 연관된 함수와 변수의 수가 많아지고 복잡해지면 객체를 통해서 정리할 수 있는 것이다. 객체는 폴더라고 생각하면 쉬운데 비슷한 것들끼리 그룹으로 묶어주는 것이다. document.querySelector('body'); 여기서 document가 객체의 역할을 한다. 함수인 querySelector를 한 그룹에 묶어주는 것이다. 이때 객체 안에 들어가는 함수를 메소드라 부른다. 객체의 쓰기와 읽기 배열의 경우 순서대로 가져오는 특징이 있었다. 하지만 객체의 경우 순서 없이 저장한다. 대신 각각의 이름이 붙어있어 이를 이용해 값을 꺼낼 수 있다. var animals = { "dog":"웰시코기", "bird":"까치" }; 대괄호를 사용했던 배열과 달리 객체의 경우 .. 2021. 3. 28. 네이버 부스트코스 JS Javascript 함수 함수 하나의 긴 태그 안에 수정해야 할 사항이 있을 때 함수를 이용하면 훨씬 쉽게 수정할 수 있다. function 함수 이름() { 이렇게 적어주면 함수가 설정이 되고 onclick부분에 함수이름을 적으면 완성. 반복해야 할 경우를 생각해보자. document.write('강아지' ); document.write('기러기'); document.write('까치'); document.write('고양이'); 여기서 기러기와 까치를 반복하고 싶다. 전 시간에 배웠던 반복문을 사용하면 된다. 하지만 기러기와 까치가 중구난방으로 있는 경우에는 반복문 처리를 하면 굉장히 지저분해질 텐데 이럴 때는 어떻게 해야 할까? 바로 함수를 사용하면 된다. function bird(){ document.write('기러기'.. 2021. 3. 27. 네이버 부스트코스 JS Javascript 제어문 프로그래밍 js는 프로그래밍 언어이다. 프로그램은 순서라는 뜻이다. 프로그래밍이란 순서를 만드는 행위를 말한다. 즉, 프로그래밍 언어란 시간에 순서에 따라서 실행되어야 할 행위가 있고 이를 글로 표현한 것을 말한다. 이것을 컴퓨터가 읽고 실행하는 것이다. html은 정적이라 한 번 만들어지면 변하지 않는다. 따라서 프로그래밍 언어가 아니다. 하지만 js의 경우 동적이고 사용자와 상호작용하기에 프로그래밍 언어라 부를 수 있는 것이다. 조건문이란? 조건문이란 조건에 따라 다른 기능들이 다른 순서에 따라 실행되도록 만드는 것이다. if/else를 이용해 조건문을 생성할 수 있다. 비교 연산자와 불리언 js에서 가장 많이 쓰이는 비교 연산자는 ===이다. 왼쪽과 오른쪽이 동등한 지 물어보는 연산자이다. 이때 결.. 2021. 3. 27. 네이버 부스트코스 JS 웹과 Javascript Javascript란? Javascript는 웹 페이지를 동적으로 만들어준다. 뼈대를 html로 만들어도 정적이라 단편적인데 js를 이용하면 사용자와 상호작용할 수 있다. 대표적인 예로는 야간모드가 있다. js를 이용해 뒷 배경을 검은색으로 글씨는 하얀색으로 바꾸는 야간모드를 설정할 수 있다. 사용자와 상호작용하는 대표적인 예라 할 수 있다. Javascript와 html Javascript는 html과 어떻게 같이 쓰일까? 다른 언어라 따로 쓰일 줄 알았는데 html의 안에 작성할 수 있었다. style 태그를 이용해 html의 head에 들어갔던 css와 비슷하게 Javascript는 script 태그를 이용해 html의 body에 작성된다. html과 Javascript은 겉보기에는 똑같이 출력된다.. 2021. 3. 27. 네이버 부스트코스 CSS 미디어쿼리 미디어 쿼리 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만든다. 점점 웹이 발전함에 따라 다양한 매체에 대응해야 했기에 미디어 쿼리를 사용하게 된다. 컴퓨터, 태블릿, 스마트 폰 등 매체에 따라 반응형 웹이 존재하는데 미디어 쿼리를 이용해 제작할 수 있다. 미디어 쿼리를 실행하기 위해서는 @media 미디어쿼리구문 {} 방식으로 적어주어야 한다. 미디어 쿼리를 나누어보면 미디어 타입과 미디어 특성이 있다. 둘 다 많은 내용이 있지만 가장 많이 쓰이는 것만 알아보자. 미디어 타입에서 알아두어야 할 속성은 all, print, screen 정도이다. 그 중에서도 screen이 대부분이다. 화면 출력하는 디스플레이가 있는 미디어들은 거의 screen이기 때문이다. 미디어 속성에서 알아두어야 할 속성은 .. 2021. 3. 23. 네이버 부스트코스 CSS 레이아웃 display 요소의 박스 유형을 결정한다. 속성 값에는 none, inline, block, inline-block이 있는데 각 이름대로 렌더링 된다. inline과 inline-block의 경우 하나씩 더해줄 때마다 옆으로 늘어나는데 block은 행 전체를 자치하기에 밑으로 늘어난다. 그리고 inline과 inline-block은 개행에 영향을 받으므로 개행 시 옆의 요소와 4px 가량의 여백이 생긴다. display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ 출처: www.boostcourse.org/cs120/lecture/92936?isDesc=false vi.. 2021. 3. 22. 이전 1 2 3 다음
