Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 폼 만들기 - 사용자가 직접 입력하고 웹사이트에 정보를 보낼 수 있는 요소를 모두 폼이라고 함 - 폼과 관련된 작업은 모두 데이터베이스를 기반으로 작동 - 텍스트 박스, 버튼 등 폼의 형태는 html로 제작하지만 입력된 정보들은 asp나 php, jsp 같은 서버 프로그래밍을 이용해 처리 - 폼 요소 - 입력받은 자료를 어떤 방식으로 서버에 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 등을 지정 method 사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 념겨줄 것인지 지정 get: 데이터를 256~4096byte까지 서버로 넘길 수 있음, 주소 표시줄에 사용자가 입력한 내용이 그..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 하이퍼링크 삽입하기 - href 속성을 이용해 연결할 파일이나 링크할 주소를 씀 - 닫는 태그 필수 - target 속성으로 새로운 탭으로 열릴지 말지를 결정 - 를 통해 이미지에도 링크를 걸 수 있음 자세한 정보보기 태그 정리 n에는 1~6까지 사용할 수 있으며, 숫자가 커질수록 글자 크기가 작아짐 텍스트 단락: 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄을 바꿈 줄바꿈: 텍스트 단락 중 원하는 위치에서 줄바꿈, 닫는태그 없음 내용 인용: 다른 내용보다 들여쓰고 단락으로 표시 중요한 텍스트를 굵게 표시, 화면 낭독기에서 강조해 읽어줌 중요하지는 않지만 굵게 표시 중요한 텍스트를 기울게 표..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 멀티미디어 삽입하기 - html 초기 버전부터 사용해 대부분 브라우저에서 사용 가능함 - src="파일경로" - width, height 옵션으로 사이즈 조절 가능 - mp4, webm 확장자, mp3, mp4, m4a 확장자 지원 , - controls : 플레이어 화면에 컨트롤바를 표시하는 속성 - autoplay : 오디오나 비디오를 자동으로 실행하는 속성 - loop : 오디오나 비디오를 반복재생하는 속성 - muted : 오디오나 비디오의 소리를 제거하는 속성 - preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정하는 속성, auto, metadata, ..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 이미지 삽입하기 - 태그 안에서 사용되는 태그는 src와 alt가 있음 - src="이미지 파일 경로" - alt="대체텍스트" - 이미지가 제대로 표시되지 않는 경우 설정된 대체텍스트가 뜸 - width, height 속성을 통해 이미지 사이즈 조절 - 사이즈 조절 시 %나 px 단위로 표현함

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 표 만들기 , - : 표의 시작과 끝을 알려주는 태그, 이 안에 표와 관련된 태그를 모두 넣음 - : 표에 제목을 붙이고 싶을 때 이용, 표의 위쪽 중앙에 제목이 표시됨 표 제목 , , - : 행을 만듬 - : 행 안의 셀을 만듬 - : 제목 셀을 만들 때 대신 이용 표 제목 1행 1열 1행 2열 2행 1열 2행 2열 , , - : 테이블의 제목 - : 테이블의 본문 - : 테이블의 요약 표 제목 1열 2열 1행 1열 1행 2열 2행 1열 2행 2열 rowspan, colspan - 나 태그에 이용하는 속성 - rowspan="합칠 셀의 개수" : 행을 합치는 속성 - colspan="합칠 셀의 개..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 목록 만들기 , - : order list의 줄임말로 태그 사이에 를 사용함, type 속성을 이용해 순서를 나타낼 방식을 정할 수 있음 start 속성을 이용해 몇번째 부터 시작할지 정할 수 있음 - : list의 줄임말로 태그 사이에 주로 사용함 첫번째 목록 두번째 목록 , - : unordered list의 줄임말로 태그 사이에 태그를 이용하면 bullet으로 목록을 나타냄 첫번째 목록 두번째 목록 순서 없는 목록 순서 없는 목록2 , , - : description list의 약자로, 한쌍의 , 태그를 넣음 - : 설명할 이름을 작성 - : 설명할 내용 작성 첫번째 목록 두번째 목록 순서 없..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 텍스트 입력하기 - n에는 1부터 6까지의 숫자가 들어감 - 닫는태그 반드시 필요 h1 태그 h2 태그 h3 태그ㄴ - 텍스트 앞뒤로 빈줄이 생기며 텍스트 단락이 만들어짐 - 닫는 태그 반드시 필요 * 편집기에서 줄을 바꾸더라도 웹브라우저에서는 한줄로 표시됨 /* p태그 적용 X */ p태그 실습 p태그는 텍스트 단락을 만들 때 이용합니다. /* p태그 이용 */ p태그 실습 p태그는 텍스트 단락을 만들 때 이용합니다. - 줄바꿈 태그 - 단독으로 사용하는 태그로 닫는 태그 필요 없음 * 빈줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시하나 실제로 단락이 만들어진 것이 아님 * CSS를 사용해..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. HTML (HyperText Markup Language) HyperText : 문서를 서로 연결해주는 링크 Markup : 표시한다 태그를 이용해 제목, 텍스트, 표 등을 나타냄 기본 기능은 웹 브라우저에 보여줄 내용을 마크업하고 문서끼리 링크하는 것 글자를 보기좋게 꾸미거나 문서의 배치를 다양하게 하는 것은 CSS의 역할 프런트엔드 웹개발 HTML CSS JS - 현재 문서가 html5로 작성됨 - 웹문서의 시작과 끝을 나타내는 태그 - 뒤에는 아무것도 없어야 함 - lang="언어"를 이용해 문서에서 사용할 언어 지정 가능 - 웹브라우저가 웹문서를 해석하는데 필요한 정보를 입력하는 부분 - :..

Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+JS 웹표준의 정석 으로 웹개발 공부 시작함. 웹개발? 정적 사이트 동적 사이트 정보를 보여주는 방식의 웹사이트 이용자를 위한 다양한 서비스가 제공되는 웹사이트 포폴 사이트, 기업 홍보 사이트 등 영화관, 쇼핑몰 등의 사이트 웹개발의 목적은 주로 동적 사이트를 제작하기 위함이며, 사용자에게 제공할 기능과 서비스를 모두 담아야 함 서버와 클라이언트 서버 클라이언트 클라이언트 측에서 원하는 정보를 서버에서 찾아냄 전달받은 정보 시각화 프론트엔드와 백엔드 프론트 엔드 백 엔드 웹브라우저 화면에 보이는 것을 다룸 DB 설계 및 데이터 처리 모바일 웹 브라우저용 사이트 개발을 위해서는 필수 자바, PHP, 파이썬 등 다양한 언어 사용 HTML, CSS,..