문제 해결 과정
1. 문제를 읽고 이해한다.
2. 문제를 익숙한 용어로 재정의한다.
3. 어떻게 해결할지 계획을 세운다.
4. 계획을 검증한다.
5. 프로그램으로 구현한다.
6. 어떻게 풀었는지 돌아보고, 개선할 방법이 있는지 찾아본다.
체계적인 접근을 위한 질문들
1. 비슷한 문제를 풀어본 적이 있던가?
2. 단순한 방법에서 시작할 수 있을까? == 무식하게 풀 수 있을까?
3. 내가 문제를 푸는 과정을 수식화할 수 있을까?
4. 문제를 단순화할 수 없을까? == 문제를 좀 더 쉽게 만들어 볼 순 없을까?
5. 그림으로 그려볼 수 있을까?
6. 수식으로 표현할 수 있을까?
7. 문제를 분해할 수 있을까?
8. 뒤에서부터 생각해서 문제를 풀 수 있을까?
9. 순서를 강제할 수 있을까?
10. 특정 형태의 답만을 고려할 수 있을까? == 답 후보의 유한한 갯수만을 고려
코딩과 디버깅에 관하여
1. 간결한 코드를 작성하기
2. 적극적으로 코드 재사용하기 == 코드 모듈화
3. 표준 라이브러리 공부하기
4. 항상 같은 형태로 프로그램을 작성하기 == 반복문의 일관된 사용, 배열의 전달 방법
5. 일관적이고 명료한 명명법 사용하기
6. 모든 자료를 정규화해서 저장하기 == 모든 분수는 기약분수로, 각도를 양수로만 표현
7. 코드와 데이터를 분리하기 == 데이터는 배열로 만들어서 정리
자주 하는 실수
1. 산술 오버플로
2. 배열 범위 밖 원소에 접근 == array[n]이면 0~n-1
3. 일관되지 않은 범위 표현 방식 사용하기
4. 계산의 큰 줄기는 맞지만 하나가 모자라거나 하나가 많아서 틀리는 코드의 오류
5. 컴파일러가 잡아주지 못하는 상수 오타
6. 스택 오버플로
7. 다차원 배열 인덱스 순서 바꿔 쓰기
8. 잘못된 비교 함수 작성 == <, >
9. 최소, 최대 예외 잘못 다루기
10. 연산자 우선순위 잘못 쓰기
11. 너무 느린 입출력 방식 선택
12. 변수 초기화 문제 == 이전 입력에서 사용한 전역 변수 값을 초기화하지 않고 사용
스캐폴딩 코드
//우리가 테스트하고 싶은 정렬 함수
void mySort(vector<int>& array);
//주어진 배열을 문자열로 바꾼다
string toString(const vector<int>& array);
int main() {
//무한히 반복한다.
while(true) {
//임의의 입력을 만든다.
int n = rand() % 100 + 1;
vector<int> input(n);
for(int i = 0; i < n; ++i)
input[i] = rand();
//두 개의 복제를 만들어서 하나는 우리의 정렬 함수로, 하나의 표준 라이브러리로
//정렬한다.
vector<int> mySorted = input;
mySort(mySorted);
vector<int> reference = input;
sort(reference.begin(), reference.end());
if(mySorted != reference) {
cout << "Mismatch!" << endl;
cout << "Input: " << toString(input) << endl;
cout << "Expected: " << toString(reference) << endl;
cout << "Got: " << toString(mySorted) << endl;
break;
}
}
}
산술 오버플로
어떤 식의 계산 값이 반환되는 자료형의 표현 가능한 범위를 벗어나는 경우
너무 큰 결과
프로그램이 출력해야 할 결과가 우리가 흔히 사용하는 32비트 자료형의 범위를 넘어가면 64비트 정수를 사용하거나 큰 정수 구현을 이용해야 한다.
너무 큰 중간 값
프로그램의 출력값의 범위는 작지만 중간과정에서 큰 값을 일시적으로 계산해야 하는 경우
너무 큰 '무한대' 값
무한대의 값을 어떤 큰 유한한 값으로 대체할 때 너무 큰 값으로 잡으면 안 됨
오버플로 피해가기
1. 캐스팅을 이용
2. 연산의 순서를 바꾼다. - 먼저 빼거나 나눈다.
3. 계산의 순서를 바꾼다.
실수 자료형의 이해
실수 == 근사값
=> 두 개의 실수값을 비교할 때에는 어느 정도의 오차는 염두해두어야 한다.
1. 오차의 한도를 상황에 맞게 설정한다.
2. 상대 오차를 이용한다.
relativeError(a, b) = |a-b| / max( |a|, |b| ) <= 큰 수를 비교할 때 유용
//절대 오차와 상대 오차를 모두 이용해서 두 수가 같은지 판정한다.
bool doubleEqual(double a , double b) {
double diff = fabs(a - b);
//절대 오차가 허용 범위 안일 경우 무조건 true를 반환한다.
if(diff < 1e-10) return true;
//이 외의 경우레는 상대 오차를 사용한다.
return diff <= 1e-8 * max(fabs(a), fabs(b));
}
대소 비교
연산 오차에 의해서 거짓이 될 값이 참이 될 수 있다.
코드의 수치적 안정성 파악하기
프로그램의 실행 과정에서 발생하는 오차가 더 커지지 않는다.
2015년 7월 31일 금요일
2015년 6월 29일 월요일
Xctu로 지그비 연결 테스트 간단히
1. Xctu 실행
2. 라디오 모듈 추가(USB & RUN)
안되면 모듈을 뺐다 다시 낀다.
3. 모듈 핀 설정
(서로의 CH, ID는 같아야하고 1의 DL = 2의 MY, 1의 MY = 2의 DL)
4. 다른 모듈 탐색
5. 중요!!! 핀을 USB로 바꾼다.
6. 통신!!!!
테트리스 예제 만들기 (1월 26일 ~ 2월 5일) 80~90% 성공한 듯...
일반 테트리스 만들기
public class Blocks {
static final int BLOCKNUMBER = 7;
int [][] block = new int[4][4]; //블록을 위한 공간
int top = 0;
int bottom = 0;
int left = 0;
int right = 0;
int blockSize = 0;
int idx = 0;
public void makingBlock(){ //블록을 만들고 무작위로 리턴하는 메서드
idx = (int)(Math.random()*(BLOCKNUMBER));
switch (idx){
case 0:
/*
* 1 1
* 1 1
*/
block[1][1]=1;
block[1][2]=1;
block[2][1]=1;
block[2][2]=1;
top = 1;
bottom = 2;
left = 1;
right = 2;
blockSize =3;
break;
case 1:
/*
* 1 1
* 1 1
*/
block[2][1]=1;
block[2][2]=1;
block[1][2]=1;
block[1][3]=1;
top = 1;
bottom = 2;
left = 1;
right = 3;
blockSize = 3;
break;
case 2:
/*
* 1 1
* 1 1
*/
block[1][1]=1;
block[1][2]=1;
block[2][2]=1;
block[2][3]=1;
top = 1;
bottom = 2;
left = 1;
right = 3;
blockSize = 3;
break;
case 3:
/*
* 1 1 1
* 1
*/
block[1][1]=1;
block[1][2]=1;
block[1][3]=1;
block[2][1]=1;
top = 1;
bottom = 2;
left = 1;
right = 3;
blockSize = 3;
break;
case 4:
/*
* 1 1 1
* 1
*/
block[1][1]=1;
block[1][2]=1;
block[1][3]=1;
block[2][3]=1;
top = 1;
bottom = 2;
left = 1;
right = 3;
blockSize = 3;
break;
case 5:
/*
* 1 1 1
* 1
*/
block[1][1]=1;
block[1][2]=1;
block[1][3]=1;
block[2][2]=1;
top = 1;
bottom = 2;
left = 1;
right = 3;
blockSize = 3;
break;
case 6:
/*
* 1 1 1 1
*/
block[1][0]=1;
block[1][1]=1;
block[1][2]=1;
block[1][3]=1;
top = 1;
bottom = 1;
left= 0;
right = 3;
blockSize = 4;
break;
}
}
public int [][] turnBlock(int [][] blocks){
int [][]blockArray = new int[blocks.length][blocks[0].length];
for(int i = 0; i < blocks.length;i++){
for(int j = 0; j < blocks[0].length;j++){
blockArray[j][blocks.length -1 - i] = blocks[i][j];
}
}
return blockArray;
}
}
2015년 5월 18일 월요일
네트워크 (2)
소켓의 생성방법을 이해해보자!
프로토콜: "컴퓨터 상호간의 대화에 필요한 통신 규약"
소켓의 생성: 호스트가 통신을 하기 위해 필요한 리소스를 할당하는 것
필요한 인자
1) domain : 프로토콜 체계
ex) PF_INET, PF_INET6, PF_LOCAL, PF_PACKET, PF_IPX
2) type : 전송 타입 설정
// 하나의 프로토콜 체계 안에서도 데이터 전송 방법이 여러 가지 있을 수 있다.
1. SOCK_STREAM(연결 지향형)
에러나 데이터의 손실 없이 무사히 전달
전송하는 순서대로 데이터가 전달
전송되는 데이터의 경계가 존재하지 않는다.
2. SOCK_DGRAM(비연결 지향형)
전송되는 순서에 상관없이 가장 빠른 전송을 지향한다.
전송되는 데이터는 손실될 수도 있고 에러가 발생할 수도 있다.
전송되는 데이터의 경계가 존재
한번에 전송되는 데이터의 크기는 제한된다.
3) protocol : 특정 프로토콜 지정
주소 체계와 데이터 결정(주소 할당하는 방법)
IP 주소: 인터넷상에 존재하는 호스트들을 구분하기 위한 32비트 주소 체계
네트워크 주소: 네트워크를 구분해 주는 ID
ex)
주소 정보의 표현(IP 주소, Port)
1) 1Pv4의 주소 체계를 나타내는 구조체
struct sockaddr_in{
sa_family_t sin_family // 주소 체계
uint16_t sin_port // 16비트 TCP/UDP Port
struct in_addr sin_addr; // 32비트 IPv4 주소
char sin_zero[8]; // 사용되지 않음
};
struct in_addr {
sint32_t s_addr; // 32비트 IPv4 인터넷 주소
};
2) sockaddr_in 구조체 정보
- sin_family : 프로토콜 체계마다 주소체계가 다르다.
ex) AF_INET, AF_INET6, AF_LOCAL
- sin_port : 16 port 정보를 대입해준다.(네트워크 바이트 순서)
- sin_addr: 32비트 IP 주소 정보를 대입해준다.(네트워크 바이트 순서)
네트워크 바이트 순서
1) Big-Endian 표현 방식 => 네트워크 바이트 순서
0x12 0x34 0x56 0x78
2) Little-Endian 표현 방식
0x78 0x56 0x34 0x12
* 시스템이 Little-Endian 방식을 사용할 경우, 네트워크를 통해 데이터를 전송하기 전에 Big-Endian 방식으로 데이터를 변경해서 보내야 하고, 받을 때도 전송되어 오는 데이터를 역순으로 조합해야 한다.
바이트 순서 변환
' h ' : host byte order ' n ' : network byte order
' s ' : short( 16bit ) => port 정보 ' l ' : long( 32bit ) => IP 주소
ex)
- unsigned short htons(unsigned short)
16 비트 데이터를 Host Byte 순서에서 Network Byte 순서로 바꾸어 준다는 의미이다.
인터넷 주소 변환
ex) 203.212.114.26 을 unsigned long 값으로 변환해야 한다.
1) inet_addr(const chat *string)
인자값으로 Dotted-Decimal Notation( ex) 203.212.114.26 ) 문자열의 포인터를 넘겨주게 되면, 해당하는 unsigned long 타입의 데이터값을 리턴
2) inet_aton() : inet_addr 함수보다 개선된 데이터 변환 함수
개선된 방향
만약 inet_addr 함수를 사용할 경우 변환된 데이터가 unsigned long 타입의 값으로 리턴되기 때문에, 리턴한 값을 주소 정보 구조체 sockaddr_in 안에 선언되어 있는 in_addr 구조체 안에 대입하는 과정을 거쳐야 한다.
BUT,!! inet_aton 함수를 사용할 경우 대입하는 과정을 따로 거치지 않아도 된다.
+3) inet_ntoa()
네트워크 바이트 순서의 32비트 값을 Dotted-Decimal Notation으로 변환하는 함수.
인터넷 주소 초기화
struct sockaddr_in addr;
// 인터넷 주소 정보를 나타내는 구조게 변수 생성
char *serv_port = " 9190 ";
memset(&addr, 0, sizeof(addr_len));
// 인자로 전달된 구조체 변수를 0으로 초기화해줌
addr.sin_family = AF_INET;
// ' 프로토콜 체계 ' 설정
addr.sin_addr.s_addr = htonl(INADDR_ANY);
addr.sin_port = htons(atoi(serv_port));
주소 정보 할당하기(소켓에 주소를 할당)
int bind(int sockfd, struct sockaddr *myaddr, int addrlen);
인자
- sockfd: 주소를 할당하고자 하는 소켓의 파일 디스크립터
- myaddr: 할당하고자 하는 주소 정보를 지니고 있는 sockaddr_in 구조체 변수의 포인터
- addrlen : 인자로 전달된 주소 정보 구조체의 길이
프로토콜: "컴퓨터 상호간의 대화에 필요한 통신 규약"
소켓의 생성: 호스트가 통신을 하기 위해 필요한 리소스를 할당하는 것
필요한 인자
1) domain : 프로토콜 체계
ex) PF_INET, PF_INET6, PF_LOCAL, PF_PACKET, PF_IPX
2) type : 전송 타입 설정
// 하나의 프로토콜 체계 안에서도 데이터 전송 방법이 여러 가지 있을 수 있다.
1. SOCK_STREAM(연결 지향형)
에러나 데이터의 손실 없이 무사히 전달
전송하는 순서대로 데이터가 전달
전송되는 데이터의 경계가 존재하지 않는다.
2. SOCK_DGRAM(비연결 지향형)
전송되는 순서에 상관없이 가장 빠른 전송을 지향한다.
전송되는 데이터는 손실될 수도 있고 에러가 발생할 수도 있다.
전송되는 데이터의 경계가 존재
한번에 전송되는 데이터의 크기는 제한된다.
3) protocol : 특정 프로토콜 지정
주소 체계와 데이터 결정(주소 할당하는 방법)
IP 주소: 인터넷상에 존재하는 호스트들을 구분하기 위한 32비트 주소 체계
네트워크 주소: 네트워크를 구분해 주는 ID
ex)
특정 호스트를 찾아가는 순서
1) 4바이트 IP주소 중에서 네트워크 주소만을 참조해서 찾아간다.(203.211.217)
2) 호스트 주소를 참조한다.
Port란??
*IP주소로는 인터넷에 연결되어 있는 컴퓨터들을 구분하여 줄 수는 있어도 컴퓨터 안에서 실행되고 있는 프로그램까지 구분하지는 못한다.
Port는 실행되는 프로그램을 구분해줌
범위는 0에서 65525(2바이트) <= 0부터 1023은 예약되어 있는 Port이므로 사용이 제한됨
1) 1Pv4의 주소 체계를 나타내는 구조체
struct sockaddr_in{
sa_family_t sin_family // 주소 체계
uint16_t sin_port // 16비트 TCP/UDP Port
struct in_addr sin_addr; // 32비트 IPv4 주소
char sin_zero[8]; // 사용되지 않음
};
struct in_addr {
sint32_t s_addr; // 32비트 IPv4 인터넷 주소
};
2) sockaddr_in 구조체 정보
- sin_family : 프로토콜 체계마다 주소체계가 다르다.
ex) AF_INET, AF_INET6, AF_LOCAL
- sin_port : 16 port 정보를 대입해준다.(네트워크 바이트 순서)
- sin_addr: 32비트 IP 주소 정보를 대입해준다.(네트워크 바이트 순서)
네트워크 바이트 순서
1) Big-Endian 표현 방식 => 네트워크 바이트 순서
0x12 0x34 0x56 0x78
2) Little-Endian 표현 방식
0x78 0x56 0x34 0x12
* 시스템이 Little-Endian 방식을 사용할 경우, 네트워크를 통해 데이터를 전송하기 전에 Big-Endian 방식으로 데이터를 변경해서 보내야 하고, 받을 때도 전송되어 오는 데이터를 역순으로 조합해야 한다.
바이트 순서 변환
' h ' : host byte order ' n ' : network byte order
' s ' : short( 16bit ) => port 정보 ' l ' : long( 32bit ) => IP 주소
ex)
- unsigned short htons(unsigned short)
16 비트 데이터를 Host Byte 순서에서 Network Byte 순서로 바꾸어 준다는 의미이다.
인터넷 주소 변환
ex) 203.212.114.26 을 unsigned long 값으로 변환해야 한다.
1) inet_addr(const chat *string)
인자값으로 Dotted-Decimal Notation( ex) 203.212.114.26 ) 문자열의 포인터를 넘겨주게 되면, 해당하는 unsigned long 타입의 데이터값을 리턴
2) inet_aton() : inet_addr 함수보다 개선된 데이터 변환 함수
개선된 방향
만약 inet_addr 함수를 사용할 경우 변환된 데이터가 unsigned long 타입의 값으로 리턴되기 때문에, 리턴한 값을 주소 정보 구조체 sockaddr_in 안에 선언되어 있는 in_addr 구조체 안에 대입하는 과정을 거쳐야 한다.
BUT,!! inet_aton 함수를 사용할 경우 대입하는 과정을 따로 거치지 않아도 된다.
+3) inet_ntoa()
네트워크 바이트 순서의 32비트 값을 Dotted-Decimal Notation으로 변환하는 함수.
인터넷 주소 초기화
struct sockaddr_in addr;
// 인터넷 주소 정보를 나타내는 구조게 변수 생성
char *serv_port = " 9190 ";
memset(&addr, 0, sizeof(addr_len));
// 인자로 전달된 구조체 변수를 0으로 초기화해줌
addr.sin_family = AF_INET;
// ' 프로토콜 체계 ' 설정
addr.sin_addr.s_addr = htonl(INADDR_ANY);
addr.sin_port = htons(atoi(serv_port));
주소 정보 할당하기(소켓에 주소를 할당)
int bind(int sockfd, struct sockaddr *myaddr, int addrlen);
인자
- sockfd: 주소를 할당하고자 하는 소켓의 파일 디스크립터
- myaddr: 할당하고자 하는 주소 정보를 지니고 있는 sockaddr_in 구조체 변수의 포인터
- addrlen : 인자로 전달된 주소 정보 구조체의 길이
2015년 5월 9일 토요일
소스 분석
까먹어서 내가 친 소스를 내가 분석하다니... 노답
-서버
ChatServer 클래스
생성자: Vector(5,5)
giveAndTake 메소드 //서버를 실행시키는 메소드
서버 소켓 요청을 받아들이고 ServerSocketThread를 돌림
addClient 메소드
벡터에 클라이언트 추가
removeClient 메소드
벡터에서 클라이언트 제거
broadCasting 메소드
ServerSocketThread을 클라이언트에 캐스팅하고 Thread를 통해 메시지를 보낸다.
ServerSocketThread 클래스
생성자: (ChatServer, Socket)
sendMessage 메소드
문자열을 받아 출력
run
BufferedReader, PrintWriter를 만들어서 첫번째는 닉네임 두번째부터는 메시지를 주고 받을 수 있게 ChatServer의 broadCasting 메소드를 받아온다.
-클라이언트
StartingJFrame 클래스 // 클라이언트를 만들때 import하는 클래스
// JFrame를 상속 , GUI 메인 클래스에서 상속해감
intFrame 메소드
너비와 높이가 모니터보다 크면 최대화, 초기 위치 설정
processWindow 메소드
창 닫을 때의 이벤트 설정
setMainJPanel 메소드
Component를 추가
ClientGui 클래스 // JPanel을 상속받음
생성자:(JFrame, String ip, int port)
ip 와 port 를 받아 Socket 객체를 새로 만든다.
actionPerformed 메소드
// requestFocus: 입력을 받게 되면 맨 앞의 창으로 띄어지게 된다.
giveAndTake 메소드
PrintWriter, BufferedReader 객체 생성 -> Thread 생성 -> 시작
run
textArea에 친 문자열을 받아들인다.
-서버
ChatServer 클래스
생성자: Vector(5,5)
giveAndTake 메소드 //서버를 실행시키는 메소드
서버 소켓 요청을 받아들이고 ServerSocketThread를 돌림
addClient 메소드
벡터에 클라이언트 추가
removeClient 메소드
벡터에서 클라이언트 제거
broadCasting 메소드
ServerSocketThread을 클라이언트에 캐스팅하고 Thread를 통해 메시지를 보낸다.
ServerSocketThread 클래스
생성자: (ChatServer, Socket)
sendMessage 메소드
문자열을 받아 출력
run
BufferedReader, PrintWriter를 만들어서 첫번째는 닉네임 두번째부터는 메시지를 주고 받을 수 있게 ChatServer의 broadCasting 메소드를 받아온다.
-클라이언트
StartingJFrame 클래스 // 클라이언트를 만들때 import하는 클래스
// JFrame를 상속 , GUI 메인 클래스에서 상속해감
intFrame 메소드
너비와 높이가 모니터보다 크면 최대화, 초기 위치 설정
processWindow 메소드
창 닫을 때의 이벤트 설정
setMainJPanel 메소드
Component를 추가
ClientGui 클래스 // JPanel을 상속받음
생성자:(JFrame, String ip, int port)
ip 와 port 를 받아 Socket 객체를 새로 만든다.
actionPerformed 메소드
// requestFocus: 입력을 받게 되면 맨 앞의 창으로 띄어지게 된다.
giveAndTake 메소드
PrintWriter, BufferedReader 객체 생성 -> Thread 생성 -> 시작
run
textArea에 친 문자열을 받아들인다.
2015년 5월 6일 수요일
네트워크 (1)
$$ C언어를 기반으로 씀
네트워크 프로그래밍: 호스트들이 데이터를 주고 받을 수 있도록 프로그램을 구현하는 것
소켓의 이해
1) 전화기를 산다. == 소켓을 생성(Socket 함수)
2) 전화번호를 부여받는다. == 소켓의 IP 주소 할당(Bind 함수)
3) 전화기를 케이블에 연결한다. == 소켓을 연결요청이 가능한 상태로 만듬(listen 함수)
4) 전화벨이 울리면 수화기를 든다. == 연결 요청이 들어오면 요청을 수락함(accept 함수)
클라이언트 소켓의 이해
1) 전화를 건다 == 서버에게 연결을 요청함(connect 함수)
??? 클라이언트에 전화번호를 할당하는 코드가 없다 ????
파일 조작하기
1) Low-Level == "시스템이 직접 제공해 주는"
2) 파일 디스크립터
시스템이 만들어 놓은 것을 가리키기 좋게 하기 위해 시스템이 우리들에게 건네주는 숫자
0 = 표준 입력
1 = 표준 출력
2 = 표준 에러 출력
3
4 ... 이런 식으로 차례로 넘버링이 됨
3) File 열기(open 함수)
(파일의 경로를 포함하는 이름, 열고자 하는 파일의 모드)
O_CREAT, O_TRUNC, O_APPEND, O_RDONLY, O_WRONLY, O_RDWR
4) File 닫기(close 함수)
(파일 디스크립터)
5) 데이터 쓰기(write 함수)
(파일 디스크립터, 전송할 데이터를 가지는 버퍼의 포인터, 전송할 데이터의 바이트 수)
6) 데이터 읽기(read 함수)
(파일 디스크립터, 수신할 데이터를 가지는 버퍼의 포인터, 수신할 데이터의 바이트 수)
윈속 기반의 데이터 입출력 함수
데이터를 입출력할 수 있는 기본적인 함수
send 함수 == 데이터를 전달할 때 옵션을 줄 수 있는 write 함수
(데이터를 전송할 호스트에 연결된 소켓의 핸들,
전송할 데이터를 저장하고 있는 버퍼를 가리키는 포인터,
전송할 바이트 수,
함수 호출 시, 여러가지 옵션)
recv 함수
(데이터를 수신할 호스트에 연결된 소켓의 핸들,
수신할 데이터를 저장하고 있는 버퍼를 가리키는 포인터,
수신할 바이트 수,
함수 호출 시, 여러가지 옵션)
네트워크 프로그래밍: 호스트들이 데이터를 주고 받을 수 있도록 프로그램을 구현하는 것
소켓의 이해
1) 전화기를 산다. == 소켓을 생성(Socket 함수)
2) 전화번호를 부여받는다. == 소켓의 IP 주소 할당(Bind 함수)
3) 전화기를 케이블에 연결한다. == 소켓을 연결요청이 가능한 상태로 만듬(listen 함수)
4) 전화벨이 울리면 수화기를 든다. == 연결 요청이 들어오면 요청을 수락함(accept 함수)
클라이언트 소켓의 이해
1) 전화를 건다 == 서버에게 연결을 요청함(connect 함수)
??? 클라이언트에 전화번호를 할당하는 코드가 없다 ????
파일 조작하기
1) Low-Level == "시스템이 직접 제공해 주는"
2) 파일 디스크립터
시스템이 만들어 놓은 것을 가리키기 좋게 하기 위해 시스템이 우리들에게 건네주는 숫자
0 = 표준 입력
1 = 표준 출력
2 = 표준 에러 출력
3
4 ... 이런 식으로 차례로 넘버링이 됨
3) File 열기(open 함수)
(파일의 경로를 포함하는 이름, 열고자 하는 파일의 모드)
O_CREAT, O_TRUNC, O_APPEND, O_RDONLY, O_WRONLY, O_RDWR
4) File 닫기(close 함수)
(파일 디스크립터)
5) 데이터 쓰기(write 함수)
(파일 디스크립터, 전송할 데이터를 가지는 버퍼의 포인터, 전송할 데이터의 바이트 수)
6) 데이터 읽기(read 함수)
(파일 디스크립터, 수신할 데이터를 가지는 버퍼의 포인터, 수신할 데이터의 바이트 수)
윈속 기반의 데이터 입출력 함수
데이터를 입출력할 수 있는 기본적인 함수
send 함수 == 데이터를 전달할 때 옵션을 줄 수 있는 write 함수
(데이터를 전송할 호스트에 연결된 소켓의 핸들,
전송할 데이터를 저장하고 있는 버퍼를 가리키는 포인터,
전송할 바이트 수,
함수 호출 시, 여러가지 옵션)
recv 함수
(데이터를 수신할 호스트에 연결된 소켓의 핸들,
수신할 데이터를 저장하고 있는 버퍼를 가리키는 포인터,
수신할 바이트 수,
함수 호출 시, 여러가지 옵션)
2015년 3월 22일 일요일
CSS 정리 (레이아웃)
박스 모델
1.마진: 텍스트나 이미지 등이 나타나는
실제 콘텐츠 영역
2.패딩: 박스와 콘텐츠 영역 사이의 여백
3.테두리: 박스의 테두리
4.마진: 여러 박스 모델 간의 여백
width, height 속성 - 박스 모델 크기 지정하기
1. 박스 모델의 콘텐츠 영역에 대한 크기이다.
// 그러므로 콘텐츠의 크기는 width와 height에서 지정한 크기에 패딩과 마진, 테두리의 값을 더해서 계산해야함
ex)
div {
width: 200px;
height: 50px;
}
// 사용할 수 있는 속성 값
크기: 너비나 높이 값을 px나 cm 같은 단위를 가지고 수치를 지정
백분율(%): 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정
auto: 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정(defalut)
테두리 관련 속성들
border-width 속성 - 테두리 두께 지정하기
// 스타일 지정 위치 방식은 padding, margin 과 비슷
ex)
border-width: 2px;
border-width: thin thick thin 5px;
// 사용할 수 있는 속성 값
thin: 얇은 선을 그린다.
medium: 보통 선을 그린다.
thick: 굵은 선을 그린다.
크기: 테두리 굵기를 직접 지정
border-color 속성 - 테두리 색상 지정하기
// border-width 와 비슷
ex)
border-color: red;
// 사용할 수 있는 속성 값
색상 값: 색상 이름이나 16진수 값, rgb 값 등을 이용하여 색상을 지정
transparent: 투명하게 나타난다.(default)
border-style 속성 - 테두리선 스타일 지정하기
ex)
border-style: 속성 값;
// border-style 속성 값
none: 테두리가 나타나지 않는다.
hidden: 테두리가 나타나지 않는다.
dotted: 테두리를 점선으로 표시한다.
dashed: 테두리를 짧은 선으로 표시한다.
solid: 테두리를 실선으로 표시한다.
double: 테두리를 이중선으로 표시한다.
// 밑에 것들은 한 번 쳐보는 게 이해하기 쉬울 듯...
groove
ridge
inset
outset
border 속성 - 테두리 스타일 묶어서 지정
1. 속성을 방향에 따라서 두께와 색상, 스타일을 한꺼번에 묶어서 지정할 수 있다.
2. border: 두께 값| 색상 값 | 스타일;
ex)
h3 {
padding-bottom:5px;
border:1px red solid;
}
CSS 박스 관련 속성들
border-radius 속성 - 박스 모서리 둥글게 만들기
ex)
div {
border-radius: 20px; /*모서리 부분 반지름 20px*/
border: 3px solid red;
}
//border-radius의 속성 값
크기: 둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시
백분율(%): 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정
border-*-radius 속성 - 박스 모서리 다르게 지정하기
ex)
p {
border-top-left-radius:10px;
border-top-right-radius:50px/20px; /*테두리 모서리에 가로 50px, 세로 20px 타원 겹침*/
}
box-shadow 속성 - 선택한 요소에 그림자 효과 내기
ex)
div {
box-shadow: 2px 2px 5px 0 black; /* 수평거리 2px 수직거리 2px blur 5px, 확장거리 0, 색상 검은색*/
}
//box-shadow의 속성값
수평거리: 그림자가 수평으로 얼마나 떨어져 있는지 지정(+: 오른쪽 -: 왼쪽)
수직거리: 그림자가 수직으로 얼마나 떨어져 있는지 지정(+: 위쪽 -: 아래쪽)
blur: 그림자의 흐림정도를 지정
확장거리: 그림자가 얼마나 번지는지를 나타냄
그림자 색상: 그림자 색상을 지정
inset: 박스 안쪽에 그림자를 표시하고, 사용하지 않으면 박스 바깥쪽에 그림자를 표시
배치와 관련된 블록 레벨과 인라인 레벨
블록 레벨 요소와 인라인 레벨 요소
1. 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소
// 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
// <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <blockquote>, <form>, <table>
2 인라인 레벨 요소: 줄을 차지하지 않는 요소
//<img>, <strong>, <object>, <sub>, <sup>, <input>, <textarea>, <label>
display 속성 - 요소를 어떻게 보여줄까?
// 해당 요소가 화면에 어떻게 보여질 지 지정하는 것
1. block: 블록 레벨 박스로 만든다.
2. inline: 인라인 레벨 박스로 만든다.
3. inline-block: 블록 레벨 박스이지만 인라인 레벨 박스처럼 배치
4. none: 박스를 만들지 않으며 시각적으로 표시하지 않는다.
5. table: 블록 레벨의 표로 만든다.
6. inline-table: 인라인 레벨의 표로 만든다.
/*
인라인 레벨 요소에 display:block으로 지정하면 블록 레벨 요소처럼 사용할 수 있고,
<div> 태그 같은 요소에 display:table-cell이라고 지정하면 표처럼 사용할 수 있다.
*/
ex)
ul li {
display:inline; /* 항목을 가로로 배치*/
float: left; /* 왼쪽부터 배치
}
여러 요소를 원하는 형태로 배치하기
position 속성 - 원하는 형태로 요소 배치하기
// 텍스트 나 이미지를 나란히 배치하기도 하고, 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다.
position 속성 값
static: 요소를 문서의 흐름에 맞춰 배치한다.
relative: 이전 요소에 자연스럽게 연결해서 배치한다.
absolute: 원하는 위치를 지정하여 배치한다.
fixed: 지정한 위치에 고정해서 배치한다. 요소가 화면에서 잘릴 수 있다.
ex)
<style>
#cont1 {
position: static;
background:lightyellow;
}
#cont2 {
position: static;
background:lightyellow;
}
#cont3 {
position:absolute;
left:30px; /*(body) 왼쪽 위로부터 오른쪽으로 20px 떨어져서 배치*/
top:50px; /* (body) 왼쪽 위로부터 아래로 100px 떨어져서 배치*/
background:lightyellow;
}
#cont4 {
position:fixed;
left:30px; /*수평 좌표*/
top:50px; /* 수직 좌표*/
background:lightyellow;
}
</style>
visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기
visibility 속성 값
visible: 요소를 화면에 표시한다.
hidden: 요소가 화면에서 감춰진다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 준다.
collapse: 표의 행이나 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다.
inherit: 부모 요소의 visibility 속성을 상속한다.
z-index 속성 - 요소 쌓는 순서 정하기
1. CSS에서 각 요소는 수평이나 수직으로 이동할 뿐 아니라, 한 요소 위에 다른 요소를 쌓는 z축도 고려한다.
2. z-index 값이 클수록 위에 쌓인다.
ex)
<style>
#cont1 {
position:absolute;
left:10px;
top:10px;
background:lightyellow;
z-index:1;
}
#cont2 {
position:absolute;
left:180px;
top:20px;
background:lightyellow;
z-index:3;
}
#cont3 {
position:absolute;
left:25px;
top:160px;
background:lightyellow;
z-index:2;
}
</style>
float 속성 - 요소를 떠 있게 하기
1. 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다.
2. position 속성에서 absolute 사용 금지
ex)
aside{
float: right;
width: 30%
}
clear 속성 - float 속성 무효로 만들기
why?
float 속성을 이용하여 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달됨
ex)
사이드 바를 float 속성으로 오른쪽에 배치하면 그 다음에 오는 푸터 역시 오른쪽으로 배치한다.
이 속성을 무효화시키기 위해 사용
clear 속성 값:
left: 왼쪽으로 떠 있지 않도록 한다.
right: 오른쪽으로 떠 있지 않도록 한다.
both: 왼쪽이나 오른쪽 어디에도 떠 있지 않도록 한다.
none: 왼쪽과 오른쪽 모두에 뜰 수 있다. (defalut)
다단으로 편집하기
// 브라우저 제조업체 접두사를 붙여 사용할 것
column-width - 단의 너비 지정하기
1. 한 화면을 여러 개의 단으로 구성할 때, 단의 너비를 고정해 놓고 화면을 분할할 수 있습니다. 너비 값을 바꿀 수 없기 때문에 화면이 커지면 단의 개수가 많아진다.
2. 다단으로 편집할 때 단의 너비를 기준으로 하겠다면 column-width 속성을 이용한다.
단의 너비를 기준으로 하면 브라우저 창의 너비에 따라 단의 개수가 달라진다.
column-width: 속성 값;
값: 단 너비를 직접 지정한다. 여유 공간이 많다면 지정한 너비보다 더 넓게 표시될 수 있고 여유 공간이 좁다면 지정한 너비보다 좁게 표시될 수 있습니다.
auto: 단의 개수 column-count 같은 다른 속성을 이용해 단의 너비를 결정한다.
ex)
div {
column-width:80px;
-webkit-column-width:80px;
-moz-column-width:80px;
}
column-count 속성 - 단의 개수 지정하기
1. 단의 개수로 화면 분할
column-count 속성 값
개수: 0보다 큰 값으로 콘텐츠가 들어갈 단의 개수를 지정한다.
auto: 단의 너비 column-width 같은 다른 속성으로 단의 개수를 정한다.
ex)
div {
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
}
column-gap 속성 - 단과 단 사이 여백 지정하기
column-gap: 속성 값;
값: 단과 단 사이의 여백을 숫자로 표시한다.
normal: 자동으로 여백을 지정한다.
column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기
column-rule-color: 색상 값;
column-rule-style: none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset;
column-rule-width: thin | medium | thick | 크기 값;
column-rule: column-rule-width 값 | column-rule-style 값 | column-rule-color 값
ex)
ex)
div { column-gap: 1em;
column-rule-color: black;
column-rule-style: solid;
column-rule-width: 1px;
}
다단 위치 지정하기
1. break-before:column 특정 요소 앞부분에서 단을 나눈다.
2. break-after:column 특정 요소 앞부분에서 단을 나눈다.
3. break-before: avoid-column, break-after: avoid-column
특정 요소 앞이나 뒤에서 단을 나누지 않는다.
ex)
<style>
.multicol article {
break-after:column;
/*multicol이라는 요소의 하위 article 요소 다음부터 다단 시작*/
-webkit-columns: auto 3;
-webkit-column-rule:1px dotted black;
-moz-columns: auto 3;
-moz-column-rule: 1px dotted black;
columns: auto 3;
column-rule: 1px dotted black;
}
</style>
column-span 속성 - 여러 단을 하나로 합치기
1. 중간에 단을 합쳐서 내용을 표시해야 할 경우가 있다.
column-span 속성 값
1 : 단 하나만 합치는 것이므로 합치지 않는 것과 같다.(defalut)
all : 전체 단을 하나로 합쳐서 표현한다.
ex)
.subtitle {
column-span:all;
-webkit-column-span:all;
-moz-column-span:all;
}
표 관련 스타일
표의 각 셀들은 <th>태그나 <td> 태그를 사용해 구성되는데, CSS에는 표와 셀의 형태에 영향을 주는 여러 속성들이 있다.
table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정하기
1. <th> 태그 나 <td> 태그에서 width 속성을 이용해 셀 너비를 고정했을 때, 그 너비보다 긴 내용을 한글로 입력하면 자동으로 줄이 바뀌면서 다음 줄로 넘어감
//만약 설정하지 않으면 레이아웃을 무시하고 한 줄로 길게 써짐
ex)
<table id = "tb1" width="300px">
<tr>
<th>CONSTRAINT_VALIDATION</th>
<td>table layout을 이용한 셀 너비 조절</td>
</tr>
</table>
table-layout 속성 값
fixed: 셀 너비를 고정한다.
auto: 셀 안의 내용에 따라 셀의 너비가 달라진다.(default)
inherit: 부모 요소의 table-layout 값을 상속한다.
셀 안의 수평 정렬과 수직 정렬
text-align 속성
1. text-align 속성은 셀 안에서 텍스트의 가로 정렬 방법을 지정한다.
text-align 속성 값
left: 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.
center: 가운데로 정렬한다.
justify: 왼쪽과 오른쪽 양쪽 끝에 맞춰 정렬한다.
vertical-align 속성
1. vertical-align 속성은 셀 안에서 텍스트의 세로 정렬 방법을 지정한다.
vertical-align 속성 값
baseline: 셀 박스의 baseline이 첫 번째 행을 확장한 baseline과 같은 높이로 배치
top: 셀 박스의 top 부분이 첫 번째 행을 확장한 top에 맞춰 배치
bottom: 셀 박스의 bottom 부분이 마지막 행을 확장한 bottom에 맞춰 정렬
middle: 셀의 center 부분이 확장한 행들의 중앙에 맞춰 정렬
1.마진: 텍스트나 이미지 등이 나타나는
실제 콘텐츠 영역
2.패딩: 박스와 콘텐츠 영역 사이의 여백
3.테두리: 박스의 테두리
4.마진: 여러 박스 모델 간의 여백
width, height 속성 - 박스 모델 크기 지정하기
1. 박스 모델의 콘텐츠 영역에 대한 크기이다.
// 그러므로 콘텐츠의 크기는 width와 height에서 지정한 크기에 패딩과 마진, 테두리의 값을 더해서 계산해야함
ex)
div {
width: 200px;
height: 50px;
}
// 사용할 수 있는 속성 값
크기: 너비나 높이 값을 px나 cm 같은 단위를 가지고 수치를 지정
백분율(%): 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정
auto: 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정(defalut)
ex)
p {
margin-top:30px; /* 위쪽 여백*/
maring-bottom:30px; /* 아래쪽 여백*/
margin-right:50px; /* 오른쪽 여백*/
margin-left:50px; /* 왼쪽 여백*/
}
=> p { margin: 30px 50px 30px 50px } == top -> right -> bottom -> left
p { margin: 50px; } == 전부 다 적용
padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정하기
ex)
p {
border:1px solid block /*1px 두께의 검은 색 테두리*/
padding: 10px 20px
}
border-width 속성 - 테두리 두께 지정하기
// 스타일 지정 위치 방식은 padding, margin 과 비슷
ex)
border-width: 2px;
border-width: thin thick thin 5px;
// 사용할 수 있는 속성 값
thin: 얇은 선을 그린다.
medium: 보통 선을 그린다.
thick: 굵은 선을 그린다.
크기: 테두리 굵기를 직접 지정
border-color 속성 - 테두리 색상 지정하기
// border-width 와 비슷
ex)
border-color: red;
// 사용할 수 있는 속성 값
색상 값: 색상 이름이나 16진수 값, rgb 값 등을 이용하여 색상을 지정
transparent: 투명하게 나타난다.(default)
border-style 속성 - 테두리선 스타일 지정하기
ex)
border-style: 속성 값;
// border-style 속성 값
none: 테두리가 나타나지 않는다.
hidden: 테두리가 나타나지 않는다.
dotted: 테두리를 점선으로 표시한다.
dashed: 테두리를 짧은 선으로 표시한다.
solid: 테두리를 실선으로 표시한다.
double: 테두리를 이중선으로 표시한다.
// 밑에 것들은 한 번 쳐보는 게 이해하기 쉬울 듯...
groove
ridge
inset
outset
border 속성 - 테두리 스타일 묶어서 지정
1. 속성을 방향에 따라서 두께와 색상, 스타일을 한꺼번에 묶어서 지정할 수 있다.
2. border: 두께 값| 색상 값 | 스타일;
ex)
h3 {
padding-bottom:5px;
border:1px red solid;
}
CSS 박스 관련 속성들
border-radius 속성 - 박스 모서리 둥글게 만들기
div {
border-radius: 20px; /*모서리 부분 반지름 20px*/
border: 3px solid red;
}
//border-radius의 속성 값
크기: 둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시
백분율(%): 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정
border-*-radius 속성 - 박스 모서리 다르게 지정하기
ex)
p {
border-top-left-radius:10px;
border-top-right-radius:50px/20px; /*테두리 모서리에 가로 50px, 세로 20px 타원 겹침*/
}
box-shadow 속성 - 선택한 요소에 그림자 효과 내기
ex)
div {
box-shadow: 2px 2px 5px 0 black; /* 수평거리 2px 수직거리 2px blur 5px, 확장거리 0, 색상 검은색*/
}
//box-shadow의 속성값
수평거리: 그림자가 수평으로 얼마나 떨어져 있는지 지정(+: 오른쪽 -: 왼쪽)
수직거리: 그림자가 수직으로 얼마나 떨어져 있는지 지정(+: 위쪽 -: 아래쪽)
blur: 그림자의 흐림정도를 지정
확장거리: 그림자가 얼마나 번지는지를 나타냄
그림자 색상: 그림자 색상을 지정
inset: 박스 안쪽에 그림자를 표시하고, 사용하지 않으면 박스 바깥쪽에 그림자를 표시
배치와 관련된 블록 레벨과 인라인 레벨
블록 레벨 요소와 인라인 레벨 요소
1. 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소
// 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
// <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <blockquote>, <form>, <table>
2 인라인 레벨 요소: 줄을 차지하지 않는 요소
//<img>, <strong>, <object>, <sub>, <sup>, <input>, <textarea>, <label>
display 속성 - 요소를 어떻게 보여줄까?
// 해당 요소가 화면에 어떻게 보여질 지 지정하는 것
1. block: 블록 레벨 박스로 만든다.
2. inline: 인라인 레벨 박스로 만든다.
3. inline-block: 블록 레벨 박스이지만 인라인 레벨 박스처럼 배치
4. none: 박스를 만들지 않으며 시각적으로 표시하지 않는다.
5. table: 블록 레벨의 표로 만든다.
6. inline-table: 인라인 레벨의 표로 만든다.
/*
인라인 레벨 요소에 display:block으로 지정하면 블록 레벨 요소처럼 사용할 수 있고,
<div> 태그 같은 요소에 display:table-cell이라고 지정하면 표처럼 사용할 수 있다.
*/
ex)
ul li {
display:inline; /* 항목을 가로로 배치*/
float: left; /* 왼쪽부터 배치
}
여러 요소를 원하는 형태로 배치하기
position 속성 - 원하는 형태로 요소 배치하기
// 텍스트 나 이미지를 나란히 배치하기도 하고, 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다.
position 속성 값
static: 요소를 문서의 흐름에 맞춰 배치한다.
relative: 이전 요소에 자연스럽게 연결해서 배치한다.
absolute: 원하는 위치를 지정하여 배치한다.
fixed: 지정한 위치에 고정해서 배치한다. 요소가 화면에서 잘릴 수 있다.
ex)
<style>
#cont1 {
position: static;
background:lightyellow;
}
#cont2 {
position: static;
background:lightyellow;
}
#cont3 {
position:absolute;
left:30px; /*(body) 왼쪽 위로부터 오른쪽으로 20px 떨어져서 배치*/
top:50px; /* (body) 왼쪽 위로부터 아래로 100px 떨어져서 배치*/
background:lightyellow;
}
#cont4 {
position:fixed;
left:30px; /*수평 좌표*/
top:50px; /* 수직 좌표*/
background:lightyellow;
}
</style>
visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기
visibility 속성 값
visible: 요소를 화면에 표시한다.
hidden: 요소가 화면에서 감춰진다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 준다.
collapse: 표의 행이나 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다.
inherit: 부모 요소의 visibility 속성을 상속한다.
z-index 속성 - 요소 쌓는 순서 정하기
1. CSS에서 각 요소는 수평이나 수직으로 이동할 뿐 아니라, 한 요소 위에 다른 요소를 쌓는 z축도 고려한다.
2. z-index 값이 클수록 위에 쌓인다.
ex)
<style>
#cont1 {
position:absolute;
left:10px;
top:10px;
background:lightyellow;
z-index:1;
}
#cont2 {
position:absolute;
left:180px;
top:20px;
background:lightyellow;
z-index:3;
}
#cont3 {
position:absolute;
left:25px;
top:160px;
background:lightyellow;
z-index:2;
}
</style>
float 속성 - 요소를 떠 있게 하기
1. 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다.
2. position 속성에서 absolute 사용 금지
ex)
aside{
float: right;
width: 30%
}
clear 속성 - float 속성 무효로 만들기
why?
float 속성을 이용하여 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달됨
ex)
사이드 바를 float 속성으로 오른쪽에 배치하면 그 다음에 오는 푸터 역시 오른쪽으로 배치한다.
이 속성을 무효화시키기 위해 사용
clear 속성 값:
left: 왼쪽으로 떠 있지 않도록 한다.
right: 오른쪽으로 떠 있지 않도록 한다.
both: 왼쪽이나 오른쪽 어디에도 떠 있지 않도록 한다.
none: 왼쪽과 오른쪽 모두에 뜰 수 있다. (defalut)
다단으로 편집하기
// 브라우저 제조업체 접두사를 붙여 사용할 것
column-width - 단의 너비 지정하기
1. 한 화면을 여러 개의 단으로 구성할 때, 단의 너비를 고정해 놓고 화면을 분할할 수 있습니다. 너비 값을 바꿀 수 없기 때문에 화면이 커지면 단의 개수가 많아진다.
2. 다단으로 편집할 때 단의 너비를 기준으로 하겠다면 column-width 속성을 이용한다.
단의 너비를 기준으로 하면 브라우저 창의 너비에 따라 단의 개수가 달라진다.
column-width: 속성 값;
값: 단 너비를 직접 지정한다. 여유 공간이 많다면 지정한 너비보다 더 넓게 표시될 수 있고 여유 공간이 좁다면 지정한 너비보다 좁게 표시될 수 있습니다.
auto: 단의 개수 column-count 같은 다른 속성을 이용해 단의 너비를 결정한다.
ex)
div {
column-width:80px;
-webkit-column-width:80px;
-moz-column-width:80px;
}
column-count 속성 - 단의 개수 지정하기
1. 단의 개수로 화면 분할
column-count 속성 값
개수: 0보다 큰 값으로 콘텐츠가 들어갈 단의 개수를 지정한다.
auto: 단의 너비 column-width 같은 다른 속성으로 단의 개수를 정한다.
ex)
div {
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
}
column-gap 속성 - 단과 단 사이 여백 지정하기
column-gap: 속성 값;
값: 단과 단 사이의 여백을 숫자로 표시한다.
normal: 자동으로 여백을 지정한다.
column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기
column-rule-color: 색상 값;
column-rule-style: none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset;
column-rule-width: thin | medium | thick | 크기 값;
column-rule: column-rule-width 값 | column-rule-style 값 | column-rule-color 값
ex)
ex)
div { column-gap: 1em;
column-rule-color: black;
column-rule-style: solid;
column-rule-width: 1px;
}
다단 위치 지정하기
1. break-before:column 특정 요소 앞부분에서 단을 나눈다.
2. break-after:column 특정 요소 앞부분에서 단을 나눈다.
3. break-before: avoid-column, break-after: avoid-column
특정 요소 앞이나 뒤에서 단을 나누지 않는다.
ex)
<style>
.multicol article {
break-after:column;
/*multicol이라는 요소의 하위 article 요소 다음부터 다단 시작*/
-webkit-columns: auto 3;
-webkit-column-rule:1px dotted black;
-moz-columns: auto 3;
-moz-column-rule: 1px dotted black;
columns: auto 3;
column-rule: 1px dotted black;
}
</style>
column-span 속성 - 여러 단을 하나로 합치기
1. 중간에 단을 합쳐서 내용을 표시해야 할 경우가 있다.
column-span 속성 값
1 : 단 하나만 합치는 것이므로 합치지 않는 것과 같다.(defalut)
all : 전체 단을 하나로 합쳐서 표현한다.
ex)
.subtitle {
column-span:all;
-webkit-column-span:all;
-moz-column-span:all;
}
표 관련 스타일
표의 각 셀들은 <th>태그나 <td> 태그를 사용해 구성되는데, CSS에는 표와 셀의 형태에 영향을 주는 여러 속성들이 있다.
1. <th> 태그 나 <td> 태그에서 width 속성을 이용해 셀 너비를 고정했을 때, 그 너비보다 긴 내용을 한글로 입력하면 자동으로 줄이 바뀌면서 다음 줄로 넘어감
//만약 설정하지 않으면 레이아웃을 무시하고 한 줄로 길게 써짐
ex)
<table id = "tb1" width="300px">
<tr>
<th>CONSTRAINT_VALIDATION</th>
<td>table layout을 이용한 셀 너비 조절</td>
</tr>
</table>
table-layout 속성 값
fixed: 셀 너비를 고정한다.
auto: 셀 안의 내용에 따라 셀의 너비가 달라진다.(default)
inherit: 부모 요소의 table-layout 값을 상속한다.
셀 안의 수평 정렬과 수직 정렬
text-align 속성
1. text-align 속성은 셀 안에서 텍스트의 가로 정렬 방법을 지정한다.
text-align 속성 값
left: 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.
center: 가운데로 정렬한다.
justify: 왼쪽과 오른쪽 양쪽 끝에 맞춰 정렬한다.
vertical-align 속성
1. vertical-align 속성은 셀 안에서 텍스트의 세로 정렬 방법을 지정한다.
vertical-align 속성 값
baseline: 셀 박스의 baseline이 첫 번째 행을 확장한 baseline과 같은 높이로 배치
top: 셀 박스의 top 부분이 첫 번째 행을 확장한 top에 맞춰 배치
bottom: 셀 박스의 bottom 부분이 마지막 행을 확장한 bottom에 맞춰 정렬
middle: 셀의 center 부분이 확장한 행들의 중앙에 맞춰 정렬
border-style 속성 - 표 테두리 스타일 지정하기
ex)
td { border-style:dotted; }
border-collapse 속성 - 테두리 통합, 분리하기
ex)
<style>
#tb1{
border:1px solid black;
border-collapse;
}
<body>
<table id = "tb1">
<caption>주요 국가 통화율</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
</body>
border-sapcing 속성 - 인접한 셀 테두리 사이 거리 지정하기
1. 셀들을 분리했을 경우 인접한 셀 테두리 사이의 거리를 지정한다.
border-spacing 속성 값
크기: px이나 em 등 직접 크기와 단위를 지정할 수 있다.
inherit: 부모 요소의 border-spacing 값을 상속
empty-cells 속성 - 빈 셀의 표시 여부 지정하기
1. empty-cells 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정합니다.
empty-cells 속성 값
show: 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다.(default)
hide: 빈 셀 주위에 테두리를 그리지 않는다.
inherit: 부모 요소의 값을 상속한다.
caption-side 속성 - 갭션 위치 바꾸기
1. 캡션은 기본으로 표의 위쪽에 표시
caption-side
top: 캡션을 표의 윗부분에 표시한다.
bottom: 캡션을 표의 아랫부분에 표시한다.
ex)
caption {
caption-side:bottom;
width:auto;
text-align:center;
margin:10px;
color:blue;
fonr-weight:bold;
}
피드 구독하기:
글 (Atom)