월드스토리의 코딩 나라

글자 설정을 바꾸는 CSSCSS 지시어의미속성font-weight글자의 두께 지정normal : 기본두께(400)bold : 두껍게(700)bolder : 상위(부모) 요소보다 두껍게lighter : 상위(부모) 요소보다 앏게100~900 : normal과 bold 이외의 두께 지정font-size글자 크기 지정16px : 글자 설정의 defaultpx, em, rem 등의 단위로 지정하기 가능% : 부모 요소의 폰트 크기에 대한 비율smaller : 상위(부모) 요소보다 작은 크기larger : 상위(부모) 요소보다 큰 크기xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기 지정line-height  한 줄의 높이 지정 숫자 : 요소의 글꼴 크기의 배수로 지정단위..

가상 클래스 선택자1. 사용자의 행동에 따라 변화하는  상황에 따라서 요소를 발생하는 선택자  가상 클래스 선택자의 종류선택자 종류선택자의 의미선택자 쓰는 법ABC : hover 마우스 커서가 올라가 있는 태그 선택a : hover {  color : red;}= a 태그에 마우스가 올라가 있을 때, 글자를 빨간색으로 변경ABC : active 선택자 ABC 요소 위에서 마우스 오른쪽 버튼을 눌렸을 때 발생a : active {   background-color : red;}a 태그를 사용자가 선택했을 때 배경색을 빨간색으로 바꿔라.ABC : focusinput 태그를 클릭 한 뒤, 커서가 깜빡일 떄처럼 포커스가 올라가 있을 때 선택input :focus {  background-color : orang..

CSS 기본 용어 정리용어 선택자(Selector)HTML 의 Style을 지정하기 위하여 HTML 테그를 선택하기 위한 수단.속성(Property)HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의함.여러 개의 프로퍼티를 연속해서 지정할 수 있으며, 세미콜론(;)으로 구분함속성은 이미 지정되어 있는 용어이며, 사용자가 임의로 정의하지 못함.값(value)해당 속성에 대하여, 키워드나 크기 단위, 또는 색상 단위로 표시되어 있는 실제 값 CSS의 기본 선택자 용어의미사용법전체 선택자(Universal Selector)모든 요소를 선택함* {    color : red;}= 전체 태그에 대해서 빨간색 글씨로 써라.태그 선택자(Type Selector)태그의 이름에 대해서 선택 ..

CSS(Cascading Style Sheet)1. 웹 페이지를 디자인하기 위해 사용하는 언어 개발자 도구○ 브라우저에서 개발 편의를 위해 제공하는 도구로 F10을 누르면 활성화된다.○  현재 보고 있는 웹페이지를 구성하는 HTML, CSS, javascript를 볼 수 있다.○ 화면을 돌리면 원상태로 복구되겠지만, 화면을 수정하여 변경하는 것도 가능하다.○ 특정요소 코드 보기 및 수정 / 크기 줄이기 / 화면의 사이즈를 줄여서 반응형 확인하기. CSS의 참조 방식인라인(inline 방식) 1. 각 태그마다 스타일에 변화를 주고 싶을 때 사용2. 테그마다 스타일을 설정하는 것이기에, CSS 코드의 재사용이 불가능하다.내장 Style 1. 태그 내부에서 Style을 선언하여 사용하는 방식2. 동일한 조건..

5. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - select 태그의 모습태그의 유형사용 목적선택 폼 생성1. 어떤 내용을 선택하는 부분을 생성하는 태그속성 - Name : select 박스의 이름선택 폼의 옵션1. 실제 선택할 내용을 생성하는 태그속성● Value : 실제적으로 전달되는 값● Selected : 최초로 선택되는 값으로 설정● Disabled : 보이지만 선택할 수 없는 옵션으로 만듬option을 묶는 태그1. option을 그룹화하는 태그속성★ Label : 그룹화하는 옵션의 그룹명을 결정 6. 테이블을 생성하는 테그 - table태그의 모습 사용목적속성테이블을 생성• border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding ..

3.  이미지나 하이퍼링크를 표현하는 데 사용되는 태그태그의 모습태그의 유형사용 목적이미지 테그1. 이미지를 넣을 때 사용되는 테그2. 속성 값 중 하나인 src가 여기서 사용됨3. 이미지 로드가 안될 때 표시되는 문자는 alt4. 프로그램 내 파일을 가져오거나, 인터넷 링크를 통해 이미지 표시 가능하이퍼링크1. a는 Anchor의 약어2. 속성값 href는 Hypertext Reference 의 약자, 이동할 페이지 링크3. target : 링크 된 페이지를 열었을 때, 문서가 열릴 위치를 표시★ _blank :새로운 텝에서 내용을 염★ _self : 현재 탭에서 (기본 값) 4. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - Input 태그의 모습태그의 유형사용 목적버튼 태그특정 함수를 수행..

1. 문자의 구조를 형성하는 태그태그의 모습태그의 유형사용 목적제목 태그1. 제목을 뜻하는 Heading의 약자, h 사용!2. 제목을 뜻하는 테그이기 때문에 자동 줄 바꿈처리 되며, 하나의 HTML 문사에 하나의 H1 테그를 권장함.3. 웹 검색 엔진이 제일 먼저 검색하는 테그본문 태그본문을 적기 위한 테그로 paragraph의 약자줄 바꿈 태그 한 줄을 그냥 비우는 테그라고 보면 됨.리스트 작성 태그1. 순서가 없는 목록을 작성 함(●이 기본값)1. 순서가 있는 목록을 작성 함(기본 값은 1, 아라비아 숫자 등 스타일 변경 됨)1. 두 테그 내부에서 내용을 작성하는 태그줄긋기 태그 수평으로 된 줄을 그어주는 태그 2. 문자를 디자인하는데 사용되는 태그태그의 모습사용 목적두껍게 강조하기 위한 태그두껍게..

HTML(Hypertext Markup Language)1. 마크업 언어 : 테그를 이용해서 프로그램의 구조를 짜는데 사용되는 스크립트 HTML의 기본 구조HTML 문서는 기본적으로 로 시작실질적인 문서는 2번쨰 행부터 시작되며, 과 사이에 작성됨 사이에는 HTML 문서 정보를 정의하는 코드가 포함됨(제목, 저장방식, 브라우저의 크기)웹 브라우저의 출력 요소는 몸통을 뜻하는 바로 아래에 위치한다.HTML 요소(Element)는 시작 테그(Open)과 종료(Closing) 그리고 테그 사이의 내용으로 이루어짐 태그- HTML 문서의 메타 데이터와 문서를 정의하는 사용되는 테그들이 위치하는 곳- 메타 데이터 : 데이터에 대한 기본적인 출저 정보를 제공하는 데이터- 화면에 표시되는 요소는 아니지만, 그..

[ 목차 ] 1. 데이터베이스(Database)란?#. 다양한 카테고리의 정보를 저장할 수 있는 구조#. 여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리되는 데이터의 집합#. 즉, 데이터를 저장하는 구조/자료의 모음#. 파일에 시스템을 저장하면 데이터의 중복과 불일치 문제가 발생하여, 도입되게 되었다. 2, 데이터베이스 관리 시스템(DataBase Mangemnet System)#. 구성한 데이터베이스에 접근하고 이를 관리하기 위한 시스템 - mysql의 워크브랜치#. 사용자와 데이터베이스 사이에서 생성, 공유, 관리를 할 수 있도록 도와주는 소프트웨어 3) Database의 종류 #. 관계형 데이터베이스 - 테이블의 구조와 데이터 타입 등을 사전에 정의하고, 테이블에 정의된 내용에 알맞은 형태..

[ 목차 ] 1. 파일 업로드 프론트 엔드에서의 작업 업로드  1)  form 테그의 enctype 속성으로 "multipart/form-data"를 반드시 설정한다.                               - multer 미들웨어의 경우 "multipart/form-data"가 아닌 폼에서는 동작하지 않음. 2. node js 서버에서의 작업 = multer설치 명령어 : npm install multer - 파일 업로드를 위해 사용되는 미들웨어로 주로 express를 통해 서버를 구축할 때 많이 사용됨. 1) 파일 업로드 경로 설정 const multer = require('multer');const upload = multer({    dest : 'uploads/',}); de..