목록개발 (57)
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. for 문을 이용한 반복문(1부터 5까지의 합 구하기)#include using namespace std; // std(네임 스페이스) 정의해주기void main() // for문을 이용한 반복문(1부터 5까지의 합 구하기){ int i; int total = 0; // 반드시 초기화 해줘야 함 for (i = 1; i 2. Switch 문을 이용한 학점 계산 함수#include void main() // switch 문을 이용한 학점 계산 함수{ int score; char grade; cout > score; switch (score / 10) { case 10 :grade = 'A'; break; case 9 :grade = 'A'; break; default:grade = 'F..