네발로 코딩하는 포메라니안

1. 주석 1. 한 줄 주석 = // code 2. 블록 주석 = /* code */ 2. 변수 동적 타입 언어로, 실행하면서 값이 할당되는 시점에 타입이 결정된다. 변수 = 형용사, 명사 사용 권장 함수 = 동사 사용 권장 낙타 표기법 ex) userName 키워드, 공백 포함X 숫자로 시작X 특수 문자는 _와 $만 허용 3. 자료형 1. 원시 타입 자료형 typeof 값 설명 숫자 number 정수 or 실수 (구분X) 문자열 string 문자, ' ' or " "로 표기 boolean boolean 참(true, 1, "-" 등) or 거짓(false, 0, null, "" 등) undefined undefined 변수가 선언되었지만, 초기화 되지 않을 경우 (개발자가 직접 할당X) null obj..

*본 블로그에서는 웹 용 JS를 말함. 일반 JS는 바닐라 JS라고 부르기도 하며, 웹에서와 다른 부분이 존재 1. JS란? - 객체 지향 - 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 - 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 2. HTML에 적용 1. 외부 스크립트 적용 - html 문서 내에 //js파일 document.querySelector(".b1").textContent = "바뀜"; 2. 내부 스크립트 적용 - html내에 사이에 js 작성

1. Semantic Tag란? - HTML4에서는 를 통해 화면을 구성 - HTML5에서는 "의미있는 태그"를 만들어 사용함 - 웹페이지 가독성을 높이고, 웹페이지 자체를 거대한 DB처럼 사용하기 위함 - 태그 이름만 다르고, 기능적인 차이는 없음 2. 암묵적 규칙 - 지키지 않아도 Error가 나지는 않지만, 권장되는 규칙 semantic tag 설명 header 헤더(문서의 머리 부분)을 의미 nav 문서 간의 이동을 담당하는 navbar를 의미 aside 본문 이외의 내용을 의미 section 본문의 여러 내용(article)을 포함하는 태그 article 본문의 주 내용을 의미 footer 문서의 밑 부분인 제작정보, 저작권 등을 표시

- element의 위치를 지정 1. width, height 속성 - block의 너비와 높이 크기를 설정 - block element만 적용됨 (=inline element는 적용X) - default값 width = 자신의 상위 block에서 허용하는 내부 width 크기만큼 100% 채움 height = 0%, block속의 내용물의 크기 2-1. position 속성 - 위치 옮기기 위한 기준점 잡기 속성 값 의미 static default값으로 일반적인 내용물의 흐름, 기준이 없으므로 배치 불가능 relative 일반적인 내용물의 흐름, 자기 자신을 기준으로 배치 absolute 상위 element를 기준으로 절대적인 위치 지정 fixed 사용자가 보는 뷰를 기준으로 배치 (항상 화면상의 지정..

1. 개요 1. 테이블 속성 속성 의미 table-layout table layout설정 width table 너비 지정 height table 높이 지정 text-align Cell 내부 내용을 수평 정렬 vertical-align Cell 내부 내용을 수직 정렬 2. 테두리 속성 속성 의미 border-collapse 테두리 분리/통합 설정 border-style 테두리 스타일 설정 border-width 상하좌우 4개의 테두리 너비 설정 border-color 테두리 색상 설정 border 테두리 관련 속성을 한번에 지정하는 단축형 속성 2. table-layout - {table-layout: auto(default값) | fixed;} - fixed = table cell의 width, heig..

1. 개요 - 화면에 출력될 element들에 디자인 요소를 추가하는 속성들 속성 의미 속성 의미 cursor 마우스 모양을 변경 background-image 배경을 이미지로 지정 classification 리스트의 글머리 기호를 변경 background-attachment 배경 이미지를 고정하거나 scroll여부를 지정 display element가 화면에 출력되는 방식을 조정 background-repeat 배경 그림의 반복 여부 지정 background-color 배경색 지정 background-position 배경 그림의 위치를 지정 background 배경 관련 속성 한번에 지정 2. display - {display : none | block | inline | ... } 3. backgro..

1. 개요 - 글자, 공간, 단어, 문단들이 보여지는 속성을 정의 속성 의미 속성 의미 text-align text 정렬 방식 vertical-align 수직 정렬 지정 text-decoration text 장식 지정 letter-spacing 문자 간의 space 간격 조절 text-indent text-block 첫 라인 들여쓰기 지정 word-spacing 단어 간의 간격 지정 text-transform text 대문자로 line-height 줄(행) 간격 지정 white-space element 안의 공백 지정 color text 색상 지정 2. text-align - 속성값 속성값 의미 left 왼쪽 정렬 right 오른쪽 정렬 center 중앙 정렬 justify 각 라인의 너비가 모두 동일하..

1. 개요 - text의 글꼴, 굵기, 크기, 스타일 등을 지정 속성 의미 font-family 글꼴 지정 font-size 글자 크기 지정 (px, cm, % 등) font-style 글자 스타일 지정 font-variant 소문자를 작은 대문자로 변경 font-weight 글자 굵기 지정 font font에 관련된 속성을 한번에 지정할 수 있는 단축형 속성 2. font-family - font명에 white-space가 있으면, " "로 감싼다. text *추천 사이트 1. 눈누 : 상업용 폰트 제공 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 3. font-style - 속성 값 normal = 기본 italic = 이탤릭체로 oblique = 기울임꼴로 4..

1. 선택자란? - css 적용 타겟을 지정할 때 사용 종류 선택자 설명 사용법 일반 선택자 전체 선택자 HTML내의 모든 element를 선택 * { } 타입 선택자 태그명이 일치하는 element(태그)를 선택 h1, h2 { } 클래스 선택자 class 속성 값이 일치하는 element를 선택 .className { } ID 선택자 id 속성 값이 일치하는 element를 선택 #idName { } 복합 선택자 하위 선택자 하위 element(자손들)를 선택 E1 E2 { } 자식 선택자 직속 하위 element(자식들)를 선택 E1 > E2 { } 인접 형제 선택자 인접 형제 sibling관계인 element를 선택 E1 + E2 { } 일반 형제 선택자 sibling관계인 element들을 선택..

1. CSS란? - Cascading Style Sheets의 약자 - 마지막에 작성한 규칙, 구체적인 규칙 (p보다는 p #idName)이 우선 적용 - 구성 선택자 { 속성: 값; 속성: 값; } 2. 스타일 시트 적용 1. 외부 스타일 시트 적용 (권장) - html문서의 2. 내부 스타일 시트 적용 - html문서의 3. 인라인 스타일 적용 - 외부 or 내부 시트보다 우선 적용 test 3. 박스 모델 1. 속성 값의 개수에 따른 적용 - 값이 1개 일 때 = 모든 면에 적용 - 값이 2개일 때 = {(top & bottom), (right & left)}에 적용 - 값이 3개일 때 = {top, (left & right), bottom}에 적용 - 값이 4개 일 때 = {top, right, ..