본문 바로가기

Study/HTML | CSS

(4)

[05] 입력 양식 작성하기 폼 삽입하기 폼 웹사이트에서 사용자에게 정보를 받아들이기 위한 형식(사용자 정보를 입력할 수 있게 만든 형식) ex) 검색창, 로그인 창(아이디, 비밀번호, 언어변경, 확인 버튼 등) ~ 사용 웹브라우저가 서버로 넘겨주는 역할만, 서버에 있는 프로그램이 직접 처리 action="실행할 프로그램 이름" 하나의 폼 안에 여러 구역 나누어 표시: 태그 사용 태그는 태그로 묶은 그룹에 제목을 붙일 수 있음 그룹 이름 아이디 : 비밀번호 : 태그는 태그와 같은 폼 요소에 레이블을 붙일 때 사용 예제2 (더보기 클릭) 더보기 레드향 주문하기 상품 선택 주문할 상품을 선택해 주세요. 선물용 3kg 개 선물용 5kg 개 가정용 3kg 개 가정용 5kg 개 포장 선택 선물 포장 선물 포장 안 함 배송 정보 이름 배송 주..

[04] 웹 문서에 다향한 내용 입력하기 제목을 나타내는 태그 ~ n의 자리에는 1~6의 숫자가 들어감 텍스트를 크기별로 표시할 수 있음(이 가장 큰 제목) 텍스트 단락을 만드는 태그 ~ : 하나의 단락(하나의 덩어리)을 만듦 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 알맹이가 굵고 통통해 식감이 좋으며 비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 레드향 샐러드 레시피 재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 상품 구성 : 강조, 이텔릭체 : break, 줄바꿈 (태그가 들어가는 위치에서 줄 바꾸기 때문에 닫는 태그 없음) : 강조, 진하게 표시 : 가로줄 넣어줌..

[03] HTML 기본 문서 만들기 HTML - Hyper Text Mark up Language - HT: 웹에서 자유롭게 오갈 수 있는 언어 - M: 텍스트뿐만 아니라 이미지, 영상 등을 표시. 마크업에 사용하는 꼬리표를 '태그(tag)'라고 함 → 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 기본 구조 프런트엔드 웹 개발 HTML CSS 자바스크립트 ① : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻 ② ~ : 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 태그를 만나면 까지 소스를 읽어 화면에 표시 ③ : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분 ④ ~ : 실제로 웹 브라우저 화면에 나타나는 내용. (앞으로 공부해야할 HTML 태그는 대부분 태그 안에 들어있음) 웹 문서 만들기 Do ..

[01/02] 웹 개발 시작 전 웹 개발의 기본 웹 문서의 뼈대를 만드는 HTML 웹 문서의 뼈대를 만듦 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속 HTML에서 약속한 표기법을 사용해 문서를 작성해야함 웹 문서를 꾸미는 CSS 웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법 다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 함 사용자 동작에 반응하는 자바스크립트 사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술 자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉬움 - 크롬 사용 - Visualstudio Code 사용 웹 문서 특징 - 소스 작성(VS Code)과 소스 결과 확인(웹 브라우저)이 각각 다른 프로그램에서 이루어진다. VS Code 코드 작성 후 바로 확인하는 라이브러리..

이전 1 다음

티스토리툴바