목록프로그래밍 (408)
쌓고 쌓다
Map 주요 메소드 및 프로퍼티 new Map() : 맵 생성 map.set(key, value) : key와 함께 value 등록 map.get(key) : key에 해당하는 value를 반환. ( key가 존재하지 않으면 undefined 반환 ) map.has(key) : key가 존재하면 true, 존재하지 않으면 false 반환 map.delete(key) : key와 함께 value 삭제 map.clear() : 맵의 모든 요소 삭제 map.size : 요소들의 개수 반환 맵 생성 - new Map() const map = new Map() 맵을 사용하기위해 맵 객체를 생성합니다. 삽입 - map.set(key, value) map.set(1, 'number 1') map.set('1', 's..
1. 목록 꾸미기 HTML의 목록 태그(ul, ol, li)를 이용하여 목록을 만들 수 있다. 이 목록 태그에 CSS를 적용해 보자. 글머리 기호 => list-style-type li { list-style-type: square; } 내용 1 내용 2 list-style-type 옵션으로 목록의 글 머리 기호를 변경할 수 있다. list-style-type 속성 값 속성 값 의미 square 정사각형 none 글 머리 기호를 사용하지 않음 circle 빈 동그라미 disc 꽉찬 동그라미(기본값) 글머리 이미지 => list-style-image li { list-style-image: url('./img/icon.png') } 수평 목록 목록에 사용하는 ul, ol, li 태그는 화면에 표시될 때 기..
display 속성 HTML 요소를 화면에 표시하는 디스플레이 방식에는 인라인(inline)과 블록(block)이 있다. 1. display: inline div { background-color: #eeeeee } span { display: inline; border: solid 1px black; } 글자1 안녕하세요! 글자2 인라인 방식에서는 HTML 요소를 수평 방향으로 표시하고 줄 바꿈이 일어나지 않는다. 2. display: block div { background-color: #eeeeee } span { display: block; border: solid 1px black; } 글자1 안녕하세요! 글자2 블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 전체 행(하나의 행)을 ..
배경 이미지 삽입 => background-image 속성 사용. body { background-image: url("./img/texture.png") } 아래의 이미지를 배경 이미지로 삽입한다고 하자. 배경 이미지가 삽입될 영역보다 작은 경우, 부족한 부분은 배경 이미지를 수평과 수직 방향으로 반복된다. 배경 이미지 반복 body { background-image: url("./img/texture.png"); background-repeat: no-repeat; background-position: right top; } background-repeat 속성 이미지가 반복되지 않게 하거나 수평 또는 수직방향으로 반복 설정이 가능하다. 속성 값 의미 no-repeat 배경 이미지를 반복하지 않음 r..
널 병합 연산자(??) 왼쪽 피 연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리연산자이다. falsy 값 (0, '', false, NaN, null, undefined)일 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR(||)와는 대조된다. || 연산자는 falsy 값이면 뒤로 넘어감. const a = 0; const b = a || 3; console.log(b) // output : 3 ?? 연산자는 null과 undefined일 때만 뒤로 넘어감. const a = 0; const b = a ?? 3; console.log(b) // output : 0 const e = null; const f = e ?? 3; conso..
__firename, __dirname 노드는 __filename, __dirname 키워드로 현재 파일명과 파일 경로 정보를 제공한다. study.js console.log(__filename) console.log(__dirname) __filename은 파일명까지 포함하여 나오고, __dirname은 파일의 위치까지만 나온다. + ES모듈에서는 __filename, __dirname을 사용할 수 없다. 대신 import.meta.url로 경로를 가져온다. filename.mjs console.log(import.meta.url) console.log('__filename은 에러 발생') console.log(__filename) path 내장 모듈 위의 __filename을 사용할 때 윈도가 아니라..
선택자 CSS로 꾸미고자 하는 HTML의 영역을 선택하는 데 사용. 전체 선택자 HTML 요소 전체를 선택한다. 제목 내용 태그 선택자 꾸미고자하는 태그의 영역을 선택한다. 1.제목 내용1내용2 2.제목 내용3내용4 그룹 선택자 여러 선택자를 그룹으로 묶어 한번에 적용할 수 있다. 각 선택자는 콤마(,)로 구분함. 세상의 음식 추천 음식 무엇을 먹을까 된장찌개 미역줄기 아이디 선택자 태그의 id 속성을 이용하여 특정 영역 하나를 선택하여 꾸밀 때 사용함. 테마가든 안내 복잡한 도심에서 여유로운 휴식을 즐길 수 있는 나만의 공간 사랑하는 연인과 가족, 친구와 함께 즐기자 관람 안내 - 이용료 : 무료 - 이용시간 : 09:00 ~ 10:00 클래스 선택자 웹 페이지에서 두군데 이상의 특정 영역을 선택하여 ..
HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서 이런 박스를 기반으로 요소를 화면에 배치할 수 있다. 박스 모델은 Border, Margin, Padding 세가지로 구성된다. 박스 모델 p { margin: 50px; padding: 30px; border: solid 2px black; } 웹 페이지 내용 HTML 요소: 텍스트, 이미지, 동영상, 목록 등 웹 페이지를 구성하고 있는 요소. margin: 경계선과 외부의 간격을 의미. padding: 경계선과 HTML 요소 사이의 간격을 의미. border: HTML 요소의 경계선을 그리는데 사용. 경계선 => border 속성 박스 모델1 박스 모델2 박스 모델3 박스 모델4 border 속성은 선의 종류, 두께, 색상을 속..