반응형 문서샘플 table1.html

by 디자인솔 posted Feb 11, 2017
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

TABLE1 (one column)

물고기에게도 감정이 있을까? 눈높이를 맞춘 채 가만 들여다보고 있으면 표정 변화에서 감정을 읽을 수 있다. 그 속에는 희로애락으로 표현되는 일차적 감정 뿐 아니라 사고를 필요로 하는 이차적 감정인 동정심, 동료의 죽음에 대한 애도, 사랑, 자존감, 두려움도 숨어 있다.

one 컬럼에 상단 텍스트, 하단 테이블이 있는 구조

# First Name Last Name User Name Nick Name
1 Alexandra Christopher @makinton Ducky
2 Madeleine Hollaway @hollway Cheese
3 Sebastian Johnston @sebastian Jaycee
4 Mitchell Christin @mitchell4u AdskiDeAnus
5 Elizabeth Belkitt @belkitt Goat

TABLE2 (one column)

물고기에게도 감정이 있을까? 눈높이를 맞춘 채 가만 들여다보고 있으면 표정 변화에서 감정을 읽을 수 있다. 그 속에는 희로애락으로 표현되는 일차적 감정 뿐 아니라 사고를 필요로 하는 이차적 감정인 동정심, 동료의 죽음에 대한 애도, 사랑, 자존감, 두려움도 숨어 있다.

one 컬럼에 상단 텍스트, 하단 테이블이 있는 구조, 테이블 헤더에 어두운 배경 컬러 적용

# First Name Last Name User Name Nick Name
1 Alexandra Christopher @makinton Ducky
2 Madeleine Hollaway @hollway Cheese
3 Sebastian Johnston @sebastian Jaycee
4 Mitchell Christin @mitchell4u AdskiDeAnus
5 Elizabeth Belkitt @belkitt Goat

TABLE3 (one column)

물고기에게도 감정이 있을까? 눈높이를 맞춘 채 가만 들여다보고 있으면 표정 변화에서 감정을 읽을 수 있다. 그 속에는 희로애락으로 표현되는 일차적 감정 뿐 아니라 사고를 필요로 하는 이차적 감정인 동정심, 동료의 죽음에 대한 애도, 사랑, 자존감, 두려움도 숨어 있다.

one 컬럼에 상단 텍스트, 하단 테이블이 있는 구조, 배경컬러를 채우지 않은 테이블

# First Name Last Name User Name Nick Name
1 Alexandra Christopher @makinton Ducky
2 Madeleine Hollaway @hollway Cheese
3 Sebastian Johnston @sebastian Jaycee
4 Mitchell Christin @mitchell4u AdskiDeAnus
5 Elizabeth Belkitt @belkitt Goat

TABLE4 (two column)

오는 4월 출시될 삼성전자 플래그십 스마트폰 갤럭시 S8 시리즈는 전작과 마찬가지로 기본 모델보다 대화면 모델이 더 부각될 것인가. 3일 한 전자업계 관계자는 삼성전자의 갤럭시 S8 시리즈와 관련해 "기본 모델인 갤럭시 S8과 대화면 갤럭시 S8 플러스 생산비율은 4 대 6 혹은 3 대 7까지 예상할 정도로 플러스를 더 많이 생산하고 있는 것으로 안다"고 OSEN에 말했다.

2컬럼에 좌측은 텍스트, 우측은 테이블

항목 내용
OS 안드로이드 누가 7.1.1
화면크기 5.8인치, 6.2인치
CPU 스냅드레곤 835 세계 최초로 탑재
메모리 RAM 4GB, 저장공간 64~128GB, 확장 최대 256GB
특징 커브드 곡면 QHD Super AMOLED

TABLE5 (two column)

선반까지 시원하게 선반 칸칸의 냉기를 새지 않게 오래 유지. 감치통 하나하나 냉기로 감싸주는 메탈쿨링 선반, 김치냉장고의 문을 열면 메탈쿨링 선반이 있습니다. 내부 선반 전체를 유리나 플라스틱이 아닌 메탈 재질로 감싸 항상 냉기를 머금고 칸칸의 온도 유지 능력이 뛰어납니다.

two column에 상단에 텍스트, 양쪽에 테이블

항목 내용
OS 안드로이드 누가 7.1.1
화면크기 5.8인치, 6.2인치
CPU 스냅드레곤 835 세계 최초로 탑재
메모리 RAM 4GB, 저장공간 64~128GB, 확장 최대 256GB
특징 커브드 곡면 QHD Super AMOLED
항목 내용
OS 안드로이드 누가 7.1.1
화면크기 5.8인치, 6.2인치
CPU 스냅드레곤 835 세계 최초로 탑재
메모리 RAM 4GB, 저장공간 64~128GB, 확장 최대 256GB
특징 커브드 곡면 QHD Super AMOLED

TABLE6 (two column) 좌측컬럼

선반까지 시원하게 선반 칸칸의 냉기를 새지 않게 오래 유지. 감치통 하나하나 냉기로 감싸주는 메탈쿨링 선반, 김치냉장고의 문을 열면 메탈쿨링 선반이 있습니다. 내부 선반 전체를 유리나 플라스틱이 아닌 메탈 재질로 감싸 항상 냉기를 머금고 칸칸의 온도 유지 능력이 뛰어납니다.

two column에 좌우측 각각 제목, 텍스트, 테이블이 있는 구조

항목 내용
OS 안드로이드 누가 7.1.1
화면크기 5.8인치, 6.2인치
CPU 스냅드레곤 835 세계 최초로 탑재
메모리 RAM 4GB, 저장공간 64~128GB, 확장 최대 256GB
특징 커브드 곡면 QHD Super AMOLED

TABLE6 (two column) 우측컬럼

선반까지 시원하게 선반 칸칸의 냉기를 새지 않게 오래 유지. 감치통 하나하나 냉기로 감싸주는 메탈쿨링 선반, 김치냉장고의 문을 열면 메탈쿨링 선반이 있습니다. 내부 선반 전체를 유리나 플라스틱이 아닌 메탈 재질로 감싸 항상 냉기를 머금고 칸칸의 온도 유지 능력이 뛰어납니다.

two column에 좌우측 각각 제목, 텍스트, 테이블이 있는 구조

항목 내용
OS 안드로이드 누가 7.1.1
화면크기 5.8인치, 6.2인치
CPU 스냅드레곤 835 세계 최초로 탑재
메모리 RAM 4GB, 저장공간 64~128GB, 확장 최대 256GB
특징 커브드 곡면 QHD Super AMOLED
반응형 문서샘플
브라우저 가로 크기를 줄여 문서가 어떻게 반응하는지 확인하세요
파일 sample/table1.html
사용법 웹에디터나 메모장에서 내용 수정후 위젯, 문서, 게시판의 에디터에서 소스(html)을 체크하신후 붙여넣기 합니다.
수정 역시 소스(html)을 체크하신 후 붙여넣기로 수정하세요. (xe 에디터에서 수정시 에디터 자체 생성 혹은 삭제하는 태그 때문에 원본과 달라져요)
이미지경로 1. xe/images 인 경우 src="/images/test.jpg"
2. layouts/레이아웃/images 인경우 src="/layouts/레이아웃/images/test.jpg"
참고이미지 없슴

서버에 요청 중입니다. 잠시만 기다려 주십시오...