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 : 중간 줄 위의 텍스트의 출력 형태를..

- CSS3에서 색은 RGB, RGBA, HSL 등 3개의 방법으로 표현하게 되는데 가장 많이 사용되는 RGB에 대해서 살펴보려고 한다.- 먼저 색을 표현하는 방법은 크게 3가지 정도가 있는데 이는 아래와 같다.16진수 코드로 색 표현10진수 코드와 RGB()로 표현색 이름으로 표현 - 이 3가지와 관련해서 보다 자세히 살펴보도록 하자.  [16진수 코드로 색 표현]- CSS3에서 색은 빛의 3원 색인 빨강(red), 초록(green), 파랑(blue)의 성문으로 #rrggbb의 16진수로 표현하게 된다. - 아래는 태그 내의 모든 내용을 '보라색'으로 출력하는 스타일 시트이다.div { color : #8A2BE2; } - CSS에서 하나의 색은 총 24비트로 표현이 되기 때문에 2^24 즉, 160..

목  차1. CSS3 규칙2. 셀렉터1. CSS3 규칙- CSS 스타일 시트에는 2 가지의 규칙이 있는데 내용은 아래와 같다. CSS3 스타일은 부모 태그로부터 상속된다.스타일 합치기(cascading)와 오버라이딩(overriding) (1번 규칙)- 자신을 둘러싸고 있는 태그를 "부모 태그" 혹은 '부모 요소'라고 한다.저는 부모 태그의 영향을 받습니다. 저도 받습니다만?- 위와 같은 코드에서 태그를 '부모 태그', 태그를 ' 자식 태그'라고 하며 출력 결과는 아래와 같다.  - 이처럼 자식 태그는 폰트의 크기만 조정해줬어도 부모 태그에서 글자의 색이 지정되어있을 때 자식 태그의 내용까지 영향을 받는 것을 볼 수 있다.  (2번 규칙)- 브라우저는 각 태그에 대한 디폴트 스타일 시트를 가..

목  차1. CSS3 스타일 시트 개요2. CSS3 스타일 시트 만들기1. CSS3 스타일 시트 개요- CSS3(Cascading Style Sheet)란, HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를 "스타일 시트(style sheet)"라고 한다. 그럼 간단한 스타일 HTML 코드에 h3 스타일의 영향을 받습니다! 저는 웹 프로그래밍에 관심이 많습니다. 위의 코드를 실행하게 되면 아래와 같은 브라우저가 출력되게 된다.  - 위의 소스코드의 태그 안에 스타일 시트를 작성style 속성에 개별로 스타일 시트를 작성스타일 시트를 별도 파일(.CSS)로 작성하고 '' 혹은 '@import'로 불러와 사용- 여기서 3번의 '별도 파일을 통해..

목  차1. 태그로 폼 요소의 캡션 만들기2. 시간 정보 입력 만들기3. 형식을 가진 텍스트 입력 만들기1. 태그로 폼 요소의 캡션 만들기- 캡션이란 '텍스트 창 앞에 있는 글자'를 의미한다.(ex. 사용자 ID : [ 입력칸 ] 일 때, '사용자 ID'=캡션 / [ 입력칸 ] = 폼 요소)- 대부분의 폼 요소는 캡션을 함께 사용하지만 따로 캡션임을 명시하지 않는데, 태그를 이용하면 캡션과 폼 요소를 한 단위로 묶어 보다 명확한 표현이 가능해진다. 그럼 태그를 활용하여 '로그인 폼'을 만들어보자.  label을 이용한 로그인 폼 만들기 사용자ID : 비밀번호 :  - 위의 코드를 보면 태그로 캡션과 ..

목  차1. 텍스트 / 이미지 버튼 만들기2. 선택형 입력 만들기1. 텍스트 / 이미지 버튼 만들기- HTML5에서 버튼은 '' 태그 혹은, '' 태그로 만들 수 있으며, type속성으로 버튼의 다양한 타입을 지정할 수 있다.버튼의 문자열 - 위의 코드에서 확인할 수 있듯 5가지의 버튼 타입이 있고, 각 타입에 따른 예시 코드를 작성해 보자 ● type = "button"- 특별한 기능이 없는 '단순 버튼'으로 JS코드에서 사용된다.로그인 ● type = "submit"- 브라우저가 폼 데이터를 웹 서버로 전송할 수 있게 해주는 '제출 버튼'이다.제출 ● type = "reset"- 폼에 입력된 내용을 모두 '초기화(지움)하는 버튼'이다.초기화 ● type = "image" - 이미지 버튼을 만들 수 있..