HighLight in your life~

'레이아웃을 구성하는 CSS 박스 모델' 에 대한 예제 파일들 입니다.

출판사 이지스퍼블리싱(이지스퍼블리싱 (easyspub.co.kr))에서 출판한 '한 권으로 끝내는 웹 기본 교과서' HTML+CSS+자바스크립트 웹 표준의 정석에 대한 무료 동영상 강의 입니다.

06-1 CSS의 기본

https://youtu.be/IBMvbL3G1yo?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

06-2 CSS의 기본

https://youtu.be/QC6e80wLrLU?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

07-1 텍스트를 표현하는 다양한 스타일

https://youtu.be/-1N3aJ2ExkA?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

07-2 텍스트를 표현하는 다양한 스타일

https://youtu.be/rJcYXvnWdoQ?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

08-1 레이아웃을 구성하는 CSS 박스 모델

https://youtu.be/N1splqbPYTo?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

08-2 레이아웃을 구성하는 CSS 박스 모델

https://youtu.be/tzVYfwA6cec?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 

09-1 이미지와 그러데이션 효과로 배경 꾸미기

https://youtu.be/20T5syAEx9k?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

09-2 이미지와 그러데이션 효과로 배경 꾸미기

https://youtu.be/EtC6E6K6ibU?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

10 CSS 고급 선택자

https://youtu.be/EqePYz6ikDs?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

11-1 트랜지션과 애니메이션

https://youtu.be/STpqz5d9N3U?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

11-2 트랜지션과 애니메이션

https://youtu.be/mp_pUWesUOU?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

12-1 반응형 웹과 미디어 쿼리

https://youtu.be/tRVLuDxtrH8?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

12-2 반응형 웹과 미디어 쿼리

https://youtu.be/5B2sBqlAdYg?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 

12-3 반응형 웹과 미디어 쿼리

https://youtu.be/dSdvumCRwKM?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

13 자바스크립트와 첫 만남

https://youtu.be/v1mwP4X9zEk?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-1 자바스크립트 기본 문법

https://youtu.be/vZu3xbw1-JA?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-2 자바스크립트 기본 문법

https://youtu.be/u9b1VjdSocQ?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-3 자바스크립트 기본 문법

https://youtu.be/Z3bQjfObI5Y?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-4 자바스크립트 기본 문법

https://youtu.be/TETbGBrzDxQ?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

15-1 함수와 이벤트

https://youtu.be/Nc1S_rwLekE?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

15-2 함수와 이벤트

https://youtu.be/G0dUJ9nUhn0?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

15-3 함수와 이벤트

https://youtu.be/iVcDf1Zkf-0?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

16-1 자바스크립트와 객체

https://youtu.be/7JQJxq03gbo?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

16-2 자바스크립트와 객체

https://youtu.be/yFE01Mev_i4?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

17-1 문서 객체 모델(DOM)

https://youtu.be/XgKc2mIRZ8c?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

17-2 문서 객체 모델(DOM)

https://youtu.be/j6LPaKWr2fw?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

17-3 문서 객체 모델(DOM)

https://youtu.be/xYV4ucs5sSA?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 

초보자를 위한 완벽정리, 프론트엔드 개발자 입문 : CSS, 완벽한 포트폴리오를 위한 지름길 , 너의 웹사이트가 못생겼다면 극건 CSS 탓


HTML에 CSS 입히기
1. 태그에 직접적으로 주는 방법
2. id를 이용하는 방법
3. class를 이용하는 방법 -> 가장 일반적인 방법

CSS
.text-red{
 color:red;
}

HTML
<div>This text color will b red</div>

CSS+HTML
<div class="text-red">This text color will be red </div>

replit.com => 온라인 코딩 툴

요소 안쪽에 공간은 padding, 바깥쪽 공간은 margin

www.w3schools.com/cssref/

-----------------------------------------------------------------------------------------------------------------------------

(부트캠프 강사의 유료강의)코딩, 뭐부터 배울지 모르겠다면 여기부터 시작하면됨, 초보자를 위한 HTML강의, 바로 코딩 가능