목록프론트개발 (5)
K_blueprint
오늘은 HTML5에서 텍스트를 꾸밀 수 있는 다양한 방법에 대해 정리해 보겠습니다:-) [텍스트]- 텍스트를 꾸미기에 앞서 텍스트의 출력 형태를 제어할 수 있는 여러 가지 명령어가 있다.text-indent : | ; >>> 들여 쓰기는 고정된 길이로 들여 쓰기는 텍스트 블록 전체 폭에 대한 비율로 들여 쓰기text-align : left | right | center | justify; >>> 정렬justify : 양쪽정렬center : 중앙정렬left, right : 왼쪽, 오른쪽 정렬text-decoration : none | underline | overline | line-through; >>> 텍스트 꾸미기underline : 밑줄line-through : 중간 줄 위의 텍스트의 출력 형태를..
목 차1. CSS3 스타일 시트 개요2. CSS3 스타일 시트 만들기1. CSS3 스타일 시트 개요- CSS3(Cascading Style Sheet)란, HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를 "스타일 시트(style sheet)"라고 한다. 그럼 간단한 스타일 HTML 코드에 h3 스타일의 영향을 받습니다! 저는 웹 프로그래밍에 관심이 많습니다. 위의 코드를 실행하게 되면 아래와 같은 브라우저가 출력되게 된다. - 위의 소스코드의 태그 안에 스타일 시트를 작성style 속성에 개별로 스타일 시트를 작성스타일 시트를 별도 파일(.CSS)로 작성하고 '' 혹은 '@import'로 불러와 사용- 여기서 3번의 '별도 파일을 통해..
목 차1. 텍스트 / 이미지 버튼 만들기2. 선택형 입력 만들기1. 텍스트 / 이미지 버튼 만들기- HTML5에서 버튼은 '' 태그 혹은, '' 태그로 만들 수 있으며, type속성으로 버튼의 다양한 타입을 지정할 수 있다.버튼의 문자열 - 위의 코드에서 확인할 수 있듯 5가지의 버튼 타입이 있고, 각 타입에 따른 예시 코드를 작성해 보자 ● type = "button"- 특별한 기능이 없는 '단순 버튼'으로 JS코드에서 사용된다.로그인 ● type = "submit"- 브라우저가 폼 데이터를 웹 서버로 전송할 수 있게 해주는 '제출 버튼'이다.제출 ● type = "reset"- 폼에 입력된 내용을 모두 '초기화(지움)하는 버튼'이다.초기화 ● type = "image" - 이미지 버튼을 만들 수 있..
목 차1. 웹 폼과 폼 요소(feat. 간단한 로그인 폼 만들기)2. 폼 태그3. 입력칸 만들기(텍스트, 데이터) 1. 웹 폼과 폼 요소- "웹 폼(Webform)"이란, '웹 페이지를 통해서 사용자의 입력을 받는 폼을 의미한다. 또한 이러한 폼을 만들기 위해서 사용되는 다양한 태그들을 "폼 요소(form element)"라고 한다.- 폼은 '로그인', '등록', '검색', '예약', '쇼핑' 등 "사용자의 입력을 받는 웹 서비스"라면 일반적으로 사용된다. 아래는 간단한 로그인 폼을 작성한 예시이다. 로그인을 할 수 있는 폼 입니다. User ID : User Pw : - 기본적으로 폼 요소들은 ''태그 안에 담기게 되고, 코드 내의..
목 차 미디어의 표준화비디오 삽입( '' )오디오 삽입( '' ) 1. 미디어의 표준화- HTML5 이전에는 오디오 혹은, 비디오를 재생하기 위해 브라우저에 '플러그인(plug-in) 소프트웨어를 따로 설치해야 했지만 HTML5에서는 플러그인 없이 가능하도록 아래와 같은 태그를 표준화하였다. ※ 단, '플래시 애니메이션(.SWF)'과 같이 표준화되지 않은 미디어를 재생하기 위해서는 플러그인이 필요하며 해당 경우에는 아래와 같은 태그를 사용하게 된다. 2. 비디오 삽입( '' )- 위에서 미리 언급한 ''태그를 이용하여 브라우저에서 비디오가 재생되도록 간단한 코드를 짜보자영상출력 오류여기서 각 태그의 의미를 살펴보자면 - video : 말 그대로 비디오를 삽입하기 위해서 가장 상위에 씌워지는 태그- ..