Definition of Seon

DOM DOM이란 Document Object Model의 약자입니다. DOM은 텍스트나 html 요소, css 스타일을 바꿀 수 있게 해줍니다. 돔 트리 구조를 보면 가장 위에 document가 있고 그 아래 root 요소인 html이 있습니다. 아래에는 head와 body로 나눌 수 있고 그 아래에도 작은 요소들이 있습니다. DOM은 자바스크립트라고 할 수는 없지만 웹 API의 하나입니다. web api와 자바스크립트는 서로 상호작용할 수 있기 때문에 자바스크립트에서 DOM을 사용할 수 있습니다. DOM으로 선택하는 방법 document.querySelector('.message').textContent querySelector 안에 클래스명을 넣어주고 textContent를 쓰면 해당 클래스의 텍스..

CSS 기본 설정 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #777; } 마진과 패딩을 0으로 설정하고 박스사이징을 보더박스로 설정합니다. 보더박스로 설정해야 너비와 높이를 잴 때 테두리가 포함되지 않습니다. 그리고 바디 안의 모든 하위요소에 상속이 되도록 글꼴과 두께, 크기, 줄간격, 색상을 설정합니다. 이렇게 설정해두고 시작해야 이후 CSS 코드를 입력하기 좋습니다.

vscode에서 꼭 설치해야 하는 확장 프로그램이 있습니다. 그건 바로 prettier! 이름 그대로 코드를 더 예쁘게 만들어주는 프로그램입니다. 프리티어 설치 뒤에는 2가지를 수정해주어야 합니다. vscode 설정에 들어가봅시다. 1. Default Formatter 아래 목록 중에서 prettier을 골라주세요. 2. Format on Save 저장할 때마다 포맷이 바뀌도록 체크해주세요. 이 두 가지를 해두면 코딩을 할 때 더 편리하게 쓸 수 있답니다~

Object 개체 배열에서는 요소들에 이름을 줄 수 없고 순서로만 구분할 수 있습니다. 개체에서는 각각의 요소에 이름을 줄 수 있습니다. const kim = { firstName: 'Jay' lastName: 'Kim', age: 2037 - 1991, job: 'teacher', friends: ['Peter', 'Steven'] 배열과 달리 개체는 중괄호를 사용하며 키와 값이 있습니다. 개체에서 원하는 값을 가져올 때는 배열이름.키 를 입력하거나 배열이름['키']를 입력해야 합니다. 대괄호를 사용한 표기법의 경우 식을 넣을 수 있습니다. console.log(kim.lastName); console.log(kim['lastName']); 개체는 값이므로 그 안에 함수를 추가할 수 있습니다. 함수를 ..

Strict mode 'use strict' 를 가장 윗줄에 쓰면 엄격한 모드가 적용됩니다. 엄격한 모드를 실행하면 특정 작업을 금지시키고 눈에 보이는 오류를 알려줍니다. Function 함수 function 함수이름() { ~~~~~; } 함수이름(); 함수에는 매개변수가 있습니다. 함수 이름 뒤에 매개변수를 추가하여 이용할 수 있습니다. 나중에 함수를 불러올 때 매개변수를 입력하면 해당하는 매개변수가 위치한 함수 내 코드를 실행할 때 적용이 됩니다. 함수에서 어떤 내용을 출력할 때는 return 을 활용할 수 있습니다. 함수 표현식 const age = function (birthYear) { reuturn 2037 - birthYear; } 함수 선언 외에도 함수 표현식을 사용할 수 있습니다. 표현..

문자열과 템플릿 리터럴 문자열에 변수를 추가할 수 있습니다. 그러나 문자열의 구조를 파악하기가 쉽지 않습니다. const name = "I'm" + firstName + ', a' + (year - birthYear) + 'years old ' + job + '!'; 이를 해결하기 위한 방법이 템플릿 리터럴입니다. const name = `I'm ${firstName}, a ${year - birthYear} years old ${job}!`; 키보드의 1 옆에 있는 ` 배틱과 달러 표시를 사용하여 표현할 수 있습니다. (파이썬의 f스트링 같은 역할입니다.) 템플릿 리터럴을 활용하면 다중라인 문자열을 사용할 수 있습니다. 즉, 여러 줄을 편리하게 입력할 수 있습니다. 조건문 If / Else if ( 조..

자바스크립트란? 자바스크립트는 하이레벨의 객체지향, 다중패러다임의 프로그래밍 언어입니다. 프로그래밍 언어는 컴퓨터에 지시를 내리는 언어입니다. 하이레벨이란 우리가 복잡한 부분을 고려할 필요가 없다는 것, 객체지향이란 객체를 기반으로 하여 사용하는 언어라는 것, 멀티 패러다임은 다른 종류의 프로그래밍을 할 수 있다는 것입니다. HTML과 CSS로 내용과 디자인을 마치고 웹앱을 만들기 위해 사용하는 프로그래밍 언어입니다. 우리는 자바스크립트를 이용하여 프론트엔드의 역할인 동적인 효과와 웹앱을 만들 수 있습니다. 리액트, 엥귤러, 뷰 같은 라이브러리를 활용하기 위해 자바스크립트 실력을 키워두는 것이 좋습니다. 그리고 자바스크립트로 웹 서버, 백엔드의 역할을 하기 위해 노드를 사용할 수 있습니다. 또한 자바스크..

개인 프로젝트를 시작하려고보니 클론코딩을 하지 않는 이상 디자인이 필수라고 느꼈다. 평소 디자인에는 관심이 많았는데 피그마를 이용해본 적은 없었다. 강의를 듣기보다는 일단 무작정 만져보기 시작! 피그마에 로그인하고 간단한 튜토리얼을 지나가면 이런 화면이 나온다. 인터넷을 찾다보니 unsplash 플러그인을 설치하는 걸 추천하는 글이 보였다. 이곳에 unsplash를 검색하면 무료 사진을 사용할 수 있는 플러그인이 설치된다. 원하는 이미지를 검색하면 바로 다운로드가 되어 아주 편할 것 같다. 개인 프로젝트로 쇼핑몰 만들기를 진행해볼 생각인데 중학생 때부터 좋아했던 펜을 소재로 사이트를 만들어보려고 한다. 자세한 이야기는 프로젝트 게시물로.. 좋아하는 쇼핑몰 여러곳을 참고해 메인페이지 디자인을 마쳤다. 쇼핑..

Do it! HTML5 + CSS 03장 복습 1. 이미지 웹에서 사용할 수 있는 이미지 파일 형식 : GIF, JPG/JPEG, PNG href 속성 : 링크 문서 또는 주소 입력 target 속성 : 표시될 위치 -> (기본)현재 창_self 새창 _blank 부모 프레임에 표시 _parent 프레임 벗어나 전체 화면에 표시 _top download 속성 : 링크 내용 다운로드 rel : 현재 문서와 링크 문서의 관계 hreflang : 링크 문서 언어 지정 type : 링크 문서 파일 유형 닫기 전에 넣으면 이미지 링크를 만들 수 있음 앵커 : 한 페이지 내에서 한 번에 그 위치로 이동 텍스트 또는 이미지 -> 이동하고 싶은 위치에 텍스트 또는 이미지 -> 앵커 하나의 이미지에 여러 링크 걸기 (설..

Do it! HTML5 + CSS 02장 복습 1. 텍스트를 덩어리로 묶어 주는 태그 제목 표시 heading 단락 paragraph 줄 바꿈 break 수평 줄 horizontal 인용문 (들여쓰기) - cite 속성으로 인용 사이트 주소 표시 가능 입력 그대로 표시 preformat (공백 포함, 그러나 해당 부분은 소리로 읽히지 않아 접근성 떨어짐) 2. 텍스트를 한 줄로 표시하는 태그 굵게(강조) 굵게 bold 이탤릭체(강조) emphasis 이탤릭체 italic 인용 내용 표시 qoute (줄바꿈 없음, 따옴표로 표시됨) 형광펜 줄바꿈 없이 영역 묶기 (일부 텍스트 스타일 적용) 블록 단위 묶기(단락 통째로) 동아시아 글자 표시 취소선 strikethrough 밑줄 underline 3. 목록을..