Excel에서 원형 차트를 만드는 방법. 행과 열을 추가하는 둥근 모서리

이 기사에서는 모서리가 둥근 테이블을 만드는 방법을 알려 드리기로 결정했습니다. 아마 인터넷 서핑을 하다가 이런 테이블을 한 번쯤 접해 보셨을 거라 생각합니다.

그러한 테이블에 대해 정확하게 알려 드리겠습니다. 물론 이러한 테이블은 여러 가지 방법으로 만들 수 있습니다. 제가 말씀드릴 이 방법은 가장 간단하고 "아름답습니다". 이러한 테이블을 다른 방법으로 만들면 JAVA를 공부해야 하기 때문입니다. CSS와 결합하면 코드가 매우 번거롭고 복잡해집니다.

이 방법은 HTML만 사용하지만 이미지, 즉 테이블 모서리를 만들어야 합니다. 모서리를 만들려면 Photoshop이나 원하는 다른 그래픽 프로그램(MS Point도 포함)이 필요하지만 이를 처리할 수 있습니다. 이 기사에서는 Photoshop에서 만드는 방법을 설명합니다.

테이블 생성을 직접 진행해 보겠습니다. 표를 만들려면 Dreamweaver나 다른 HTML 편집기를 엽니다. 새 문서를 만들거나 이미 만든 문서를 열면 3개의 행과 2개의 열이 있는 테이블 자체가 생성됩니다.

Photoshop으로 이동하여 둥근 사각형 도구를 사용하여 둥근 사각형을 그린 다음 테이블에 원하는 것과 동일하게 반올림 반경을 설정하고 30픽셀로 설정했습니다.

먼저 배경 레이어와 직사각형 이미지가 있는 레이어를 연결합니다. 이렇게 하려면 레이어 패널에서 Ctrl 키를 누른 상태에서 위쪽 및 아래쪽 레이어를 선택하고 Ctrl + E를 누릅니다.

이제 이 직사각형에서 모서리 자체를 추출해야 합니다. 이를 위해 Recatangular Marquee Tool을 사용하고 상단 패널에서 Width 및 Height 필드에서 Style:Fixed Size를 선택하고 에서 지정한 반경 값을 기록합니다. step 2. 이미지를 클릭하면 사각형 앞에 점선이 나타납니다. 둥근 모서리가 사각형 안에 완전히 들어가도록 이동하세요.

(사각형 내부, 즉 모서리를 복사하려면) Ctrl + C를 누릅니다. 이제 이전에 복사한 모서리를 거기에 붙여넣기 위해 새 이미지를 만들어야 합니다. 파일-새로 만들기...-확인으로 이동합니다. 즉시 코너에 붙여넣기 Ctrl + V

생성된 테이블에서 두 번째 행에는 텍스트를 작성해야 하므로 하나로 결합해야 합니다.
이제 이미지(모서리)를 테이블에 삽입합니다.

삽입된 그림(오른쪽 아래 및 오른쪽 위)은 오른쪽에 정렬되어야 합니다.
이제 마지막 단계입니다. 테이블에 모서리와 동일한 배경색을 지정해야 합니다.

이제 다 끝났습니다. 이 방법이 가장 쉽습니다. 이 글이 어떤 식으로든 도움이 되었기를 바라며, 모든 내용을 명확하게 설명하였기를 바랍니다. 행운을 빌어요!

모두가 오랫동안 웹사이트 디자인의 전통적인 직사각형 모서리에 지쳤습니다. 이미지를 사용하지 않고 테두리 반경 속성을 사용하는 스타일을 통해 둥근 모서리가 유행합니다. 이 속성은 모든 모서리 또는 각각의 반경을 개별적으로 결정하는 공백으로 구분된 1개, 2개, 3개 또는 4개의 값을 가질 수 있습니다.

테이블에 그림 1은 이 경우에 얻어지는 다양한 수의 값과 블록 유형을 보여줍니다.

암호 설명 보다
div(경계 반경: 10px; ) 모든 모서리에 대한 반경을 한 번에 라운딩합니다.
div(경계 반경: 0 10px; ) 첫 번째 값은 왼쪽 상단과 오른쪽 하단 모서리의 반경을 설정하고, 두 번째 값은 오른쪽 상단과 왼쪽 하단의 반경을 설정합니다.
div(경계 반경: 20px 10px 0; ) 첫 번째 값은 왼쪽 상단 모서리의 반경을 설정하고, 두 번째 값은 오른쪽 상단과 왼쪽 하단 모두, 세 번째 값은 오른쪽 하단을 설정합니다.
div(경계 반경: 20px 10px 5px 0; ) 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리의 반경을 순차적으로 설정합니다.

예제 1은 모서리가 둥근 블록을 생성하는 방법을 보여줍니다.

예시 1. 블록의 모서리

HTML5 CSS3 IE 9+ Cr Op Sa Fx

반지름

Me는 I라는 대격의 보충형입니다.


이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 모서리가 둥근 블록

반올림 반경을 요소 높이와 너비의 절반보다 크게 설정하면 흥미로운 효과를 얻을 수 있습니다. 이 경우 원이 생깁니다. 예제 2에서는 그림이 포함된 둥근 버튼을 만드는 방법을 보여줍니다.

예 2: 원형 버튼

HTML5 CSS3 IE 9+ Cr Op Sa Fx

단추

이 예의 결과는 그림 1에 나와 있습니다. 2.

쌀. 2. 둥근 버튼

Opera 브라우저에서 다음으로 반올림합니다.