마탁이의 개발 블로그

1. CSS 테이블 - CSS는 테이블 요소의 레이아웃과 표시를 제어할 수 있는 여러 속성을 제공한다. 2. 테이블에 테두리 추가 - border 속성을 통해 테이블의 테두리를 정의할 수 있다. table, th, td { border: 1px solid black; } - 기본적으로 브라우저는 테이블 주위와 모든 셀 주위에 테두리를 그리고 그 사이에 약간의 공간을 주어 이중 테두리를 만든다. - 이중 테두리 문제를 해결하기 위해서는 셀 테두리를 축소하고 꺠긋한 단일 선 테두리를 만들면 된다. 3. 테이블 테두리 축소 - 표 셀에 테두리를 설정하는 두 가지 모델이 있다. -> 분리 및 축소 - border-collapse 를 사용하여 HTML 테이블의 테두리 모델을 설정할 수 있다. table { bor..

1. HTML의 목록 유형 - HTML은 아래와 같은 세 가지의 목록 유형이 있다. 1) 정렬되지 않은 목록 > 모든 목록 항목이 글머리 기호로 표시된다. 2) 정렬된 목록 > 각 목록 항목이 번호로 표시되는 목록. 3) 정의 목록 > 각 항목에 대한 설명이 포함된 목록 2. 목록의 마커 유형 변경 - 기본적으로 정렬된 목록의 항목은 1,2,3,4... 로 번호가 매겨지지만 정렬되지 않은 목록은 글머리 기호(•)로 표시된다. - list-style-type 속성을 이용하여 기본 목록 마커 유형을 로마 숫자, 라틴 문자, 원 등 다양한 유형으로 변경할 수 있다. Unordered List List Item 1 List Item 2 List Item 3 Ordered List List Item 1 List ..

1. CSS 링크 - color, font, background, border와 같은 모든 CSS 속성을 지정할 수 있다. - 링크는 아래와 같은 4가지 상태가 있다. a: link 일반적인 또는 방문하지 않은 링크의 스타일을 정의 a: visited 사용자가 이미 방문한 링크의 스타일 a: hover 사용자가 링크 위에 마우스 포인터를 올려 놓았을 때 링크의 스타일 a: active 클릭할 때 링크의 스타일 - 마지막으로 정의된 스타일 규칙이 이전에 정의된 스타일 규칙보다 우선되기 때문에 서로 다른 링크상태에 대해 스타일을 설정하는 순서가 중요하다. - 일반적으로 다음의 순서를 따라야 한다. link -> visited -> hover -> active -> focus 2. 표준 링크 스타일 수정 - ..

1. CSS 텍스트 - 색상, 정렬, 간격, 장식, 변형 등과 같은 다양한 텍스트 스타일을 매우 쉽고 효과적으로 정의할 수 있다. 2. color - 텍스트 색상은 CSS color 속성에 의해 정의된다. - color 속성은 CSS 텍스트의 일부인 것처럼 보이지만, 실제로는 CSS의 독립형 속성이다. body { color: #434343; } 3. text-align - 텍스트의 수평 정렬을 설정하는데 사용된다. - 왼쪽, 오른쪽, 가운데 또는 양쪽 맞춤의 4가지 방법으로 정렬할 수 있다. - justify의 속성 값의 경우 신문처럼 마지막 줄을 제외한 왼쪽과 오른쪽의 여백을 정렬할 수 있다. This is a heading Lorem ipsum dolor sit amet, consectetur ad..

1. CSS 글꼴 - 아래와 같은 글꼴 속성을 제공한다. 2. font-family - 텍스트를 렌더링하는 데 사용할 글꼴을 지정한다. - 이 속성은 여러 개의 쉼표(,)로 구분 된 글꼴 이름을 대체할 수 있는 글꼴로 보유할 수 있다. - 만약 사용자 시스템에서 첫 번째 글꼴을 사용할 수 없는 경우 브라우저가 자동으로 두 번째 글꼴을 적용하려고 시도한다. - 웹 디자인에서 사용되는 가장 기본 글꼴은 serif 및 sans-serif 이다.- seif 글꼴과 sans-serif 글꼴의 차이는 아래 이미지와 같다. body { font-family: Arial, Helvetica, sans-serif; } 3. font-size - 글꼴 크기를 설정하는 데 사용한다. - 키워드, %, px, ems 등 다양..

1. CSS 배경 - CSS는 배경 색상 지정, 배경에 이미지 배치 및 위치 관리 등 요소의 배경 스타일 지정을 위한 여러 속성을 제공한다. - 배경의 속성은 아래와 같은 종류가 있다. 2. background-color - 배경색을 지정하는데 사용한다. h1 부분 입니다. p 부분 입니다. 3. background-image - 이미지를 HTML 요소의 배경으로 설정한다. - 기본적으로 브라우저는 배경 이미지를 가로 및 세로로 반복하거나 바둑판식으로 배열하여 요소의 전체 영역을 채운다. 이를 background-repeat 속성으로 제어할 수 있다. background-color demo p 부분 입니다 4. background-repeat - 배경에 적용된 이미지를 바둑판식처럼 배열되는 방식을 제어할..

1. 색상 속성 설정 - color 속성은 요소의 텍스트 색상 (일반적으로 전경색)을 정의한다. - 아래의 예에서는 body에 color 속성을 지정하면, 전체 페이지의 기본 텍스트 색상을 지정한다. body { color: #ff5722; } - 색상은 다음의 형식들로 지정할 수 있다. 1) 키워드 - "Red", "Blue", "transparent" (투명), .... - 가장 쉽게 색상을 지정할 수 있는 방법- 대/소문자를 구분하지 않는다. - 최신 웹 브라우저는 CSS표준에 정의된 것보다 많은 색상 키워드를 지원하지만, 더 안전한 쪽을 유지하기 위해서 16진수 값을 사용하는 것이 좋다. 2) 16진수 - "#ff0000", "#00ff00", ... - 웹에서 가장 일반적으로 색상을 정의하는 방..

www.tutorialrepublic.com/css-tutorial/ CSS3 Tutorial - An Ultimate Guide for Beginners CSS Tutorial CSS is the key presentational technology that is used in website design. CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages. Prio www.tutorialrepublic.com 1. CSS를 HTML에 포함시키는 방법 인라인 스타..

www.npmjs.com/ - npm 공식 페이지 npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com nomadcoders.co/react-hooks-introduction/lectures/1714 - React Hook 관련 강의..

1. npm과 npx - 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구. - npm을 조금 더 편하게 사용하기 위해서 npm에서 제공. - npx는 npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구. npm = Package Manager npx = Package Runner 2. package-lock.json - npm을 이용해서 node_mudles 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일이다. 또한 당시의존성에 대한 정보를 모두 가지고 있다. 따라서 package-lock.json 파일은 소스 저장소에 커밋해야한다. (node_modules 없이 배포하..