생활코딩 동영상, 예제 링크 모음

1수업 소개 190
- 학습목표이번 수업에서 다루게 될 내용과 목표를 이해한다.
- 동영상https://youtu.be/Ok0bBJPtgJI (02분 42초)
2CSS가 등장하기 전의 상황 191
- 학습목표CSS가 등장하기 이전에 HTML이 처한 상황과 한계를 이해하고 CSS의 필요성을 배운다.
- 동영상https://youtu.be/-OWx2vM4tLI (07분 28초)
- 예제【2-2-1】 <font> 태그를 이용해 글자 색을 빨간색으로 변경
3CSS의 등장 194
- 학습목표HTML에 CSS를 추가하는 방법을 이해하고 CSS의 중요성을 확인한다.
- 동영상https://youtu.be/L41Zjl7XANI (10분 44초)
- 예제【2-3-1】 코드를 복사하고 기존 코드는 주석으로 만들기
- 【2-3-2】 <style> 태그 추가
- 【2-3-3】 CSS를 이용해 글자 색을 빨간색으로 변경
- 【2-3-4】 CSS를 수정해 글자 색을 검은색으로 변경
4CSS의 기본 문법 199
- 학습목표이지에 CSS를 적용하는 두 가지 방법과 기본 문법을 이해한다.
- 동영상https://youtu.be/h0AlL9YI6bM (07분 07초)
- 예제【2-4-1】 style 속성을 이용해 글자 색을 빨간색으로 변경
- 【2-4-2】 CSS를 이용해 링크에 밑줄 없애기
- 【2-4-3】 현재 선택된 웹 페이지에만 링크에 밑줄 긋기
5혁명적 변화 204
- 학습목표CSS 학습의 의의와 CSS 학습이 가져다 줄 변화를 이해한다.
- 동영상https://youtu.be/nC2-nJEXL2U (02분 52초)
6CSS 속성을 스스로 알아내기 206
- 학습목표검색을 통해 CSS 속성을 직접 찾아서 문제를 해결하는 방법을 익힌다.
- 동영상https://youtu.be/WcED6Ia1IY4 (08분 09초)
- 예제【2-6-1】 <style> 영역에 h1 선택자 추가
- 【2-6-2】 text-align 속성을 이용해 텍스트를 가운데 정렬
7CSS 선택자의 기본 213
- 학습목표CSS의 두 가지 중요한 토대인 효과와 선택자 가운데 선택자의 기초 문법과 특징을 배운다.
- 동영상https://youtu.be/8-rCMmamtDE (14분 51초)
- 예제【2-7-1】 인라인으로 적용한 style 속성 제거
- 【2-7-2】 글자를 검은색으로 변경하는 CSS 제거
- 【2-7-3】 웹 페이지의 모든 <a> 태그를 검은색으로 지정
- 【2-7-4】 태그에 class 속성 지정
- 【2-7-5】 saw라는 class 값을 가진 태그의 글자색 변경
- 【2-7-6】 saw를 .saw로 변경
- 【2-7-7】 현재 머물고 있는 페이지의 링크를 빨간색으로 변경
- 【2-7-8】 CSS 코드에서 .active와 .saw의 순서 변경
- 【2-7-9】 active를 ID 선택자로 옮기기
- 【2-7-10】 id 선택자
- 【2-7-11】 태그 선택자와 클래스 선택자의 위치 변경
8박스 모델 224
- 학습목표웹 사이트의 레이아웃을 설계할 때 사용되는 박스 모델을 이해한다.
- 동영상https://youtu.be/MLjCVUspcDo (16분 20초)
- 예제【2-8-1】 box.html 파일 생성
- 【2-8-2】 CSS 부분에 링크 만들기
- 【2-8-3】 <h1> 태그와 <a> 태그에 테두리 그리기
- 【2-8-4】 코드의 중복 제거
- 【2-8-5】 코드의 중복 제거 2
- 【2-8-6】 box.html
- 【2-8-7】 콘텐츠와 테두리 사이에 여백 추가하기
- 【2-8-8】 <h1>CSS</h1> 태그 하나 더 추가
- 【2-8-9】 margin 속성 지정
- 【2-8-10】 margin 속성의 값 변경
9박스 모델 써먹기 237
- 학습목표8장에서 배운 박스 모델을 실제 웹 페이지에 적용하는 법을 익힌다.
- 동영상https://youtu.be/4ir8XAf7wxI (06분 24초)
- 예제【2-9-1】 <h1> 태그에 아래쪽 테두리 만들기
- 【2-9-2】 <h1> 태그의 margin 값 제거
- 【2-9-3】 <h1> 태그의 padding 값 지정
- 【2-9-4】 <ol> 태그에 오른쪽 테두리 만들기
- 【2-9-5】 <ol> 태그의 너비 지정
- 【2-9-6】 <ol> 태그의 margin 값 제거
- 【2-9-7】 <ol> 태그의 padding 값 지정
- 【2-9-8】 <body> 태그의 margin 값 제거
10그리드 소개 247
- 학습목표이지의 레이아웃을 설계하기 위한 그리드의 기본적인 사용법과 그리드를 사용할 때 참고할 수 있는 도구를 배운다.
- 동영상https://youtu.be/M1eQFIBY2vI (09분 53초)
- 예제【2-10-1】 grid.html 파일 생성
- 【2-10-2】 <div> 태그로 묶기
- 【2-10-3】 부피감을 확인하기 위해 <div> 태그에 테두리 지정
- 【2-10-4】 두 개의 <div> 태그를 감싸는 부모 태그 추가
- 【2-10-5】 부모 태그의 id 값 설정, 테두리를 분홍색으로 변경
- 【2-10-6】 두 개의 태그를 나란히 배치하기
- 【2-10-7】 ARTICLE 영역에 의미 없는 텍스트 넣기
11그리드 써먹기 255
- 학습목표예제 웹 사이트에 그리드를 실제로 적용하는 법을 익힌다.
- 동영상https://youtu.be/AL8RSY8rADY (08분 05초)
- 예제【2-11-1】 <div> 태그로 <h2> 태그와 <p> 태그 묶기
- 【2-11-2】 <div> 태그로 <ol> 태그와 <div> 태그 묶기
- 【2-11-3】 첫 번째 칼럼(<ol> 태그)과 두 번째 칼럼(<div> 태그)을 나란히 배치
- 【2-11-4】 <div>에 id를 지정하고, padding 설정
- 【2-11-5】 코드 정리하기
12미디어 쿼리 소개 263
- 학습목표반응형 웹 디자인을 위한 도구인 미디어 쿼리를 이해하고 기초적인 사용법을 익힌다.
- 동영상https://youtu.be/aA4xunvDWU8 (09분 16초)
- 예제【2-12-1】 mediaquery.html 파일 생성
- 【2-12-2】 미디어 쿼리의 개념(가짜 코드)
- 【2-12-3】 미디어 쿼리 적용(실제 코드)
13미디어 쿼리 써먹기 269
- 학습목표예제 웹사이트에 미디어 쿼리를 도입해서 다양한 화면 크기에 대응하는 법을 이해한다.
- 동영상https://youtu.be/qe3nSIg2k3Y (06분 08초)
- 예제【2-13-1】 미디어 쿼리 추가
- 【2-13-2】 너비가 800px보다 작을 때 grid 영역의 display 속성을 block으로 설정
- 【2-13-3】 너비가 800px보다 작을 때 목록 오른쪽에 있는 선 지우기
- 【2-13-4】 너비가 800px보다 작을 때 제목 아래에 있는 선 지우기
14CSS코드의재사용 276
- 학습목표중복된 CSS 코드를 재사용하는 방법을 익히고 코드 재사용이 가져다 주는 효과를 이해한다.
- 동영상https://youtu.be/djBrHjeitUo (11분 47초)
- 예제【2-14-1】 2.html의 <style> 태그를 1.html에 복사해서 붙여넣기
- 【2-14-2】 1.html에도 <div> 태그를 추가하고 id 속성 추가
- 【2-14-3】 style.css 파일 생성하고 <style> 태그의 내용 붙여넣기
- 【2-14-4】 <style> 태그를 지우고 <link> 태그로 CSS 파일 연결
15수업을 마치며 284
- 학습목표CSS 수업을 정리하고 CSS 수업의 의의를 이해한다.
- 동영상https://youtu.be/42Bps7nCx8I (02분 58초)