페이지에서 텍스트, 이미지 또는 개체를 구조화 하는 데 도움이 되도록 웹 페이지에 표를 추가할 수 있습니다. 이 작업을 수행 하 여 테이블, 가격표, 제품 비교, 용어 및 정의 목록 등의 데이터를 표시할 수 있습니다. 직원 biographies, 연락처 정보 또는 업무 시간 등의 콘텐츠 위치를 지정 하는 경우에도이 작업을 수행할 수 있습니다. 이 문서에서는 웹 사이트의 표 편집기를 사용 하 여 페이지에서 콘텐츠를 배치 하거나 구조화 하는 방법과 HTML 및 CSS 등의 다른 방법에 대해 설명 합니다.
이 문서의 내용
표 삽입
페이지에 표를 삽입 하려면 Microsoft 365 계정에 놓고 웹 사이트 편집기를 열고 다음 단계를 따릅니다.
-
표를 추가할 웹 페이지로 이동 합니다.
-
페이지 탭을 클릭 합니다.
-
편집 단추를 클릭 합니다.
-
페이지에서 표를 추가할 위치를 클릭 합니다.
-
삽입 탭을 클릭합니다.
-
표 단추를 클릭 합니다.
-
다음과 같은 두 가지 방법으로 표를 추가할 수 있습니다.
-
화살표를 클릭 하 여 표 눈금선을 확장 하 고, 표 눈금선 위에 마우스 포인터를 놓은 다음 원하는 수의 표 셀을 클릭 합니다.
-
또는 표 삽입 단추를 클릭 하 고 원하는 열과 행 수를 입력 한 다음 확인을 클릭 합니다.
-
-
해당 표가 웹 페이지에 추가 되 고, 여기에 콘텐츠를 추가 하거나 사용자 지정할 수 있으며 다음에 설명 하는 작업을 수행 합니다.
표 사용자 지정
웹 페이지에 표를 삽입 한 후에는 사용자 지정을 시작할 수 있습니다. 행 이나 열을 추가 및 삭제 하 고, 행 또는 열을 병합 및 분할 하 고, 표의 크기를 조정 하 고, 모양을 변경 하는 등의 방법을 사용할 수 있습니다.
행 및 열 추가
표에서 셀의 행과 열을 추가 하 여 페이지에 더 많은 구조화 된 콘텐츠를 사용할 수 있습니다. 커서가 있는 셀 위, 아래, 왼쪽 또는 오른쪽에 추가할 수 있습니다. 전체 행 또는 열을 개별 셀이 아닌 한 번에 추가할 수 있습니다.
표에 행 또는 열을 추가 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
행 또는 열을 추가할 표 셀에 커서를 놓습니다.
-
표 레이아웃 탭을 클릭 합니다.
-
다음 중 하나를 선택합니다.
-
선택한 셀 위에 행을 추가 하려면 위에 삽입 합니다.
-
선택한 셀 아래에 행을 추가 하려면 아래에 삽입 합니다.
-
선택한 셀의 왼쪽에 열을 추가 하려면 왼쪽에 삽입 을 선택 합니다.
-
선택한 셀의 오른쪽에 열을 추가 하려면 오른쪽에 삽입 을 선택 합니다.
-
팁: 새 셀의 결과가 마음에 들지 않는 경우 CTRL + Z 를 누르거나 텍스트 서식 탭을 클릭 하 고 실행 취소를 선택 하 여 작업을 취소할 수 있습니다.
변경 내용이 테이블에 즉시 적용 됩니다. 셀에 텍스트나 이미지가 있으면 병합 된 새 셀에 함께 배치 됩니다.
셀 병합
셀을 병합할 때 두 개 이상의 셀을 결합 하 여 표의 텍스트, 이미지 및 기타 개체에 대 한 공간을 늘릴 수 있습니다. 위 또는 아래에 있는 셀을 서로 왼쪽 이나 오른쪽에 병합할 수 있지만 개별 셀만 병합할 수 있고 전체 행 이나 열을 복사할 수는 없습니다.
표의 셀을 병합 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
병합 하려는 표 셀에 커서를 놓습니다.
-
표 레이아웃 탭을 클릭 합니다.
-
셀 병합 을 클릭 하 고 다음 중 하나를 선택 합니다.
-
위의 셀과 병합 하려면 위에 병합 을 사용 합니다.
-
아래 셀과 병합 하려면 아래에 병합 을 사용 합니다.
-
왼쪽에 셀을 병합할 수 있습니다.
-
오른쪽에 셀을 병합 하기 위해 바로 병합 합니다.
-
팁: 병합 된 셀의 결과가 마음에 들지 않는 경우 CTRL + Z 를 누르거나 텍스트 서식 탭을 클릭 하 고 실행 취소를 선택 하 여 작업을 취소할 수 있습니다.
변경 내용이 테이블에 즉시 적용 됩니다. 셀에 텍스트나 이미지가 있으면 병합 된 새 셀에 함께 배치 됩니다.
셀 분할
셀을 분할 하면 한 셀을 두 개의 셀로 변환 하 여 표 내용에 더 많은 구조를 적용할 수 있습니다. 셀을 가로 또는 세로로 분할할 수 있지만, 개별 셀만 분할할 수 있고 전체 행 이나 열을 나눌 수는 없습니다.
표의 셀을 분할 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
분할할 표 셀에 커서를 놓습니다.
-
표 레이아웃 탭을 클릭 합니다.
-
셀 분할 을 클릭 하 고 다음 중 하나를 선택 합니다.
-
가로로 나누어 셀을 두 개의 셀로 나란히 분할 합니다.
-
세로로 나누어 셀을 두 개의 셀로 나눕니다.
-
팁: 분할 된 셀의 결과가 마음에 들지 않는 경우에는 CTRL + Z 를 누르거나 텍스트 서식 탭을 클릭 하 고 실행 취소를 선택 하 여 작업을 취소할 수 있습니다.
변경 내용이 테이블에 즉시 적용 됩니다. 셀에 텍스트 또는 이미지가 있는 경우 새 셀이 아닌 원본 셀에 그대로 유지 됩니다.
표 크기 조정
표 크기와 표를 구성 하는 개별 행 및 열을 변경할 수 있습니다. 이 작업을 수행 하 여 표 셀에 페이지 콘텐츠를 추가 하거나 페이지의 나머지 부분에 다른 콘텐츠에 대 한 공간을 확보할 수 있습니다. 표나 셀 크기를 픽셀 단위 (px) 또는 백분율 (%)으로 지정할 수 있습니다. 전체 행, 열 또는 표만 한 번에 개별 셀이 아닌 크기를 조정할 수 있습니다.
표의 크기를 변경 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
크기를 조정 하려는 표 안에 커서를 놓습니다.
-
표 레이아웃 탭을 클릭 합니다.
-
표 너비옆에 백분율 또는 픽셀 값을 입력 합니다. 100% 또는 700px 이상의 값이 전체 페이지 콘텐츠 영역을 사용 합니다.
-
표 높이옆에 백분율 또는 픽셀 값을 입력 합니다. 단락 수에 따라 표 높이도 결정 된다는 점에 유의 하세요.
-
열 너비옆에 백분율 또는 픽셀 값을 입력 합니다. 100% 또는 700px 이상의 값이 전체 페이지 콘텐츠 영역을 사용 합니다.
-
열 높이옆에 백분율 또는 픽셀 값을 입력 합니다. 단락 수에 따라 셀 표 높이도 결정 된다는 점에 유의 하세요.
팁: 크기가 조정 된 표 또는 셀의 결과가 마음에 들지 않는 경우에는 CTRL + Z 를 누르거나 텍스트 서식 탭을 클릭 하 고 실행 취소를 선택 하 여 작업을 취소할 수 있습니다.
변경 내용이 테이블에 즉시 적용 됩니다. 셀에 텍스트나 이미지가 있으면 크기가 조정 된 셀에 그대로 유지 됩니다.
표 스타일 변경
스타일을 변경 하 고, 머리글 또는 바닥글 행을 지정 하 고, 첫 번째 및 마지막 표의 행 또는 열에 특수 서식을 적용 하 여 표의 모양을 사용자 지정할 수 있습니다.
표 스타일을 변경 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
사용자 지정 하려는 표에 커서를 놓습니다.
-
사이트 탭을 클릭 합니다.
-
다음 표 스타일 옵션 중 하나를 선택 합니다. "밝게" 또는 "지우기" 표 스타일이 현재 표에 적용 된 경우에는 서식 차이를 볼 수 없습니다.
-
머리글 행 표의 첫 번째 행에 특수 서식을 적용 합니다.
-
바닥글 행 표의 마지막 행에 특수 서식을 적용 합니다.
-
첫 번째 열 은 표의 첫 번째 열에 특수 서식을 적용 합니다.
-
마지막 열 표의 마지막 열에 특수 서식을 적용 합니다.
-
-
표 스타일을 선택 합니다. 각 스타일은 테두리 색, 셀 색, 머리글 또는 바닥글 색을 변경 합니다. 일부 스타일에서는 위의 옵션을 선택한 경우에만 머리글과 바닥글을 변경할 수 있습니다.
-
기본 표 스타일-밝게: 가늘게, 밝은 회색 눈금 테두리.
-
표 스타일 1 – 투명: 테두리가 표시 되지 않습니다.
-
표 스타일 2-밝은 줄무늬: 연한 회색 수평선, 나머지 모든 행이 회색으로 표시 됩니다.
-
표 스타일 3 – 보통 두 가지 색조: 파란색 머리글의 모든 행은 연한 파란색으로 음영 처리 됩니다.
-
표 스타일 4-연한 선: 회색 머리글 및 연한 파란색 가로 선.
-
표 스타일 5 – 눈금: 회색 눈금 테두리가 있고 나머지는 회색으로 표시 됩니다.
-
표 스타일 6-강조색 1: 파란색 눈금 테두리, 파랑 머리글
-
표 스타일 7 – 강조색 2, 연한 파란색 눈금 테두리와 연한 파란색 머리글
-
표 스타일 8-강조 3: 녹색 눈금 테두리, 녹색 머리글
-
표 스타일 9-강조색 4: 올리브 눈금 테두리, 올리브 머리글.
-
표 스타일 10-강조색 5: 빨간색 눈금 테두리, 빨간색 머리글
-
표 스타일 11-강조색 6: 자주색 눈금 테두리, 자주색 머리글
-
-
눈금선 표시 를 클릭 하 여 표 눈금선을 표시 하거나 숨깁니다. 표 스타일 지우기 또는 hid 표 테두리를 적용 한 경우에만 시각적으로 사용할 수 있지만, 계속 해 서 작업할 표를 확인 해야 합니다.
변경 내용이 테이블에 즉시 적용 됩니다. 셀에 텍스트나 이미지가 있는 경우 새 스타일이 적용 된 원본 셀에 그대로 유지 됩니다.
표에 텍스트 또는 개체 추가
표의 사용자 지정이 완료 되 면 여기에 설명 된 대로 텍스트, 그래픽, 기타 개체 등의 표에 콘텐츠를 추가할 준비가 된 것입니다.
표에 텍스트 또는 개체를 추가 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
콘텐츠를 추가할 표 셀 안에 커서를 놓습니다.
-
텍스트를 추가 하려면 텍스트 입력을 시작 하거나 표 셀에 텍스트를 붙여 넣습니다. 서체 또는 글꼴 크기를 변경 하려면 텍스트 서식 탭을 클릭 하 고 여기에서 글꼴 설정을 선택 합니다.
-
이미지, 비디오 또는 다른 개체를 삽입 하려면 삽입 탭을 클릭 하 고 웹 페이지에서와 같이 개체를 삽입 합니다. 이미지 또는 비디오가 표 셀 보다 크면 이미지 또는 비디오에 맞게 표 셀의 크기가 자동으로 조정 됩니다.
-
텍스트, 이미지 또는 개체를 제거 하려면 셀에서 선택 하 고 키보드에서 Delete 키를 누릅니다.
셀, 행, 열 또는 표 삭제
필요한 경우 개별 셀, 행, 열 또는 전체 표를 삭제할 수 있습니다.
셀, 행, 열 또는 표를 삭제 하려면
-
표가 포함 된 웹 페이지를 편집 합니다.
-
삭제 하려는 셀, 행, 열 또는 테이블 안에 커서를 놓습니다.
-
표 레이아웃 탭을 클릭 합니다.
-
삭제 를 클릭 하 고 다음 중 하나를 선택 합니다.
-
커서가 위치한 개별 셀을 삭제 하려면 셀을 삭제 합니다.
-
커서가 있는 열을 삭제 하 여 열을 삭제 합니다.
-
커서가 있는 행을 삭제 하려면 행 삭제를 제거 합니다.
-
커서가 있는 위치에서 전체 테이블을 삭제 하려면 표를 삭제 합니다.
-
페이지의 표 또는 내용 사용자 지정을 계속 합니다.
표, HTML 콘텐츠 또는 CSS 직접 만들기
사용자 지정 표를 만들거나 CSS에서 고유한 HTML 코드를 사용 하 여 페이지에 콘텐츠를 배치 하려면 Expression Web 또는 Dreamweaver와 같은 웹 페이지 편집기에서 HTML 코드를 만들어이 작업을 수행할 수 있습니다. 편집기에서 원하는 대로 변경한 다음 다음 단계에 따라 웹 페이지 코드를 복사 하 여 공용 웹 사이트에 붙여넣습니다.
웹 사이트에 사용자 지정 표 또는 웹 페이지 코드 추가
-
표 또는 HTML 콘텐츠를 추가할 웹 페이지를 편집 합니다.
-
텍스트 서식 탭을 클릭 한 다음 마크업 그룹에서 원본 편집 을 클릭 합니다.
-
HTML 소스 창에서 사용자 지정 HTML을 입력 하거나 붙여 넣거나 DIV 태그 적용 등의 기존 원본 콘텐츠를 수정 합니다. 웹 사이트의 한 부분에서 표를 다시 만들고 사용자 지정 하는 것 보다 더 빠르기 때문에 HTML 원본 창 에서도 유용한 방법으로 테이블을 복사할 수 있습니다.
-
확인 을 클릭 한 다음 페이지를 저장 합니다.
-
HTML을 추가로 사용자 지정 하려면 (예: CSS 레이어 사용) 사이트 탭을 클릭 한 다음 스타일 시트 편집을 클릭 합니다.
-
스타일 시트 편집 창에서 사용자 지정 CSS를 추가한 다음 저장을 클릭 합니다.
팁: 페이지의 콘텐츠 레이아웃 및 위치를 세부적으로 사용자 지정 하려면 디자인 관리자를 사용 하 여 사용자 지정 페이지 레이아웃을 만드는 것이 좋습니다.