밀 종합 ٩(`╹ω╹´)و

, , , sectioning content는 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타낸다. 모든 sectioning content는 heading과 outline을 가진다. *heading과 outline의 차이를 모른다면 링크의 "Q. 앞에 있는 번호들은 무엇인가요?" 참고 01. 를 sectioning content내에 사용 할 수 있다. section 안의 header는 section의 제목, 작성자 이름 등이 포함될 수 있다. 는 반드시 섹션의 시작 부분에 배치돼야 하는 것은 아니다. 02. 를 sectioning content내에 사용 할 수 있다. section 안의 footer에는 section의 게시 날짜, 라이센스 정보 등이 포함될 수 있다. 역시 반드시 섹션의 끝 부분에..

섹션화란? 책의 목차를 빗대어 말하자면, 상단 이미지의 title 하나 하나가 섹션화 된 것이다. 책의 구성(섹션)을 나누고, 구성(섹션)의 제목을 붙이 듯. HTML문서 또한 자동으로 문서의 목차가 만들어 진다. 눈에는 보이지 않기 때문에 아래의 "HTML 5 Outliner"를 사용해서 섹션화된 콘텐츠를 확인할 수 있다. 빨간색 박스에 아래의 코드를 넣어보자. Outline this!를 클릭하면 아래와 같은 결과가 나온다. 빨간색 박스에 아래의 코드를 넣어보자. Q. 최상단에 있는 1.은 무엇인가요? HTML문서의 제목을 뜻한다. 사이트의 제목 사이트의 제목 위의 방법들을 통해서 알 수 있듯이 는 섹션화하지 않고, 은 섹션화한다. Q. 앞에 있는 번호들은 무엇인가요? section이 가지고 있는 ou..

값 위치 자리 유지 크기 유지 설명 relative 상대 O O - 자신을 기준으로 배치한다. absolute 절대 X X - 부모 중에 위치 지정 요소가 있으면 상대적으로 배치한다. - 위치 지정 요소가 없는 경우: 초기 컨테이닝 블록을 기준으로 삼는다. - 요소의 속성이 inline인 경우: block이 된다. fixed 절대 X X - 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. - 부모 중에 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. - 요소의 속성이 inline인 경우: block이 된다. sticky 끈끈한 O O - 평소에는 상대 위치로 처리된다. - 스크롤 동작이 있어야만 "..

기본 선택자 이름 구문 설명 전체 선택자 * 모든 요소를 선택 유형 선택자 elementName 주어진 노드 이름을 가진 모든 요소를 선택 ID 선택자 #idName id 요소 선택. 문서 내에 단, 하나만 존재해야 한다. 클래스 선택자 .className 주어진 class 특성을 가진 모든 요소를 선택 특성 선택자 [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 주어진 특성을 가진 모든 요소를 선택 그룹 선택자 이름 구문 설명 선택자 목록 A, B ,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택 결합자 이름 구문 설명 자식 결합자 A > B A의 직계 자식인 노드를 선택 자..

method(양식을 제출하는데 사용할 HTTP메서드) GET(기본값): 일반적인 방식. POST: 비밀번호와 같은 개인정보들은 POST방식을 사용한다. dialog: 아래와 같은 창을 만들 때 사용하는데, 호환성이 낮아서 PASS [공부 좌표]

Object.keys(obj) - 키가 담긴 배열을 반환한다. - obj의 유형에 따라 배열 순서가 달라진다. - __proto__의 영향을 받지 않고, 자신의 키만 반환한다. obj의 유형에 따라 배열 순서가 달라진다. 배열의 경우: 유형에 상관없이 순서대로 배열된다. const strArr = ['나', '가', '다']; const numArr = [2, 1, 3]; 객체의 경우: Number유형만 key값에 영향을 받아 번호가 작은 수 -> 큰 수로 배열된다. //String 유형 const strObj = { '나' : 'value', '가' : 'value', '다' : 'value' }; //Number 유형 const numObj = { 20 : 'value', 10 : 'value', 3..

[[Prototype]] - 객체는 [[Prototype]]이라는 숨김 프로퍼티를 갖고 있다. - 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가되는데, 다른 객체를 참조하는 경우 참조 대상을 'prototype'이라 부른다. - [[Prototype]]은 값을 직접적으로 설정할 수 없다. 값을 설정하려면 __proto__를 사용해야 한다. - [[Prototype]]은 프로퍼티를 읽을 때만 사용한다. (프로퍼티 추가, 수정, 삭제는 해다아 객체에 직접 해야 한다.) 프로토타입 상속(prototypal inheritance) object에서 프로퍼티를 읽을 때 해당 프로퍼티가 없으면 자바스크립트는 자동으로 prototype에서 프로퍼티를 찾는다. 프로그래밍에선 이런 동작 방식을 '프로토타입..

관습 설명 밑줄 "_" 로 시작하는 프로퍼티 객체 내부에서만 활용하고, 외부에서는 건드리지 않는다.

메서드 설명 get 인수가 없는 함수로, 프로퍼티를 읽을 때 동작함 set 인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨 접근자 프로퍼티의 본질은 함수인데, 'getter(획득자)'와 ‘setter(설정자)’를 메서드로 설정한다. getter와 setter 메서드를 구현하면 객체엔 '가상’의 프로퍼티가 생긴다. 가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는다. let obj = { get propName(){ //getter, obj.propName을 실핼할 때 실행되는 코드 }, set propName(value){ //setter, obj.propName = value를 실핼할 때 실행되는 코드 } }; getter: 프로퍼티를 읽으려고 할 때 실행 setter: 프로퍼티에 값을..

문자열을 정렬된 하위 문자열 목록으로 나누고 이러한 하위 문자열을 배열에 넣고 배열을 반환한다. 분할은 패턴을 검색하여 수행된다. 여기서 패턴은 메서드 호출에서 첫 번째 매개 변수로 제공된다. 문법 str.split([separator[, limit]]) separator(생략가능) 각 분할이 발생해야하는 위치를 설명하는 패턴입니다. 구분자는 간단한 문자열이거나 정규 표현식 일 수 있습니다. 가장 간단한 경우는 separator가 단일 문자일 때이다. 구분된 문자열을 분할하는데 사용된다. 예를 들어 탭으로 구분 된 값 (TSV)을 포함하는 문자열은 다음과 같이 탭 문자를 구분 기호로 전달하여 구문 분석 할 수 있다. myString.split ( "\t"). 구분 기호에 여러 문자가 포함 된 경우: 전체..