반응형 Web Front/HTML + CSS + 자바스크립트21 [JS] 문서 객체 모델(DOM) Preface 이번 장에선 문서 객체 모델의 정의와 사용법을 공부했다. 자바스크립트의 기본이 되고 가장 중요한 내용이라고 하는데, 생각보다 복잡하고 고민해야 할 부분도 많은 것 같다. 해당 책에 있는 내용만으론 부족한 것 같아 유튜브에서 다른 강의를 조금 더 찾아보려고 한다. 이번 장을 끝으로 해당 책의 내용은 모두 마무리했다. 나름 쉽고 빠르게 웹의 기본적인 내용을 학습한 것 같아 다행이다. 책의 마지막 부분에 웹 페이지 제작하기 프로젝트가 수록되어 있어 이번 글을 업로드한 후 제대로 된 웹 페이지를 만들어 볼 계획이다. 이후엔 생활코딩 사이트에서 깃과 깃허브에 관한 내용을 공부한 후, 개강 전까지 몇몇 사이트를 모방해볼까 한다. → 클론 코딩(clone coding)이라고 한다. 개강 후엔 자바 공부.. 2022. 8. 11. [JS] 자바스크립트와 객체 Preface 이번 장에선 자바스크립트의 내장 객체와 해당 객체들의 프로퍼티와 메서드를 알아봤다. 내용이 많아도 너무 많아서 책을 읽을 때도, 블로그를 쓸 때도 시간이 오래 걸렸다. 웹 쪽을 전문적으로 다룰 생각은 없기 때문에 자바스크립트 역시 모든 내용을 익히고 암기하는 것 보단, 필요한 내용만 그때그때 찾아보는 식으로 사용할 것 같다. 한 가지 궁금한 점은 웹의 특정 요소에 링크를 연결하는 작업처럼 HTML로도 구현할 수 있고, JS로도 구현할 수 있는 작업인 경우엔 어떤 것을 사용하는가에 관한 것이다. HTML과 CSS만으로도 충분한 작업엔 굳이 자바스크립트를 사용할 필요가 없을 것 같은데... 1. 객체 알아보기 - 객체: 프로그램에서 인식할 수 있는 모든 대상 1) 문서 객체 모델(DOM) 2).. 2022. 8. 8. [JS] 함수와 이벤트 (2) Preface 이번 장에선 이벤트란 무엇인지, 이벤트 처리기는 어떻게 사용하는 것인지 알아봤다. 계속해서 DOM을 언급하는 것으로 보아, 뒤쪽의 DOM을 공부한 후 이벤트를 다시 다룰 것 같다. 마무리 문제를 풀 때 딱히 막히는 부분이 없는 것으로 보아 기본적인 문법 구조만 익숙해지면 파이썬처럼 부담 없이 사용할 수 있을 듯하다. 6. 이벤트와 이벤트 처리기 - 이벤트: 웹 브라우저나 사용자가 행하는 어떤 동작 → 웹 문서 영역 안에서 이루어지는 동작만을 말한다. - 마우스 이벤트 종류 설명 click 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다. dbclick 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다. mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발.. 2022. 8. 7. [JS] 함수와 이벤트 (1) Preface 이번 장에선 함수 선언 방법과 let, const를 사용한 변수 선언 방법을 공부했다. 화살표 함수같은 특정 방식을 제외하곤 내가 알고 있던 기존 방식과 비슷해서 딱히 어려운 내용이 없었다. 다만 내용이 너무 많아 두 파트로 나눠서 업로드한다. 1. 함수 알아보기 - 함수: 동작해야 할 목적대로 묶은 명령 - 함수를 선언할 때는 예약어 function을 사용하고, 중괄호 안에 실행할 명령을 넣는다. → 명령이 한 줄이라면 중괄호를 생략할 수 있다. function 함수명() { 명령 } - 함수 호출 방식: 함수명( ) 또는 함수명(변수) - 두 수를 더하는 함수 unction addNumber() { var num1 = 2; var num2 = 3; var sum = num1 + num2.. 2022. 8. 6. [JS] 자바스크립트 기본 문법 Preface 이번 장에선 자바스크립트의 기본 문법을 공부했다. 반복문, 조건문, 연산자 등 대부분의 것들이 다른 프로그래밍 언어의 문법과 비슷해서 한 번 읽어보는 것 만으로 충분히 이해하고 넘어갈 수 있었다. 한 가지 주의깊게 살펴봐야 할 부분은 자바스크립트 코드 안에 HTML 태그를 사용하는 부분인 것 같다. 내가 아직 자바스크립트에 익숙치 않아서 그런지 document.write( ) 함수 안에 태그를 사용하여 코드를 구성하는 것이 어색하고 헷갈린다. 1. 변수 알아보기 - 변수: 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터 - 상수: 값을 한 번 지정하면 바뀌지 않는 데이터 - 변수 선언하는 방법: var 예약어 뒤에 변수 이름을 적는다. → var를 한 번만 쓰고 여러 변수를 .. 2022. 8. 4. [JS] 자바스크립트와 첫 만남 Preface 이번 장에선 자바스크립트란 무엇인지, 이를 통해 어떤 작업을 할 수 있는지 등을 알아봤다. 입출력 방법이나 함수 등에 관한 내용은 뒤에서 더욱 자세히 배울 것 같고, 스타일 가이드는 다른 언어들과 크게 다른 부분이 없어 딱히 적을 내용이 없다. 1. 자바스크립트로 무엇을 할까 - 자바스크립트의 주요 기능 1) 웹의 요소를 제어한다. (웹 사이트 UI 부분에 많이 활용) 2) 웹 어플리케이션을 만든다. 3) 다양한 라이브러리를 사용한다. (리액트, 앵귤러, 뷰, 제이쿼리 등) 4) 서버 개발을 할 수 있다. (Node.js) 2. 웹 브라우저가 자바스크립트를 만났을 때 - 자바스크립트 소스는 3. 자바스크립트 용어와 기본 입출력 방법 - 식(표현식): 연산식뿐만 아니라 실제 값, 함수를 실행.. 2022. 8. 3. [CSS] 반응형 웹과 미디어 쿼리 Preface 이번 장에선 반응형 웹을 만드는 방법을 공부했다. 내용이 워낙 많아 공부할 때도, 블로그를 작성할 때도 시간이 오래 걸렸지만, 내용 자체는 한 번 읽어보면 충분히 이해할 수 있는 내용들이라 어렵지 않게 진도를 나갈 수 있었다. 이번 장을 마지막으로 책에 있는 CSS의 모든 내용을 끝냈는데, 후반부의 내용들은 아직 익숙치 않아 CSS를 사용하여 막힘 없이 원하는 웹 페이지를 제작하려면 시간이 조금 걸릴 것 같다. 주변에서 웹 공부가 프로그래밍 언어나 DB 공부보다 훨씬 재밌다는 이야기를 많이 들었는데, 나는 잘 모르겠다. 확실히 난이도 자체가 쉽긴 하지만, 난 아무래도 백엔드 영역 공부가 훨씬 흥미롭고 재미있는 것 같다. 1. 반응형 웹 알아보기 - 반응형 웹 디자인: 웹 요소를 화면 크기에.. 2022. 8. 3. [CSS] 트랜지션과 애니메이션 Preface 이번 장에선 코드에 변형과 트랜지션, 애니메이션을 적용해 특정 효과가 있는 웹 요소를 정의하는 방법을 공부했다. 이전 내용들에 비해 다소 복잡한 내용들이 많았고, 특히 마우스 오버를 하면 상품 정보를 표시하는 코드가 어려웠다. CSS의 기본적인 내용은 대부분 익혔다고 생각했는데, 책에서 다루지 않은 부분들이 아직 많다는 것을 새삼 느낄 수 있었다. 그러나 어렵고 복잡한 만큼 해당 속성들을 사용하면 웹 요소가 훨씬 고급지고 풍성해져서 보는 맛이 있는 것 같다. 1. 변형 알아보기 - CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 한다. transform: 함수 - 변형의 종류 1) 2차원 변형: 웹 요소를 평면에서 변형한다. → x축은 오른쪽으로 갈수록.. 2022. 8. 1. [CSS] CSS 고급 선택자 Preface 이번 장에선 기존의 선택자 외의 다양한 선택자와 가상 클래스를 공부했다. 이런저런 선택자를 사용해보며 CSS는 사용자의 편의를 위한 부분이 제대로 확립되어 있다는 생각을 했다. 그러나 그 종류가 너무 다양해서 모든 선택자를 암기하고 사용하는 것은 사실상 어려울 것 같고, 사용 빈도가 높은 선택자를 제외하곤 필요할 때마다 찾아서 사용하는 것이 맞는 것 같다. 이번 장에서 배운 내용중에 제일 마음에 드는 선택자는 :hover 가상 클래스 선택자이다. 뭐랄까, 마우스 포인터를 가져갔을 때 메뉴의 배경색이 바뀌는 것만으로도 굉장히 세련된 느낌을 주는 것 같다. 1. 연결 선택자 - 연결 선택자: 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. → 그룹 선택자는 둘 이상.. 2022. 7. 30. [CSS] 이미지와 그라데이션 효과로 배경 꾸미기 Preface 이번 장에선 배경색과 배경 이미지를 지정하는 방법과 그라데이션 효과를 사용하는 방법을 공부했다. 지난 장의 마지막 부분에서 배경 이미지를 사용한 예제를 수정할 때 마음대로 되지 않는 부분이 있었는데, background 속성을 배운 후 다시 보니 쉽게 문제를 해결할 수 있었다. 아, 그리고 같이 공부하는 친구와 블로그 스킨에 대해 이야기하던 도중 며칠 전 공부한 웹 폰트가 생각나 친구의 블로그 헤더 부분의 글씨체를 바꿔줬다. 1. 배경색과 배경 범위 지정하기 - background-color 속성: 배경색을 지정한다. → 상속되지 않는다. - background-clip: 배경색의 적용 범위를 조절한다. 1) border-box: 박스 모델의 가장 외곽인 테두리까지 적용한다. (기본값) 2.. 2022. 7. 28. 이전 1 2 3 다음
