본문 바로가기

학원

 (152)
제 15~19장. 간단 요약 [ 목차 ] 1. encodeURIComponent() / decodeURIComponent() 2. Math.random(): number 1. encodeURIComponent() / decodeURIComponent() 1) encode...는 매개변수로 전달된 URI 구성요소를 인코딩 2) decode...는 매개변수로 전달된 URI 구성요소를 디코딩 2. Math.random(): number 1) 임의의 부동 소수점을 반환 2) 소수점 0부터 1미만의 값 3) 1부터 10까지의 랜덤 값 반환과 소숫점을 제거하여 정수로 만드는 방법 그 외 내용은 앞서 중복된 내용이거나 깊은 지식이기에 간단히 넘어감 15장. 빌트인 객체 https://poiemaweb.com/js-built-in-object 1..
14장. 클로저 [ 목차 ] 1. 클로저 2. 클로저를 활용한 상태유지 1. 클로저 1) 자바스크립트 고유의 개념이 아닌 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성 2) 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합 = 자신이 생성될 때의 환경을 기억하는 함수 3) 렉시컬 환경 : 내부 함수가 선언됐을 때의 스코프를 의미 4) 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근 가능 2. 클로저를 활용한 상태유지 1) 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것 2) 즉시실행함수는 함수를 반환하고 즉시 소멸 3) 즉시실행함수가 반환한 함수는 자신이 생성됐을 때의 렉시컬 환경에 속한 변수 isShow를 기억하는 클로저 4) 클로저를 이벤트 핸들러로서 이벤트 ..
13장. 함수 호출 방식에 의해 결정되는 this - 내용추가 [ 목차 ] 1. 자바와 자바스크립트 this의 차이 2. 함수 호출 1. 자바와 자바스크립트 this의 차이 1) 자바의 경우 this는 인스턴스 자신을 가리키는 참조변수 2) 자바스크립트의 경우 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 바인딩 객체가 달라짐 3) 함수 호출, 메소드 호출, 생성자 함수 호출, apply/call/bind 호출 2. 함수 호출 1) 전역객체는 모든 객체의 유일한 최상위 객체를 의미 2) 일반적으로 Browser-side에서는 window 객체를 의미 3) 일반적으로 Server-side에서는 global 객체를 의미
12장. 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode [ 목차 ] 1. Strict mode 2. Strict mode의 적용 1. Strict mode 1) 암묵적 전역 변수의 사용은 잠재적인 오류를 발생시키고 어려운 개발 환경을 생성 2) 이를 지원하기 위해 strict mode를 사용하여 자바스크립의 언어 문법을 보다 엄격하게 적용 가능 3) 기존에 무시되던 오류를 발생시킬 가능성이 높거나 최적화 작업에 문제를 일으킬 수 있는 코드에 명시적 에러를 발생 2. Strict mode의 적용 1) 선두에 'use strict';를 추가하면 스크립트 전체에 적용
11장. 스코프 [ 목차 ] 1. 스코프란? 2. 자바스크립트 스코프의 특징 3. 암묵적 전역 4. 즉시실행함수 1. 스코프란? 1) 참조 대상 식별자를 찾아내기 위한 규칙 2) 참조 대상 식별자 : 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름 3) 자바스크립트를 비롯한 모든 프로그래밍 언어의 기본적 개념 4) 스코프가 없다면 같은 식별자 이름은 충돌을 일으키기 때문에 프로그램 전체에서 하나만 사용 가능 2. 자바스크립트 스코프의 특징 1) 대부분의 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따름 2) 함수 레벨 스코프 : 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 외부에서 참조 불가능 3) let 키워드를 사용해 블록 레벨 스..
10장. 함수 - 추가필요 caller 프로퍼티 x 프로토 접근자함수 x 푸ㅡ로퍼티 x 내부함수 x 1. 함수 1) 어떤 작업을 수행하기 위한 문들의 집합을 정의한 코드 블록 2) 이름과 매개변수를 가지며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄저으로 실행 가능 3) 한번만이 아닌 여러번 호출 가능 0. 즉시 실행 함수 1) 함수의 정의와 동시에 실행되는 함수 2) 최초 한번만 호출되며 다시 호출할 수 없으며 초기화 처리 등에 사용 3) 혹시 있을 수도 있는 변수명 또는 함수명의 충돌을 방지할 수 있음 0. 재귀함수 1) 자기 자신을 호출하는 함수 2) 자신을 무한히 연쇄 호출하기에 호출을 멈출 수 있는 탈출 조건을 반드시 생성해야 함 3) 탈출 조건이 없는 경우 함수가 무한 호출되어 에러가 발생 4) 대부분 for, ..
9장. 객체와 변경불가성 - 추가필요 [ 목차 ] 1. 변경불가성 1. 변경불가성 1) 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴으로, 함수형 프로그래밍의 핵심 원리 2) 객체가 참조를 통해 공유되고 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성 증가 3) 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 래퍼런스를 참조한 다른 객체에서 객체를 변경하기 때문 4) 비용이 조금 들지만 객체를 불변객체로 만들어 프로퍼티의 변경을 방지하며 객체의 변경이 필요한 경우에는 참조가 아닌 객체의 방어적 보가를 통해 새로운 객체를 생성한 후 변경하여 해결 가능 5) 불변 객체를 사용하면 복제나 비교를 위한 조작을 단순화, 성능 개선에 도움 6) 객체가 변경 가능한 데이터를 많이 가지고 있는 경우 오히려 부적절 2...
8장. 객체 [ 목차 ] 1. 객체 2. 프로퍼티 3. 메소드 4. 객체 생성 방법 5. 프로퍼티 키 6. 프로퍼티 값 읽기 7. 프로퍼티 값 갱신 8. 프로퍼티 동적 생성 9. 프로퍼티의 삭제 10. for-in 문 11. Pass-by-reference 12. Pass-by-value 1. 객체 1) 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체 2) 원시 타입을 제외한 나머지 값들은 모두 객체 3) 자바스크립트의 객체는 키와 값으로 구성된 프로퍼티들의 집합 4) 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메소드라 지칭 5) 객체는 데이터를 의미하는 포로퍼티와 데이터를 참조, 조작할 수 있는 동작을 의미하는 메소드로..
7장. 타입 변환과 단축 평가 [ 목차 ] 1. 타입 변환 2. 암묵적 타입 변환 3. (암묵적)문자열 타입으로 변환 4. (암묵적)숫자 타입으로 변환 5. (암묵적)불린 타입으로 변환 6. (명시적)문자열 타입으로 변환 7. (명시적)숫자 타입으로 변환 8. (명시적)불린 타입으로 변환 9. 단축평가 1. 타입 변환 1) 의도적으로 값의 타입을 변환시키는 것을 명시적 타입 변환 또는 타입 캐스팅이라 지칭 2) 변수 값을 재할당해서 변경하는 것이 아닌 기존 값을 바탕으로 새로운 타입 값을 만들어 단 한번 사용하는 것 2. 암묵적 타입 변환 1) 자바스크립트는 표현식을 평가할 때 문맥, 즉 컨텐스트에 고려하여 암묵적 타입 변환을 실행 2) 이는 가급적 에러를 발생시키지 않기 위함 3) 암묵적 타입 변환은 문자열, 숫자, 불린과 같은 원..
6장. 제어문 - 추가필요 [ 목차 ] 1. 제어문 2. 블록문 1. 제어문 1) 주어진 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용 2) 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행되나 제어문은 코드의 실행 순서를 인위적으로 제어 가능 2. 블록문 1) 0개 이상의 문들로 중괄호로 묶은 것 2) 코드 블록 또는 블록이라고 지칭하며 자바스크립트는 블록문을 하나의 단위로 취급 3) 블록문은 단독으로 사용할 수 있으나 일반적으로 제어문이나 함수 선언문 등에서 사용 4) 문의 끝에 세미콜론을 붙이는 것이 일반적이지만 블록문은 붙이지 않음 3. 조건문 1) 주어진 조건식의 평가 결과에 따라 코드 블럭의 실행을 결정 2) 불린 값으로 평가될 수 있는 표현식 3) if... else 문과 switch 문을 제공 4. ..
5장. 연산자 대부분 java와 같은 다른 언어와 비슷하기 때문에 JavaScript만의 특징적인 연산자만 기술 [ 참고 ] https://poiemaweb.com/js-operator [ 목차 ] 1. - 단항연산자 2. 문자열 연결 연산자 3. 비교연산자 4. typeof 연산자 1. -단항연산자 1) 피연산자의 부호를 반전한 값을 반환 2) true의 경우 1, false의 경우 0을 반환하지만 -를 붙일 경우 각각 -1, -0을 반환 2. 문자열 연결 연산자 1) JavaScript 엔진에 의해 개발자의 의도와 상관없이 암묵적으로 타입이 변환 3. 비교연산자 1) 동등 비교 x == y : x와 y의 값이 같음 2) 일치 비교 x === y : x와 y의 값이 같고 타입이 같음 3) 부등 비교 x != y : ..
4장. 데이터 타입과 변수 [ 목차 ] 1. 데이터타입 2. 원시타입 3. 객체타입 4. 변수 5. 변수의 선언 6. 변수의 중복 선언 7. 동적 타이핑 8. 변수 호이스팅 9. var 키워드로 선언된 변수의 문제점 1. 데이터타입 1) 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 의미 2) 코드에서 사용되는 모든 데이터는 메모리에 저장, 참조할 수 있어야 함 3) 한정된 공간을 효율적으로 사용하고 2진수 데이터로 메모리에 저장된 데이터를 다야한 형태로 사용하기 위해 존재 4) 자바스크립트의 모든 값은 데이터 타입을 가지며 총 7가지가 존재(원시타입과 객체타입으로 분류) 2. 원시타입 1) 변경 불가능한 값으로 pass-by-value(값에 의한 전달) 2) number 1] 다른 언어와 달리 독특하게 하나의 숫자 타입만 ..
점프투파이썬 https://wikidocs.net/book/1
3장. 자바스크립트의 기본 문법 [ 목차 ] 1. 변수 2. 값 3. 연산자 4. 키워드 5. 주석 6. 문 7. 표현식 8. 문과 표현식의 비교 9. 함수 10. 객체 11. 배열 1. 변수 1) 변수는 값을 저장하고 그 저장된 값을 참조하기 위해 사용 2) 한번 쓰고 버리는 값이 아닌 유지할 필요가 있는 값은 변수에 담아 사용 3) 변수 이름을 통해 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아짐 4) 변수는 위치를 기억하는 저장소 즉, 변수란 메모리 주소에 접근하기 위해 사람이 이해 가능한 언어로 지정된 식별자 5) 위치는 메모리 상의 주소를 의미 6) 변수를 선언할 때 var 키워드를 사용하며 할당 연산자 =는 변수에 값을 할당하기 위해 사용 2. 값 1) 프로그램에 의해 조작될 수 있는 대상 2) 다양한 방법으로 생성할..
2장. 자바스크립트 개발 환경과 실행 방법 [ 목차 ] 1. 웹 브라우저 2).개발자 도구 3. 콘솔 4. Node.js 5. 내장 터미널 6. code runner 확장 플러그인 1. 웹 브라우저 1) 구글 크롬 브라우저를 사용 2) 크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있기 때문 2. 개발자 도구 1) 크롬 브라우저가 제공하는 개발자 도구는 자바스크립트 개발에 필수적인 강력한 도구 2) 브라우저에 기본 내장되어 있기에 별도의 설치가 필요 없으며 F12를 이용해 실행 가능 3. 콘솔 1) 자바스크립트 코드에서 에러가 발생하여 애플리케이션이 정상적으로 동작하지 않을 때 우선적으로 살펴볼 곳 2) 구현 단계에서 디버깅을 실행하는 것보다 간편하게 값을 확인하며 개발을 진행가능 3) 자바스크립트 코드를 직접 입력하여 그..
1장. 자바스크립트란? [ 목차 ] 1. 자바스크립트의 탄생 2. 자바스크립트의 파편화와 표준화 3. 자바스크립트의 성장과 역사 4. JavaScript와 ECMAScript 5. 자바스크립트의 특징 1. 자바스크립트의 탄생 1) 넷스케이프 커뮤니케이션즈가 정적인 html을 동적으로 표현하기 위해 개발 2) Mocha -> LiveScript -> JavaScript 로 이름이 변경 3)이후 자바스크립트의 파생 버전 JScript가 출시 2. 자바스크립트의 파편화와 표준화 1) JScript와 자바스크립트가 표준화되지 못하고 적당히 호환 2) 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트의 필요성이 나타남 3) 표준화된 자바스크립트는 상표문제로 ECMAScript로 명명 3. 자바스크립트의 성장과 역사 1) 초창기 ..
19장. 반응형 레이아웃 [ 목차 ] 1. 레이아웃의 문제점 2. viewpoint meta tag 3. @media 4. 해상도 구분에 따른 색 변화 예제 5. Responsive Navigation Bar - Smartphone 1. 레이아웃의 문제점 1) 18장의 레이아웃은 화면폭을 좁힐 때 화면이 망가지는 단점이 존재 2) 이는 HTML 요소에 고정폭을 지정하여 가로 스크롤을 발생시키지 않으면 해결이 어려움 3) 모바일과 같이 작은 해상도의 디바이스에서 접근시 하면이 너무 작아서 가시성에 문제가 발생 2. viewpoint meta tag 1) viewpoint(웹페이지의 가시영역)를 이용하여 디바이스의 특성, 화면크기 등을 고려하여 최적화된 웹페이지 제공가능 2) meta tag는 브라우저 혹은 검색엔진최적화를 위해 검..
18장. 레이아웃 [ 목차 ] 1. Header & Navigation Bar 2. Section % Aside 3. footer 4. 최종 1. Header & Navigation Bar 1) 웹사이트의 필수 구성 요소로, 기본적으로 링크들의 리스트이기 때문에 ul, li, tag를 이용하여 작성 2) header 요소에 화면폭 만큼의 width, 고정 height를 지정 3) background-color와 box-shadow 효과를 추가 4) float 프로퍼티를 이용하여 Navigation bar를 우측정렬 5) a tag height를 logo image height와 같게 정하고 상하 margin 12px를 부여하여 logo image를 수직으로 중앙 정렬 6) inline 요소인 a tag의 margin을 정..
11-17. 간단 요약 [ 목차 ] 11장. 벤더 프리픽스 12장. 그림자 13장. 그레이디언트 14장. 트랜지션 15. 애니메이션 16. 트랜스 폼 17. 웹디자인 타이포그래피 11장. 벤더 프리픽스 1) css 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위한 것 https://poiemaweb.com/css3-vendor-prefix 12장. 그림자 1) 텍스트나 요소에 그림자 효과를 부여하기 위한 프로퍼티 선언 2) text-shadow : 텍스트에 그림자 효과를 부여 3) box-shadow : 요소에 그림자 효과를 부여 https://poiemaweb.com/css3-shadow 13장. 그레이디언트 1) 2가지 이상의 색상을 ..
10장. 스타일의 상속과 적용 우선 순위 [ 목차 ] 1. 상속 2. 캐스캐이딩 3. 중요도 4. 명시도 5. 선언순서 1. 상속 1) 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것 2) 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 함 3) 모든 프로퍼티가 상속되는 것은 아님 4) 상속 받지 않는 button의 경우 빨간색을 물려받지 않음 5) border, padding은 상속받지 않는 요소로 하위 요소에 적용되지 않음 6) 상속되지 않는 경우, inherit 키워드를 사용하면 명시적으로 상속받게 할 수 있음 2. 캐스캐이딩 1) 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있음 2) CSS 끼리의 충동을 피하기 위한 적용 우선순위가 필요한데 이를 캐스캐이딩이라 지칭..
9장. 요소 정렬 [ 목차 ] 1. float 프로퍼티 2. 정렬 3. width 4. float 프로퍼티가 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 문제 5. float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상반영 되지 않는 문제 1. float 프로퍼티 1) 주로 레이아웃을 구성할 대 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법 2) flexbox 레이아웃을 사용한다면 더 간단히 정렬 가능하지만 이를 지원하지 않는 IE를 고려한다면 float 프로퍼티 사용 3) float 프로퍼티는 본래 이미지 주위를 텍스트로 감싸기 위해 만들어진 것 4) 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것 5) 요소의 위치를 고정시키는 pos..
8장. 요소의 위치 정의 [ 목차 ] 1. position 프로퍼티 2. static 기본위치 3. relative 상대위치 4. absolute 절대위치 5. fixed 고정위치 6. z-index 프로퍼티 7. overflow 프로퍼티 1. position 프로퍼티 1) 요소의 위치를 정의 2) top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정 2. static 기본위치 1) position 프로퍼티의 기본값으로 값을 지정하지 않았을 때와 같음 2) 기본적인 요소 배치 순서에 따라 위, 아래, 왼쪽, 오른족 순서로 배치 3) 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치 4) 이미 설정된 position을 무력화하기 위해 사용될 수 있음 5) 좌표 프로퍼티(top..
7장. 폰트와 텍스트 [ 목차 ] 1. font-size 프로퍼티 2. font-family 프로퍼티 3. font-style / font-weight 프로퍼티 4. line-heigter 프로퍼티 5. letter-spacing 프로퍼티 6. text-align 프로퍼티 7. text-decoration 프로퍼티 8. white-space 프로퍼티 9. text-overflow 프로퍼티 10. world-wrap 프로퍼티 11. word-break 프로퍼티 1. font-size 프로퍼티 1) 텍스트의 크기를 정의' 2. font-family 프로퍼티 1) 폰트를 지정하는 것으로, 해당 폰트가 저장되어 있지 않으면 적용 불가 2) 여러 개를 동시에 지정 가능 3) 첫번째로 지정한 폰트가 없을 경우 다음 지정된 폰트를 적용하..
6장. 백그라운드 [ 목차 ] 1. background-image 프로퍼티 2. background-repeat 프로퍼티 3. background-size 프로퍼티 4. background-position 프로퍼티 5. background-color 5. background-color 1. background-image 프로퍼티 1) 요소에 배경 이미지를 지정 2. background-repeat 프로퍼티 1) 배경 이미지의 반복을 지정 2) 수직, 수평 또는 수직과 수평 모두의 반복을 지정 가능 3) 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우며, 이는 background-repeat 프로퍼티의 기본 값이 repeat이기 때문 4) x축으로만 배경이미지를 반복할 경우 backgro..
5장. display, visibility, opacity 프로퍼티 [ 목차 ] 1. display 프로퍼티 2. block 레벨 요소 3. inline 레벨 요소 4. inline-block 레벨 요소 5. visibility 프로퍼티 6. opcity 프로퍼티 1. display 프로퍼티 1) layout 정의에 자주 사용되는 중요한 프로퍼티로 상속되지 않음 2) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 block 또는 inline 특성을 보유 3) block : block 특성을 가지는 소요 4) inline : inline 특성을 가지는 요소 5) inline-block : inline-block 특성을 가지는 요소 6) none : 해당 요소를 화면에 표시하지 않음 2. block 레벨 요소 1) 항상 새로운 라인에서 시작 2) 화면 크기..
4장. 박스 모델 [ 목차 ] 1. 박스 2. width/height 프로퍼티 3. margin/padding 프로퍼티 4. border 프로퍼티 5. box-sizing 프로퍼티 1. 박스 1) 콘텐츠, 패딩, 테두리, 마진으로 구성 2) 브라우저는 박스 모델의 크기와 프로퍼티, 위치를 근거로하여 랜더링을 실행 3) 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 css프로퍼티를 통해 스타일과 위치, 정렬을 지정하는 것 4) content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역으로 width, height 프로퍼티를 보유 5) padding : 테두리 안쪽에 위치하는 요소의 내부 여백영역으로, pdding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명. 요소에 적용된 배경의 컬러, 이미지는 ..
3장. CSS 프로퍼티 값의 단위 [ 목차 ] 1. 키워드 2. 크기 단위 3. px 4. % 5. em 1. 키워드 1) 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재 2) ex. display의 경우 block, inline, inline-block, none 2. 크기 단위 1) CSS에서 사용하는 대표적 크기 단위는 px, em, % 2) cm, mm, inch도 존재 3) 대부분 브라우저 포트 사이즈의 기본값은 16px, 1em, 100% 3. px 1) 픽셀단위로, 1px는 화소1개 크기를 의미 2) 디바이스 해상도에 따라 상대적인 크기를 가지며, 제각각이기에 픽셀 기준 단위는 정확하지 않음 3) 대부분의 브라우저는 1px를 1/96 인치의 절대단위로 인식 4) 요소의 크기나 이미지의 크기 지정에 주로 사용 4. % 1) ..
2장. CSS 셀렉터 [ 목차 ] 1. 복수의 셀렉터 지정 2. 전체 셀렉터 3. 태그 셀렉터 4. ID 셀렉터 5. 클래스 셀렉터 6. 어트리뷰트 셀렉터 7. 복합 셀렉터 8. 가상 클래스 셀렉터 9. UI 요소 상태 셀렉터 10. 구조 가상 클래스 셀렉터 11. 구조 가상 콜렉트 셀렉터 - 특정 위치 12. 부정 셀렉터 13. 정합성 체크 셀렉터 14. 가상 요소 셀렉터 1. 복수의 셀렉터 지정 1) 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표로 구분 2. 전체 셀렉터 1) * : HTML 문서 내의 모든 요소를 선택 3. 태그 셀렉터 1) 지정된 태그명을 가지는 요소를 선택 4. ID 셀렉터 1) #id 어트리뷰트 값 : id 어트리뷰트 값(중복될 수 없는 유일한 값)을 지정하여 일치하는 요소를 선택하는 것 5. ..
1장. CSS 기본문법 [ 목차 ] 1. CSS 2. Selector 선택자 3. Property 속성 4. Value 값 5. HTML과 CSS의 연동 6. Reset CSS 1. CSS 1) HTML이나 XML과 같은 구조화된 문서를 화면, 종이에 어떻게 렌더링 할 것인지 정의하기 위한 언어 2) HTML은 정보의 구조화, CSS는 스타일링의 정의라는 별개의 문법을 갖는 별개의 언어 3) HTML없이 단독으로 존재하는 CSS는 의미가 없음 2. Selector 선택자 1) 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공되는 수단 2) 아래 구문을 Rule Set이라 하며, 셀렉터에 의해 선택된 HTML요소를 어떻게 렌더링할 것인지 브라우저에 지시 3. Property 속성 1) 셀렉터로 HTML 요소..
10장. 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 [ 목차 ] 1. 기존의 태그 2. 현재의 태그 1. 기존의 태그 1) 공간 분할 태그는 div, span, table이 존재 2) 과거는 주로 table과 dib를 사용 3) div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않음 2. 현재의 태그 1) div 태그의 단점을 보완하기 위해 새로운 태그를 사용 2) IE에서 작동하지 않음에 주의 3) 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할 1) header : 헤더 2) nav : 내비게이션 3) aside : 사이드에 위치하는 공간 4) section : 본문의 여러 내용을 포함하는 공간 5) article : 본문의 주 내용이 들어가는 공간 6) footer : 푸터

티스토리툴바