K_blueprint

HTML 태그가 출력될 위치를 지정하는 것을 '배치(positioning)'이라고 한다.오늘은 이 배치와  관련된 프로퍼티와 블록/인라인 박스에 대해서 알아보자  - 먼저 배치와 관련된 프로퍼티는 아래와 같다.displaypositionleft / right / top / bottomfloatz-indexvisibilityoverflow [블록 태그 & 인라인 태그] - HTML의 태그는 블록 태그와 인라인 태그로 나뉘게 되며 이는 아래와 같다. 블록 태그 : , , , 인라인 태그 : , ,  - 블록 박스인지, 인라인 박스인지에 따라 태그가 브라우저에서 차지하는 영역과 위치에 많은 차이가 있게 된다.\  (블록 박스)- 블록 박스는 '새 라인에서 시작'하며, 옆에 다른 태그를 배치할 수 없다는 특징이..

오늘은 HTML5에서 텍스트 및 박스의 그림자를 부여할 수 있는 프로퍼티에 대해서 정리해 보겠습니다.  [텍스트에 그림자 효과 부여하기] - 'text-shadow'프로퍼티를 활용해서 텍스트의 그림자 효과를 줄 수 있다.- 해당 프로퍼티를 사용하는 방법은 아래와 같다.text-shadow : __h-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평 거리v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수직 거리blur-radius : 그림자의 번짐(흐릿함)을 조절color : 그림자의 색none : 그림자 효과 없음 - 아래는 위의 프로퍼티를 활용한 예시 코드와 출력 결과이다. (소스코드)div.red{ text-shadow: 3px 3px red;}그림자를 보세요! (출력결과)  -..

[고급 테두리 꾸미기] CSS3은 둥근 모서리의 테두리나 이미지 테두리 등의 고급 테두리를 지원한다. - 'border-radius' 프로퍼티를 이용하면 테두리의 모서리를 곡선으로 둥글게 만들 수 있다.- 아래는 모서리의 반지름을 '50px'로 지정한 둥근 모서리 테두리의 예시 코드와 브라우저 출력 결과이다. (소스코드) 저는 둥근 모서리를 가진 박스입니다. (출력결과) - 각각의 모서리 별로 반지름을 다르게 설정할 수 있는데 border-top-left(좌측 상단 모서리), border-top-right(우측 상단 모서리), border-bottom-left(좌측 하단 모서리), border-bottom-right(우측 하단 모서리) 이렇게 4개의 모서리에 개별적인 값을 할당할 수 있다. - 아래..

오늘은 HTML5로 '테두리'의 디자인을 다뤄보겠습니다:-) [테두리의 두께 & 모양과 색]- 테두리는 패딩(padding) 혹은 여백(margin)과 달리 '두께'/'모양'/'색'을 지정하는 여러 가지의 프로퍼티를 두고 있다.- 아래는 태그에 테두리를 꾸미는 예시 코드이다.p{ border-width : 3px; /* 테두리의 두께를 3px로 설정 */ border-style : dotted; /* 테두리의 스타일을 도트(점)으로 설정 */ border-color : blue; /* 테두리의 색을 파란색으로 설정 */} - 위의 스타일을 지정하고 태그를 사용하게 되었을 때 아래와 같은 테두리를 확인할 수 있다.  + 테두리의 두께는 '3px'와 같이 정확한 수치로 할당해도 되지만, 정확한 수치..

오늘은 HTML5에서 텍스트를 꾸밀 수 있는 다양한 방법에 대해 정리해 보겠습니다:-) [텍스트]- 텍스트를 꾸미기에 앞서 텍스트의 출력 형태를 제어할 수 있는 여러 가지 명령어가 있다.text-indent : | ; >>> 들여 쓰기는 고정된 길이로 들여 쓰기는 텍스트 블록 전체 폭에 대한 비율로 들여 쓰기text-align : left | right | center | justify; >>> 정렬justify : 양쪽정렬center : 중앙정렬left, right : 왼쪽, 오른쪽 정렬text-decoration : none | underline | overline | line-through; >>> 텍스트 꾸미기underline : 밑줄line-through : 중간 줄 위의 텍스트의 출력 형태를..

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