길벗 학습단 16기 - HTML+CSS+자바스크립트 - 2주차 학습인증

 

코딩 자율학습 HTML + CSS + 자바스크립트 - 예스24

 

 

2주차	6일	7일	8일	9일	10일
목차	5장 CSS 선택자 다루기 5.1 기본 선택자 사용하기 5.2 조합 선택자 사용하기 5.3 가상 요소 선택자 사용하기 5.4 가상 클래스 선택자 사용하기 5.5 다양한 선택자 조합하기	6장 CSS 필수 속성 다루기 6.1 CSS의 특징 살펴보기 6.2 텍스트 속성으로 텍스트 꾸미기 6.3 박스 모델을 구성하는 속성 다루기 6.4 배경 속성으로 요소의 배경 설정하기	6장 CSS 필수 속성 다루기 6.5 위치 속성으로 HTML 요소 배치하기 6.6 전환 효과 속성 적용하기 6.7 애니메이션 속성으로 전환 효과 제어하기 6.8 변형 효과 적용하기 6.9 웹 폰트와 아이콘 폰트 사용하기	7장 효과적인 레이아웃을 위한 CSS 속성 다루기 7.1 플렉스 박스 레이아웃으로 차원 레이아웃 설계하기 7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기 7.3 반응형 웹을 위한 미디어 쿼리 사용하기	8장 자바스크립트 시작하기 8.1 자바스크립트 코드 작성 방법 8.2 프로그래밍 시작 전 알아 두기

 

5장 CSS 선택자 다루기

5.1 기본 선택자 사용하기

5.1.1  전체 선택자

HTML에서 사용할 수 있는 모든 요소를 한번에 선택자로 지정. * 기호를 사용해 표시.

*{/* CSS 코드 */}

 

5.1.2 태그 선택자

5.1.3 아이디 선택자

id 속성값으로 선택자 지정.  속성값 앞에는 # 기호를 붙임.

#id속성값{/* CSS 코드 */}

 

5.1.4 클래스 선택자

HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정.  속성값 앞에 . 기호를 붙임.

.class속성값{/* CSS 코드 */}

5.1.5 기본 속성 선택자

HTML 태그에 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법

[속성]{/* CSS 코드 */}
[속성=값]{/* CSS 코드 */}

5.1.6 문자열 속성 선택자

태그가 가진 특정 문자열과 일치하는 요소를 선택자로 지정.  => 많이 사용되지 않음.

5.2 조합 선택자 사용하기

5.2.1 그룹 선택자

여러 선택자를 하나의 그룹 지을 때 사용.  선택자의 선택자는  , 기호로 구분.

선택자1, 선택자2, ..., 선택자n{/* CSS 코드 */}

5.2.2 자식 선택자

5.2.3 하위 선택자

5.2.4 인접 형제 선택자

5.2.5 일반 형제 선택자

5.3 가상 요소 선택자 사용하기

5.4 가상 클래스 선택자 사용하기

5.4.1 링크 가상 클래스 선택자

5.4.2  동적 가상 클래스 선택자

5.4.3 입력 요소 가상 클래스 선택자

5.4.4 구조적 가상 클래스 선택자

5.5 다양한 선택자 조합하기

 

6장 CSS 필수 속성 다루기

6.1 CSS의 특징 살펴보기

6.1.1 기본 스타일 시트

6.1.2 적용 우선순위와 개별성

6.1.3  상속

6.1.4 단위

6.1.5 색상 표기법

 

6.2 텍스트 속성으로 텍스트 꾸미기

6.2.1 font-family 속성

6.2.2 font-size 속성

6.2.3 font-weight 속성

텍스트의 굵기 지정

 6.2.4 font-style 속성

글꼴의 스타일: normal, italic, oblique(기울임)

6.2.5 font-variant 속성

크기가 작은 대문자 영문 텍스트.

6.2.6 color 속성

 

6.2.7 text-align 속성

텍스트 정렬

6.2.8 text-decoration 속성

 

6.2.9 letter-spacing 속성

자간격 조절

6.2.10 line-height 속성

텍스트 줄 높이 지정

6.3 박스 모델을 구성하는 속성 다루기

6.3.1 margin 영역

6.3.2 border 영역

6.3.3 padding 영역

 

6.3.4 content 영역

6.3.5 박스 모델의 성격과 display 속성

 

6.4 배경 속성으로 요소의 배경 설정하기

6.4.1 background-color 속성

6.4.2 background-image 속성

6.4.3 background-repeat 속성

배경 크기가 이미지 보다 크면 이미지 자동 반복

6.4.4 background-size 속성

6.4.5 background-position 속성

6.4.6 background-attachement 속성

6.4.7 background 속성으로 한 번에 지정하기

6.5 위치 속성으로 HTML 요소 배치하기

6.5.1 position 속성

 

6.5.2 float 속성

6.5.3 clear 속성

6.6 전환 효과 속성 적용하기

 

6.7 애니메이션 속성으로 전환 효과 제어하기

 

6.8 변형 효과 적용하기

6.9 웹 폰트와 아이콘 폰트 사용하기

 

7장 효과적인 레이아웃을 위한 CSS 속성 다루기

7.1 플렉스 박스 레이아웃으로 차원 레이아웃 설계하기

 

7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기

 

7.3 반응형 웹을 위한 미디어 쿼리 사용하기

반응형 웹(responsive web)을 만드는 주요 기술 중 하나가 미디어 쿼리(media query).

7.3.1 미디어 쿼리란

사이트에 접속하는 미디디어 타입과 특징, 해성도에 따라 다른 스타일 속성을 적용하게 하는 기술.  크롬 브라우저 개발자 도구 상단에 Toggle Device toolbar 아이콘으로 모바일 기기로 보는 것처럼 화면이 전환됨.

7.3.2 뷰포트 알아보기

웹 퍼이지가 접속한 기기어세 보이는 실제 영역의 크기

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7.3.2 미디어 쿼리의 기본 문법

@media <not|only> <mediatype> and (<media feature>) <and|or|not> (<media feature>){
 /* CSS 코드 */
}

8장 자바스크립트 시작하기

8.1 자바스크립트 코드 작성 방법

8.1.1 HTML 파일과 자바스크립트 연결하기

• 내부 스크릡트 방법

• 외부 스크립트 방법

8.1.2 자바스크립트 코드 실행하기

•  콘솔창 사용하기

• 확장 프로그램 사용하기

Node.js 설치 (https://nodejs.org/ko)

8.2 프로그래밍 시작 전 알아 두기

8.2.1 주석

// 한 줄 추석은 슬래시 2개로 표시

 

/*
	자바스크립트는 여러 줄 주석도 
	간단하게 처리할 수 있습니다.
*/

 

8.2.1 자바스크립트 오류 확인 방법