이다닷

HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 속성이 position 속성이다. position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소를 배치할 수 있다. position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다. position: static - 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute - 절대 좌표와 함께 위치를 지정할 수 있다. relative - 원래 있던 위치를 기준으로 좌표를 지정한다. fixed - 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다. inherit - 부모 태그의 속성값을 상속받..

웹 페이지에서 사용하는 margin(마진)과 padding(패딩)은 여백 공간을 의미한다. margin과 padding을 잘 활용하면 웹 페이지에서 원하는 공간에 콘텐츠를 삽입할 수 있게 된다. - 웹 페이지에 요소를 삽입하면 다음과 같은 구성을 보이게된다. - 콘텐츠가 있고, 그 밖을 padding이, 콘텐츠의 테두리 와 다른 요소와의 공백은 margin 영역이라고 한다. margin(마진) margin(마진)은 현재 요소 주변의 여백 공간을 의미한다. margin을 조절하면 현재 요소와 다른 요소간의 공간을 조절할 수 있다. margin 속성 margin: 사방의 마진 영역을 조절한다. margin-top: 상단 마진 영역을 조절한다. margin-bottom: 하단 마진 영역을 조절한다. margi..

ECMAScript란? ESMAScript는 넷스케이프(현재는 파이어폭스) 웹페이지에 동적인 요소를 구현하기 위해서 발명되었다. 그 후 넷스케이프 뿐만 아니라 다른 웹 브라우저들까지 이를 탑재하기 시작했고, 다양한 웹 브라우저들에서 JavaScript가 공통되게 잘 작동되기 위해서는 표준 규격의 필요성이 커졌다. -> 이러한 이유로 ECMAScript standard라는 스크립트 표준을 만들었다 ECMAScript가 포함하는 항목이다. 언어 구문 오류 처리 방법 자료형 전역 객체 프로토타입 기반 상속 구조 내장 객체 및 함수 엄격 모드 ES6란? ES6(ECMAScript)는 2015년에 도입된 최신 버전의 JavaScript이다. ES6가 발명되면서 이전에 있던 문제들이 사라졌다. 호이스팅이 사라진 것..

HTML4와 HTML5의 차이점은 쉽게말하자면 상위버전과 하위버전으로 볼 수 있다. 대체적으로 문법적으로 다양한 요소들의 표현이 간결해졌다. 1. DOCTYPE HTML4에서는 유효성 검사를 위한 선언문이 굉장히 길었지만 HTML5에서는 훨씬 간결해진 것을 볼 수 있다. 2. Encoding HTML4에 비해서 HTML5에서는 인코딩 규칙에 대한 명세가 간단해졌다. 3. 시멘틱 태그 HTML4에 비해서 HTML5는 시멘틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다. Element 설명 header 해당 섹션의 가장 윗부분에 위치하는 태그 main 문서의 주된 컨텐츠를 표시하는 태그 nav 네비게이션의 약자로 일반적으로 상단바 등 사이트를 안내하는 태그 section 문서의 영역을 구성하는데 사용하는..

우선, Sass(SCSS)에 대해서 본격적으로 설명하기에 앞서, Sass(SCSS)가 왜 생겼는지를 살펴보자. 그러기 위해서는 CSS에 대해서 먼저 알아볼 필요가 있다. CSS란? CSS의 특징과 사용할 때의 단점에 대해서 먼저 나열해보겠다. 우선 CSS는 HTML에서는 지원할 수 없는 다양한 문자 크기나 글자체, 줄 간격의 지정이 가능할 뿐만 아니라 기존의 HTML 태그 기능을 확장하여 배경색상 등도 자유롭게 선택할 수 있다. 웹 문서는 HTML만으로 작성이 가능하지만, HTML만으로는 원하는 웹 형태를 띄울 수가 없다. -> 따라서 CSS는 웹문서, ASP나 기타 CGI 등의 다양한 웹 관련 문서에 삽입해서 사용할 수 있으며, 단순화된 웹문서에 스타일을 지정해줄 수 있는 확장기능이다. CSS는 복잡한..

방법1. 상태 (State)를 이용하여 활용한 Modal 구현 1. 상태 (State)를 사용하여 Modal의 열림 또는 닫힘 상태를 관리한다. 2. 조건부 렌더링을 통하여 Modal의 표시 여부를 설정한다. 3. Modal 컴포넌트 내부에 필요한 컨텐츠를 포함시킨다. 상태 변경 방법 setIsOpen(true); => modal을 열겠다고 허락해 준 상황. 함수 선언 부분에서 const [isOpen, setIsOpen] = useState(false); 이렇게 상태를 선언해주고, return() 부분에서 modal의 열림과 닫힘을 확인하기 위해서 if (isOpen) 의 상황이라면 modal의 내용을 띄울 수 있게 설정한다. 방법2. 외부 라이브러리 사용 - 'react-modal' 라이브러리 사용 ..

TypeScript에서 함수의 데이터 타입 방법 1 : 매개변수와 반환 값의 데이터 타입 지정 function add(a: number, b: number): number { return a + b; } 함수 add를 생성할 때, number 타입인 a, b를 받고, a + b의 값을 반환한다. a: number, b: number을 통해서 a, b의 데이터 타입을 선언하였고, : number을 작성함으로써 반환값의 데이터 타입을 지정하였다. 방법 2 : 선택적 매개변수 사용하기 일부 매개변수를 선택적으로 받고싶을때 매개변수 뒤에 '?'를 작성한다. 이렇게 하면 매개변수를 받을지 받지 않을지 선택할 수 있다. function greet(name: string, greeting?: string): stri..

TypeScript에서의 Array와 Tuple의 데이터 타입 1. Array 타입 배열 선언 방법 (1) // 첫 번째 방법: 타입 + [] let arr1: number[] = [1, 2, 3]; 배열 선언 방법 (2) // 두 번째 방법: Array let arr2: Array = [1, 2, 3]; 2. Tuple 타입 Tuple 선언 방법 let tuple: [string, number, boolean] = ['Hello', 42, true]; Array와 Tuple의 차이점 Array - 길이가 가변적이며, 동일한 타입의 요소로 구성된다. Tuple - 길이가 고정되어 있으며, 각 요소의 타입이 정해져 있다. JavaScript에는 없는 데이터 타입이며, TypeScript에서만 사용 가능하다..