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;}그림자를 보세요! (출력결과)  -..

오늘은 HTML 태그에 배경을 칠하거나 혹은, 배경 이미지를 출력하는 방법을 알아보자.  [배경에 색 칠하기 & 이미지로 그리기]- 'background-color', 'background-image' 프로퍼티는 각각 배경색과 배경 이미지를 지정한다.- 만약 위의 두 프로퍼티가 동시에 지정된다면 배경색을 우선적으로 적용시킨 후에 배경 이미지를 배치하게 된다.- 이와 관련된 예시 코드는 아래와 같다.div { background-color : skyblue; background-image : url("(경로입력)/(이미지 파일명));}  [배경 이미지의 위치]- 'background-position' 프로퍼티는 박스 내의 이미지의 시작 위치를 지정한다.- left top(디폴트), left cen..

[고급 테두리 꾸미기] 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'와 같이 정확한 수치로 할당해도 되지만, 정확한 수치..

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