[Do it! HTML+CSS+자바스크립트 웹 표준의 정석]

01 웹은 어떻게 움직일까02 웹 개발 시작하기03 HTML 기본 문서 만들기04 웹 문서에 다양한 내용 입력하기05 입력 양식 작성하기웹 사이트에 어울리는 여러 장치와 기능을 만드는 것인터넷의 다양한 서비스를 사용할 수 있게 해주는 출발점으로 웹을 사용함이미 일상에

02-1 웹 개발, 어디서부터 시작할까02-2 웹 개발 환경 설정하기웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용웹 요소를 적절하게 배

03-1 HTML과 첫 만남03-2 HTML의 구조 파악하기03-3 HTML 파일 만들기03-4 웹 문서의 구조를 만드는 시맨틱 태그문서를 서로 연결해주는 링크웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것 의미웹 브라우저가 제목, 텍스트

목차 04-1 텍스트 입력하기 04-2 목록 만들기 04-3 표 만들기 04-4 이미지 삽입하기 04-5 오디오와 비디오 삽입하기 04-6 하이퍼링크 삽입하기 04-1 텍스트 입력하기 제목을 나타내는 \ 태그 제목 에서 h는 제목을 뜻하는 heading을 줄인 말 \

목차05-1 폼 삽입하기05-2 사용자 입력을 위한 input 태그05-3 input 태그의 주요 속성05-4 폼에서 사용하는 여러 가지 태그하나의 웹 페이지 안에서도 여러 가지 폼을 사용폼을 만드는 가장 기본적인 태그<form \[속성="속성값"]>여러 폼 요소

목차06-1 스타일과 스타일 시트06-2 css 기본 선택자 알아보기06-3 캐스케이딩 스타일 시트 알아보기HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴HTML이 아닌 CSS를 사용하는 이유웹

07-1 글꼴 관련 스타일07-2 웹 폰트와 아이콘 폰트 사용하기07-3 텍스트 관련 스타일07-4 목록 스타일07-5 표 스타일글꼴 지정 방법: \\, \\, \\ 같은 텍스트 요소에서 사용여러 글꼴 지정 시: 쉼표(,)로 구분해 순서대로 대체 개능두 단어 이상의 글

08-1 CSS와 박스모델08-2 테두리 스타일 지정하기08-3 여백을 조절하는 속성08-4 웹 문서의 레이야웃 만들기08-5 웹 요소의 위치 지정하기 한 줄 전체를 차지, 기본 너비는 100%다른 요소가 양옆에 올 수 없음대표 태그: <div>, <p>,

09-1 배경색과 배경 범위 지정하기09-2 배경 이미지 지정하기09-3 그러데이션 효과로 배경 꾸미기 background-color 속성으로 요소의 배경색을 설정색상 지정 방식:이름 (green)16진수 ( - rgb(), rgba() (투명도 포함 가능)글자 스타

10-1 반응형 웹 알아보기10-2 반응형 요소 만들기10-3 미디어 쿼리 알아보기웹 요소를 화면 크기에 맞게 재배치하고 표시 방법만 바꾸어 사이트를 구현해줌스마트폰 화면에서 실제 내용이 표시되는 영역<meta name="viewport" content="속성1=

11-1 배치를 위한 기본 속성 살펴보기11-2 반응형 웹을 위한 속성 살펴보기배치할 요소를 플렉스 컨테이너로 묶어 주어야 함플렉스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 레이아웃 지정플렉스 컨테이너의 주축과 방향을 지정하는 속성플렉스 컨테이너

12-1 CSS 그리드 레이아웃 알아보기12-2 그리드 라인과 템플릿 영역으로 배치하기 그리드 항목을 배치할 때 가로와 세로 방향을 모두 사용배치할 항목을 컨테이너로 묶어 주어야 함그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소를 묶는 그리드 컨테이너로

13-1 연결 선택자13-2 속성 선택자13-3 가상 클래스와 가상 요소13-4 CSS 함수 살펴보기하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하위 선택자는 상위요소와 하위요소를 공백으로 구분함기본형 상위요소 하위요소예) section p { ..

14-1 트랜스폼 알아보기14-2 트랜지션 알아보기14-3 애니메이션 알아보기 트랜스폼을 적용하기 위해선 transform 속성과 트랜스폼 함수 이름을 함께 작성기본형 transform: 함수웹 요소를 이동시키는 함수는 transform()예) photo { trans

15-1 자바스크립트로 무엇을 할까15-2 웹 브라우저가 자바스크립트를 만났을 때15-3 자바스크립트 용어와 기본 입출력 방법15-4 자바스크립트 스타일 가이드 웹의 요소를 제어함웹 애플리케이션을 만듦다양한 라이브러리를 사용할 수 있음서버 개발을 할 수 있음<sc