HTML

CSS를 공부하다 보면 이런 코드를 볼 수 있었습니다. 클래스 띄어쓰기 // 두개의 클래스를 모두 가지는 태그 입니다. 부등호 .name > div {// 부등호는 요소의 앞,뒤 내부요소를 선택하는 방법입니다. property: } Selector 띄어쓰기 .name div{ // 띄어쓰기는 .name 내부에 div 모든 요소를 뜻함 property: }

기본 명명법 태그 or 클래스.명칭::placeholder{ color: color; } 예시) #todo-form input::placeholder { text-align: center;//텍스트 가운데 정렬 color: beige; // 색 지정 }

변수 선언 방식 예전 코드 들을 찾아보다 보면 생각보다 var를 많이 볼수 있다. 이제는 var 대신 let을 많이 쓰지만 사실 왜 let을 사용하는지는 잘 모르고 사용해왔다. 그래서 오늘은 var를 알아보고자 한다. ' var '는 블록 스코프가 없다. var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다. 블록 밖에서 접근 할수 있다고 한다. if (true) { var test = true; // 'let' 대신 'var'를 사용했습니다. } alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음) (출처 : 모던자바스크립트) 해당 코드가 실행이 가능해진다는 것이다. 이렇게 짧은 ..

가비지 컬렉션(Garbage Collection) 메모리 관리 기법 중 하나로 메모리를 가지고 있지 않은 영역을 해제하는 기능이다. 우리가 사용하는 자바스크립트 는 메모리의 도달 가능성을 기준으로 메모리 관리를 수행한다. 메모리가 참조하지 않고 있다면 해당 변수를 제거하는 기능인데 예를 들어보자 ① X = 10; ②Y = X; ③X = 5; X = ? or Y = ? ①. X는 10이라는 값의 주소를 가지고 있다. ②. Y = X의 주소를 참조한다.( 주소값을 가진다.) ③X는 10의 주소값을 버리고 5라는 값의 주소값을 가진다. 정답 : X = 5 or Y = 10 ※드래그 하세요 위 상황처럼 값이 버려진 10의 주소값은 가비지 컬렉터(garbage collector)에 Select 되어 자동으로 삭제..

목적 페이지 마크업 연습 및 기록 남기기 Top Menu List Fixed 고정 마크업 사이트들을 살펴 볼때 이 처럼 스크롤을 내려도 상단이 고정되어 있는 것을 볼 수 있다. .top-list { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-evenly; background-color: white; } css top-list 에서 position : fixed; top: 0; width: 100%; or left: 0; right: 0; width: 100%; 를 설정하든 left: 0; right: 0;을 하던 값은 같다. 설정을 해주면 상단 메뉴바가 고정 되는 것을 확인할수 있다. 여기서 문제! 상단 메뉴가 ..

목적 나는 국비교육으로 백엔드 쪽을 배웠지만 프론트 부분이 더 좋을것 같다고 판단하여(?) 프론트 부분을 준비하려고 오늘부터 공부 한 것에 대한 글을 남겨 보고자 한다. 페이지 구조 연습 페이지의 영역을 큰 단위로 빨간색으로 묶고 영역 안에서 레이아웃을 나눌때는 주황색으로 반복되는 것 들을 묶을 때는 노란색으로 요소들을 묶을 때는 하늘색으로 하나의 요소들을 묶을 때는 파란색으로 그려서 구조 연습을 진행한다. ※ 준비물 ※ 1. 크롬 -> 크롬 웹스토어 -> GoFullPage - Full Page Screen Capture 확장프로그램 설치 확장프로그램으로 페이지 전체 스크린샷을 " 1_전 " 으로 저장하고 2. 그림판 그림판으로 영역 나누기 후 " 1_후 " 로 저장한다. 본 그림은 처음 작업 한 페이..