테이블은 날짜 선택과 같은 타사의 캘랜더 모듈에서 많이 되어 기본적으로 스타일을 사용자가 선택하도록 설계되었습니다. 기본 클래스 .table을 <table>에 추가 한 다음 사용자 정의 스타일이나 다양한 포함 된 추가 클래스로 확장하면됩니다.
가장 기본적인 테이블 마크 업을 사용하여 테이블 기반 테이블이 부트스트랩 에서 어떻게 나타나는지 알수 있습니다.
.table-bordered 클래스를 추가하여 테이블과 셀의 모든 테두리를 변경할 수 있습니다.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
마우스에 반응하는 행
.table-hover t클래스를 추가하여 테이블행에 마우스 포인터가 올라오면 스타일을 변경하도록 지정할 수 있습니다.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
작은 테이블
.table-sm 클래스를 사용하여 셀크기를 반으로 줄임으로써 작은 테이블을 만들 수 있습니다.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
컨텍스트 클래스
컨텍스트 클래스를 사용하여 행 혹은 셀의 색상을 지정할 수 있습니다.
Type
Column heading
Column heading
Column heading
Active
Column content
Column content
Column content
Default
Column content
Column content
Column content
Primary
Column content
Column content
Column content
Secondary
Column content
Column content
Column content
Success
Column content
Column content
Column content
Danger
Column content
Column content
Column content
Warning
Column content
Column content
Column content
Info
Column content
Column content
Column content
Light
Column content
Column content
Column content
Dark
Column content
Column content
Column content
<!-- On rows --><trclass="table-active">...</tr><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-active">...</td><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
.
#
Column heading
Column heading
Column heading
1
Column content
Column content
Column content
2
Column content
Column content
Column content
3
Column content
Column content
Column content
4
Column content
Column content
Column content
5
Column content
Column content
Column content
6
Column content
Column content
Column content
7
Column content
Column content
Column content
8
Column content
Column content
Column content
9
Column content
Column content
Column content
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
반응형 테이블
.table 클래스에 .table-reponsive 클래스를 추가하여 테이블에 반응성을 추가할 수 있으며, 768px 작은 해상도에서 가로로 스크롤 되게 변경합니다. 그 이상의 크기에서는 변동이 없습니다.
수직 클립핑/절단
반응 형 테이블은 overflow-y : hidden을 사용합니다.이 오버 플로우는 테이블의 아래쪽이나 위쪽 가장자리를 넘어서는 모든 내용을 잘라냅니다. 특히 이것은 드롭 다운 메뉴 및 기타 타사 위젯을 잘라낼 수 있습니다.
이번 포스팅에서는 NCP의 클라우드 DB 구성방법에 대해 알아보겠습니다. 1. NCP 콘솔 접속 후 Cloud DB 이동 NCP 콘솔에 접속 후 Cloud DB for MySQL > DB Server 항목으로 이동 후 “DB Server 생성” 을 선택합니다. 2. DB 서버 생성 DB 서버 타입 및 환경을 선택하고 생성정보를 입력 후 “다음” 을 선택 합니다 - 고가용성 지원 : DB 이중화를 위해 2대의 서버가 자동으로 생성 됩니다. - DB Server 이름 : DB 서버로 사용할 이름을 입력합니다. - DB 서비스 이름 : DB 서비스로 사용할 이름을 입력합니다. DB 접속 정보를 설정한 후 “다음” 을 선택합니다. - USER_ID : DB 접속시 사용할 ID - HOST : DB 접속 가능 IP 설정 항목. (“%” 를 입력하면 “전체접속 허용” 으로 설정됩니다) DB 서버 생성이 완료 되었습니다. Cloud DB 를 생성하면 자동으로 ACG 가 할당 됩니다. 접속 권한을 추가하기 위해서는 권한을 추가해 주면 됩니다 동일한클라우드 환경에서 사용중인 서버의 접속 권한을 추가 하도록 하겠습니다. 3. DB 접속 확인 이제 서버 접속을 위한 설정이 완료 되었습니다. 사전에 생성된 서버에 접속하여 DB 생성이 정상적으로 되었는지 확인해 보겠습니다 . 생성된 DB 를 선택한 후 Private 도메인 항목을 복사해 줍니다. 서버 에서 Mysql 명령어를 통해 DB 접속 경로로 접속 한 후 2번 항목에서 설정한 Password 를 입력합니다. 사전에 Mysql client 가 설치되어 있어야 합니다. [root@lab1-org ~]# mysql -u student -p -h db-op45.cdb.ntruss.com 정상적으로 DB 에 접속된 화면 입니다. 다음 명령어를 통해 설저어한 DB 정보가 올바르게 생성되었는지 확인해
안녕하세요. 남산돈가스 입니다. 오늘은 Spring Boot JPA를 이용하여 API 개발 시 간단하게 Pagination 와 Sorting을 처리할 수 있도록 도와주는 Pageable에 대해서 알아보려고 합니다. 웹 개발 시 Pagination 과 Sorting은 필수적이라 할 수 있지만, 실제 개별적으로 구현 시 번거로운 작업이 생기기 마련입니다. 또한 각 데이터베이스마다 페이징 쿼리가 다를 수 있다는 점에서 모든 요구조건을 만족하기 어려운 부분들이 존재하기 마련입니다. Spring Data JPA와 Pageable을 이용하면 이런 문제들을 아주 쉽게 해결할 수 있어 비즈니스 로직에 집중할 수 있게 도와줍니다. 우선 Pageable을 사용하여 얻을 수 있는 이점은 대표적으로 두 가지 입니다. 요건에 맞는 Pagination을 구현할 수 있다. 정렬이 필요한 데이터를 쉽게 Sorting 할 수 있다. 예제를 들어 설명하겠습니다. @Entity @Table (name= "post" ) @Getter public class Post extends Audity { @Id @GeneratedValue (strategy = GenerationType.IDENTITY) @Column (name= "id" ) private Long id; @Column (name= "title" ) private String title; @Column (length = 2000 , name= "content" ) private String content; @Column (length = 50 , name= "writer" ) private String writer; } 간단한 예제를 들기 위하여, "Post" 라는 Entity를 작성하였고, 예제를 위하여 약 20건
[그림출처] https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다. 문자 그대로. SNS는 사용자들이 자발적으로 공유하는 글, 사진 등의 정보를 모아서 그 데이터를 기반으로 어떤 사용자가 무엇에 관심이 있는지 파악하여 사용자들에게 가장 관심 있을 만한 광고를 보여주곤 합니다. 몇 년 전부터 페이스북은 앱의 마이크 접근 권한 을 사용하여 핸드폰 주위의 모든 대화 등의 소리를 수집.파악하여 폰 사용자가 무엇에 관심 있는지 데이터를 얻고, 타겟 맞춤 광고에 이 정보를 활용한다고 하는 의혹을 받아왔습니다. 페이스북에 인수된 인스타그램도 마찬가지로요. 저도 가끔 의아했습니다. 어떻게 내가 검색창에서 검색한 적도 없고, 사진도 찍은 적 없고, 글로 쓴 적도 없는 어떤 것에 대해서 인스타그램이 나에게, 그것에 관해 얘기한 지 10분 만에 정확히 그와 관련된 상품을 광고로 보여줄 수가 있지? 그런데 동일한 의문을 품은 유저들이 여러 명 있었던 것 같습니다. (관련글 https://www.imore.com/how-stop-facebook-accessing-your-microphone https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023 ) 물론 페이스북이나 인스타그램은 공식적으로 '절대로 그렇지 않다' 고 발표하지만, 그렇다고 하더라도 혹시 있을 수 있는 사생활 침해에서 앱의 마이크 접근 권한을 차단하는 것은 나쁘지 않은 것 같습니다. 만약을 위해 사생활을 보호하려면, 페이스북이나 인스타그램 앱 설정 부분에서 페이스북 앱, 인스타그램 앱의 마이크 접근 권한을 비활성화 하시면 됩니다. 1. 아이폰 또는 설정에서 아래로 스크롤해서, 인스타그램 앱을 선택한 다음, 해당 앱의 마이크 권한 비활성화를 해도 됩니
안녕하세요 명동 콜링입니다. 오늘은 Android에서 Model Class를 다룰 때 사용하는 Serializable 의 한 분류인 Parcelable에 대해 써보려고 합니다. 일단 Serializable이란 무엇인가, 영어의 뜻을 풀이하자면 '직렬화' 라고 얘기할 수 있는데 막연히 '직렬화' 라고 얘기하기엔 무슨 뜻인지 이해 하기 어렵습니다. 그래서 Android 시스템에서 동작하는 방식으로 이야기 하자면, A Activity에서 B Activity로 데이터를 전달할 때, 데이터를 묶어서 전달한다 라고 쉽게 풀이할 수 있습니다. 이해를 하는데 도움이 되도록 많이 함축된 문장이지만 이 안에는 "하나의 Class화 된 여러 데이터들이 순서대로 Byte형식으로 변환되어 A -> B로 전달된다." 는 식의 어려운 말 들이 포함되어 있기 때문에 패스를 하도록 하겠습니다. 여기까지 Serializable의 정의에 대해 간단히 알아봤고 이제는 본격적으로 이 글의 주제인 Parcelable에 대해 알아보도록 합시다. 일단 Parcel, '소포', '꾸러미' 라는 뜻을 가지고 있습니다. 이 단어의 뜻처럼 Android에서의 Parcel이라는 것도 "여러 데이터가 하나의 꾸러미(Class) 안에 담겨 있다." 라는 의미를 가지게 됩니다. 그래서 이 데이터 꾸러미가 A Activity에서 B Activity로 한꺼번에 전달되고 받아 볼 수 있도록 해 주는 것이 Parcelable의 의미가 되겠습니다. 그럼 이 Parcelable을 어떻게 사용하는 지 보도록 하겠습니다. 1. 클래스 정의 먼저 Data(Model) Class를 하나 만들어 보도록 합니다. public class ProfileCls { String name ; int age ; String gender ; }
NCP 에서 신규 서버를 생성하면 AWS 와는 다르게 root 계정과 패스워드를 발급해 줍니다. 해당 계정정보를 잘 보관한 후 실제 사용할 계정을 생성해서 서버를 관리하게 됩니다. 1. 우선 ubunbu 에서 신규 계정을 생성 합니다. # adduser namsan cs namsan 이라는 계정을 생성하고 패스워드를 설정하였습니다. 2. 신규 생성된 계정으로 전환 후 명령어를 실행해 봅니다. su 명령어를 통해 신규 생성 계정으로 전환 합니다. # su namsan cs sudo 명령어를 실행해 보겠습니다. # sudo date cs “namsan is not in the sudoers file. This incident will be reported.” cs sudoers file 에 해당계정이 포함 되어있지 않다는 메시지가 출력됩니다. /etc/sudoers 에 신규 계정이 추가 되어 있지 않아 표출되는 에러 메시지 입니다. 다시 root 계정으로 전환하여 sudoers 파일을 수정해보겠습니다. su 명령어를 통해 다시 root 계정으로 전환 합니다. # su root cs 3. vi 명령어를 통해 /etc/sudoers 파일을 편집합니다. # vi /etc/sudoers cs # User privilege specification 항목에 아래와 같이 신규 생성된 계정 정보를 추가합니다. root ALL=(ALL:ALL) ALL namsan ALL=(ALL:ALL) ALL cs 이제 신규 생성된 사용자로 전환하여 sudo 명령어 실행 시 정상적으로 작동하는 것을 확인 할 수 있습니다.
댓글
댓글 쓰기