print : 괄호안 내용을 단순히 출력. 개행문자(=줄바꿈문자=\n) 포함안됨.

printf : C에서의 printf와 동일. %d, %s 등을 쓰기위해 사용. 개행문자 포함X

println : 괄호안 내용을 출력한 후 마지막에 개행문자가 포함되어 있어 출력후 한 줄 띄워짐.

 

<예시>

public class ThreadTest extends Thread{
	public static void main(String[] args) {
		int num = 5;
		System.out.print("print ! " + num + "\n");	//print
		System.out.printf("printf ! %d \n", num);	//printf
		System.out.println("println ! " + num);		//println
	}
}

 

결과화면

println 에는 개행문자가 없는데 밑에 한칸 띄워져 있음 !

 

 

 

 

 

출처 :

moon1226.tistory.com/12

 

 

 

 

자바의 출력문(println, printf)

 

출력 - println()

 

개발자가 열심히 프로그래밍을 하더라도 결과를 볼 수 있는 명령문을 실행하지 않으면 절대 직접 눈으로 볼 수 없다. 결과를 봐야 이 프로그램이 내가 생각한대로 잘 돌아가고 있는지 알 수 있다. println은 자바에서의 기본 출력문으로 가장 많이 사용되며 출력하고 싶은 내용 그대로를 입력하여 출력한다.

 

println()

System.out.println("문자열");

          또는

System.out.println(변수명);

          또는

System.out.println("문자열"+변수명);

  • 문자열을 출력하기 위해서는 큰따옴표로 묶어줘야 한다.

  • 큰 따옴표 없는 것은 모두 변수명으로 인식한다. (입력한 변수명이 없을 경우 에러발생)

  • 문자열과 변수명을 함께 사용할 수 있으나 반드시 '+'로 연결시켜줘야 한다.

  • 가로안의 내용을 출력한 후 자동으로 줄바꾸는 기능이 있다.

Tip) 이클립스에서는 'sysout' 이라고 입력하고 'ctrl+space'를 누르면 System.out.println()이 자동 입력된다.

 

 

◈ 예제

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

public class Println {

 

    public static void main(String[] args) {

        //기본 출력문 println()        

        //sysout + 자동완성(ctrl + space)

        

        int number = 10;

        String str = "안녕, 자바";

        

        System.out.println("Hello, World."); //문자열 출력

        System.out.println(number); //int형 변수 출력

        System.out.println(str); // String형 변수 출력

        System.out.println("내 나이는 "+number+"살 입니다."); // 문자열 + 변수 출력        

        

    }//main

 

}//class

                                                                             Colored By Color Scripter

 

실행 결과

Hello, World.

10

안녕, 자바

내 나이는 10살 입니다.

 

· String과 기본형은 저장된 값 그대로 출력된다.

· 변수와 문자열을 '+'로만 이어주면 같이 사용할 수 있다.

· 실행 결과를 보면 자동으로 내용을 출력 후 줄바꿈 기능이 있는걸 볼 수 있다. 절대로 명령문을 한줄에 하나씩 써서 줄바꿈이 된 것이 아니다.

 

 

 

No. 02

 

 

형식화된 출력 - printf()

 

기본 출력문은 println()은 변수의 값을 그대로 출력하므로, 값을 변환하지 않고는 다른 형식으로 출력할 수 없다.

반면에 printf()는 지시자를 통해 변수의 값을 여러 가지 형식으로 변환하여 출력할 수 있다.

 

printf()

System.out.printf("출력 서식",출력할 내용);

  • 출력 후 줄바꿈을 하지 않는다. 줄바꿈을 하려면 지시자 '%n'을 넣어줘야 한다.

  • 출력하려는 값의 수만큼 지시자도 사용해야 한다.

  • 출력될 값과 지시자의 순서는 일치해야 한다.

  • 지시자를 제외한 문자는 입력한 그대로 출력된다.

 

출력 서식

%[-][0][n][.m]지시자

  • 출력 서식의 지시자를 제외한 나머지는 생략 가능하다. 예) %d 식으로 사용 가능.

  • n : 출력할 전체 자리수 지정(오른쪽 정렬).  예) %3d, 전체자리수가 3인 정수

  • 0 : 전체 자리수가 지정된 경우 왼쪽의 남는 자리에 0을 출력.  예) %03d

  • - : 전체 자리수가 지정된 경우 왼쪽 정렬하고 빈칸에 공백 출력.

  • .m : 소수점 아래 자리수 지정. 잘리는 소수점 자리수는 반올림 시켜서 표시.  예)3.2f

 

 지시자

설명 

 %b

 boolean 형식으로 출력 

 %d

 정수 형식으로 출력

 %o

 8진수 정수의 형식으로 출력

 %x 또는 %X

 16진수 정수의 형식으로 출력

 %f

 소수점 형식으로 출력

 %c

 문자형식으로 출력 

 %s

 문자열 형식으로 출력

 %n  줄바꿈 기능

 %e 또는 %E

 지수 표현식의 형식으로 출력

 

 

◈ 예제1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

public class Printf {

 

    public static void main(String[] args) {

        

        int age = 10;        

        String addr = "경기도";

        

        //'%n'지시자를 사용 안 했을 경우

        System.out.printf("줄바꿈 기능");

        System.out.printf("없음.");

        

        //'%n'지시자를 사용한 경우

        System.out.printf("줄바꾸기%n");

        System.out.printf("성공!%n");

        

        System.out.printf("내 나이는 %d살 입니다.%n",age);

        System.out.printf("내 나이는 %d살 이고 %s에 살고 있습니다.%n",age,addr);

        

    }//main

 

}//class

                                                                  Colored By Color Scripter

 

실행 결과

줄바꾸기 기능없음.줄바꾸기

성공!

내 나이는 10살 입니다.

내 나이는 10살이고 경기도에 살고 있습니다.

 

· 기본적으로 줄바꿈 기능이 없고 '%n'지시자를 사용한 곳에서 줄바꾸는 기능을 하는 것을 볼 수 있다.

· 지시자의 수와 출력하려는 값의 수는 같아야 하며 출력하려는 값은 콤마(',')로 구분한다.

· 출력하려는 값은 지시자의 순서와 같아야 한다.

· 지시자의 형식과 출력하려는 값의 형식이 같지 않으면 에러가 발생한다.

 

 

◈ 예제2

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

public class Printf {

 

    public static void main(String[] args) {

        //자리수 지정은 안 했을 경우 왼쪽으로 정렬된다.

        System.out.printf("자리수 미지정 :%d%n",1);

        System.out.printf("자리수 미지정 :%d%n",10);

        System.out.printf("자리수 미지정 :%d%n",100);

        System.out.printf("자리수 미지정 :%d%n",1000);

        

        //자리수 지정했을 경우  오른쪽으로 정렬된다.(남는 자리수는 공백)

        System.out.printf("자리수 지정 :%4d%n",1);

        System.out.printf("자리수 지정 :%4d%n",10);

        System.out.printf("자리수 지정 :%4d%n",100);

        System.out.printf("자리수 지정 :%4d%n",1000);

        

        //자리수 지정 후 '-'사용하면 왼쪽으로 정렬된다.

        System.out.printf("자리수 지정('-'사용) :%-4d%n",1);

        System.out.printf("자리수 지정('-'사용) :%-4d%n",10);

 

        System.out.printf("자리수 지정('-'사용) :%-4d%n",100);

 

        System.out.printf("자리수 지정('-'사용) :%-4d%n",1000);

 

        

        //자리수 지정 후 '0'사용하면 오른쪽으로 정렬된다. (왼쪽 자리수는 0으로 채운다)

        System.out.printf("자리수 지정('0'사용) :%04d%n",1);

        System.out.printf("자리수 지정('0'사용) :%04d%n",10);

        System.out.printf("자리수 지정('0'사용) :%04d%n",100);

        System.out.printf("자리수 지정('0'사용) :%04d%n",1000);

        

    }//main

 

}//class

                                                                       Colored By Color Scripter

 

실행 결과

자리수 미지정 :1

자리수 미지정 :10

자리수 미지정 :100

자리수 미지정 :1000

자리수 지정 :    1 

자리수 지정 :  10

자리수 지정 : 100

자리수 지정 :1000

자리수 지정('-'사용) :1

자리수 지정('-'사용) :10

자리수 지정('-'사용) :100

자리수 지정('-'사용) :1000

자리수 지정('0'사용) :0001

자리수 지정('0'사용) :0010

자리수 지정('0'사용) :0100

자리수 지정('0'사용) :1000

 

 

◈ 예제3

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

public class Printf {

 

    public static void main(String[] args) {

        

        float f = 1.2345f;

        

        //소수점 자리수 미지정시

        System.out.printf("소수점 자리수 미지정 : %f%n",f);

        //소수점 자리 지정시

        System.out.printf("소수점 자리수 지정 : %.3f%n",f);    

        

    }//main

 

}//class

                                           Colored By Color Scripter 

 

실행 결과

소수점 자리수 미지정 : 1.234500

소수점 자리 지정 : 1.235

 

· 소수점 자리를 3자리로 지정했기 때문에 4번째 자리에서 반올림한 결과를 출력한다.

 

 

 

출처 :

keep-cool.tistory.com/15

'Web Programming Language > JAVA' 카테고리의 다른 글

BitSet 클래스  (0) 2025.02.17
DTO와 VO  (0) 2025.02.12
Records  (1) 2025.02.12
orElse vs orElseGet 차이점  (0) 2025.02.12
JAVA) Java 프로그램 실행 구조  (0) 2020.11.18

함수설명 :

readfile 함수는 파일을 읽은 후, 출력을 합니다.

 

반환값 :

이 함수는 성공하거나 실패할 경우에 읽은 바이트 수를 반환합니다.

 

기타 :

함수 이름앞에 @를 붙이면, 출력 오류를 숨길 수 있습니다.

 

정의 : 

readfile(filename)

 

filename : 파일의 이름을 입력받습니다.

 

<?php
$file = '/usr/share/apache2/icons/ubuntu-logo.png';
if( !file_exists($file) ) {
	echo "파일이 없습니다.";
	exit;
}
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="'.basename($file).'"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));

readfile($file);

 

 

이 함수를 실행하면,

해당 파일의 내용이 모두 웹 브라우저에 출력된다.

 

특정 파일의 내용을 출력할 때 사용할 수 있지만, 실제로는 해당 파일의 다운로드를 구현하기 위해 많이 사용된다.

 

일반적으로는, 파일의 링크를 연결해두고 클릭하면 다운로드 창이 뜨게 되지만, txt문서나 이미지 파일의 경우 웹 브라우저에서 지원하는 형식의 파일이면 파일 다운로드 창이 뜨지 않고 웹 브라우저에 바로 보여지게 된다.

 

이처럼 웹 브라우저에서 보이는 것을 방지하고 파일 다운로드 창이 뜨도록 하려면 파일의 형식을 속여야 한다.

 

 

 

 

출처 :

m.blog.naver.com/PostView.nhn?blogId=writer0713&logNo=220191525288&proxyReferer=https:%2F%2Fwww.google.com%2F

HTTP Content-Disposition란

 

Disposition이란 기질, 성향, 배치, 배열 이란 뜻이다.

 

HTTP Response Header에 들어가는 Content-DispositionHTTP Response Body에 오는 컨텐츠의 기질/성향을 알려주는 속성이다.

 

default 값은 inline으로 web에 전달되는 data라고 생각하면 된다.

 

특수한 경우는 Content-Disposition에 attachment 속성을 주는 경우로, 이때 filename 속성 함께 주게 되면 Body에 오는 값을 다운로드 받으라는 뜻이 된다.

 

filename 속성 : 파일 출력을 할 때, 어떠한 파일명으로 저장할 것인지 설정하는 것.

 

Content-Disposition: attachment; filename="hello.jpg"

 

"는 서버측에서 header를 설정할 때 붙이지 않아도 되는 듯 하다

 

 

 

 

 

 

 

 

 

 

 

 

http에서 응답 헤더에 content-dispostion을 명시하여

브라우져로 하여금 전송된 파일을 디스크에 직접 다운로드 받을 것인지 혹은 브라우져로 보여줄 것인지 설정할 수 있다.

Content-Disposition: inline

 

Content-disposition: inline

브라우저 인식 파일확장자를 가진 파일들에 대해서는 웹브라우저 상에서 바로 파일을 자동으로 보여줄 수 있어서, 의미상인 멀티파트 메시지를 표현하는데 있다.

그 외의 파일들에 대해서는 "파일 다운로드" 대화상자가 뜨도록 하는 헤더속성이다.

 

 

속성이 inline인 경우 브라우져에서 응답을 받으면 아래와 같이 브라우져에서 바로 보여준다.

Content-Disposition: attachment

 

Content-disposition: attachment
브라우저 인식 파일확장자를 포함하여 모든 확장자의 파일들에 대해,

다운로드시 무조건 "파일 다운로드" 대화상자가 뜨도록 하는 헤더속성이라 할 수 있다.

 

이때, filename 속성 함께 주게 되면 Body에 오는 값을 다운로드 받으라는 뜻이 된다.

 

filename 속성 : 파일 출력을 할 때, 어떠한 파일명으로 저장할 것인지 설정하는 것.

 

 

속성이 attachment인 경우 아래와 같이 다운로드창이 뜨게 된다.

 

 

 

 

출처 :

lannstark.tistory.com/8

 

[웹/HTTP] 응답 헤더의 Content-Disposition 속성작성자 호로요이이

 

https://knight76.tistory.com/entry/30042769264 [김용환 블로그(2004-2020)]

 

 

 

'Web Programming Language > PHP' 카테고리의 다른 글

PHP) basename() 함수 - 파일 이름 반환  (0) 2021.07.01
PHP) readfile() 함수  (0) 2021.01.15
PHP) HTTP Header - MIME-Type, Content-Type  (0) 2021.01.14
PHP) shell_exec() 함수  (0) 2020.11.05
PHP) system() 함수  (0) 2020.11.05

content-type이란 

간단히 말해 보내는 자원의 형식을 명시하기 위해 헤더에 실리는 정보이다. 이 값은 표준 mime-type중의 하나이다.

 

MIME-Type, Content-Type이란 무엇인가?

 

우리가 클라이언트 브라우저로 어떤 자원을 보낼때(어떤 형태의 파일이나 문서 등), 웹 서버는 일련의 HTTP 헤더로 파일이나 자원을 포함하는 바이트의 Stream을 앞에 보낸다. 이런 헤더는 클라이언트에게 웹 서버와 커뮤니케이션 세부사항을 묘사한다. 예를 들어, 헤더는 사용되고 있는 웹 서버의 소프트웨어의 타입, 서버의 날짜와 시간, HTTP 프로토콜, 사용중인 커넥션 타입등을 지정한다. 헤더는 또한 클라이언트가 이런 가상 패스나 도메인에 대해서 저장해야 할 쿠키를 포함한다.

이와 관련해서 가장 중요한 것은 헤더는 또한 보내지는 자원의 content 타입이 포함되는 것이다. 이것은 Content-Type 헤더에 의해 지정되는데, 이 값은 표준 MIME-Type의 하나이다. MIME-Type을 살펴봄으로써 브라우져는 데이터를 나타내는데 어떤 종류의 파일 Stream인지를 알고 있다. HTML 페이지에 MIME-Type을 가진다.

 

Content-Type의 종류

1) Multipart Related MIME 타입

  - Content-Type: Multipart/related                        <-- 기본형태

  - Content-Type: Application/X-FixedRecord

 

 

2) XML Media의 타입

 - Content-Type: text/xml

 - Content-Type: Application/xml

 - Content-Type: Application/xml-external-parsed-entity

 - Content-Type: Application/xml-dtd

 - Content-Type: Application/mathtml+xml

 - Content-Type: Application/xslt+xml

 

 

3) Application의 타입 

 - Content-Type: Application/EDI-X12                      <--  Defined in RFC 1767 

 - Content-Type: Application/EDIFACT                     <--  Defined in RFC 1767 

 - Content-Type: Application/javascript                 <-- Defined in RFC 4329 

 - Content-Type: Application/octet-stream          <-- 디폴트 미디어 타입은 운영체제 종종 실행파일, 다운로드를 의미

 - Content-Type: Application/ogg                           <-- Defined in RFC 3534

 - Content-Type: Application/x-shockwave-flash         <-- Adobe Flash files

 - Content-Type: Application/json                         <-- JavaScript Object Notation JSON; Defined in RFC 4627 

 - Content-Type: Application/x-www-form-urlencode   <-- HTML Form 형태

 

* x-www-form-urlencode와 multipart/form-data은 둘다 폼 형태이지만 x-www-form-urlencode은 대용량 바이너리 테이터를 전송하기에 비능률적이기 때문에 대부분 첨부파일은 multipart/form-data를 사용하게 된다.

 

 

4) 오디오 타입

- Content-Type: audio/mpeg                                   <-- MP3 or other MPEG audio

- Content-Type: audio/x-ms-wma                             <-- Windows Media Audio;

- Content-Type: audio/vnd.rn-realaudio                     <--  RealAudio;  등등 

 

 

5) Multipart 타입

- Content-Type: multipart/mixed: MIME E-mail; 

- Content-Type: multipart/alternative: MIME E-mail;

- Content-Type: multipart/related: MIME E-mail           <-- Defined in RFC 2387 and used by MHTML(HTML mail) 

- Content-Type: multipart/formed-data                      <-- 파일 첨부

 

 

6) TEXT 타입 

- Content-Type: text/css

- Content-Type: text/html

- Content-Type: text/javascript

- Content-Type: text/plain

- Content-Type: text/xml

 

 

7) file 타입

- Content-Type: application/msword                       <-- doc

- Content-Type: application/pdf                             <-- pdf

- Content-Type: application/vnd.ms-excel                <-- xls

- Content-Type: application/x-javascript                  <-- js

- Content-Type: application/zip                             <-- zip

- Content-Type: image/jpeg                                  <-- jpeg, jpg, jpe

- Content-Type: text/css                                       <-- css

- Content-Type: text/html                                     <-- html, htm

- Content-Type: text/plain                                    <-- txt

- Content-Type: text/xml                                      <-- xml

- Content-Type: text/xsl                                       <-- xsl

 

 

 

 

 

 

++)

Content-Type: Application/octet-stream

  • application/octet-stream는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다.
  • 이 타입은 이진 파일을 위한 기본값입니다. 이 타입은 실제로 잘 알려지지 않은 이진 파일을 의미하므로, 브라우저는 보통 자동으로 실행하지 않거나 실행해야 할지 묻기도 합니다. Content-Disposition 헤더가 값 attachment와 함게 설정되었고 'Save As' 파일을 제안하는지 여부에 따라 브라우저가 그것을 다루게 됩니다.

사용 예)

파일 다운로드 기능에서는 파일 타입(형식)을 일일이 명시할 수 없기에 임의의 파일 타입 형태인, application/octet-stream으로 설정해준다.

 

 

 



출처 :

https://iamawebdeveloper.tistory.com/88 [나는 웹개발자!]

 

developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

'Web Programming Language > PHP' 카테고리의 다른 글

PHP) readfile() 함수  (0) 2021.01.15
PHP) HTTP Response Header - Content-Disposition 속성  (0) 2021.01.15
PHP) shell_exec() 함수  (0) 2020.11.05
PHP) system() 함수  (0) 2020.11.05
PHP) $SERVER, $_SERVER['PHP_SELF']  (0) 2020.11.05

Java 프로그램 실행 구조

(Java 소스 작성부터 프로그램 실행까지의 순서)

 

 

 

 

출처

: 인프런 - 자바 프로그래밍 입문

'Web Programming Language > JAVA' 카테고리의 다른 글

BitSet 클래스  (0) 2025.02.17
DTO와 VO  (0) 2025.02.12
Records  (1) 2025.02.12
orElse vs orElseGet 차이점  (0) 2025.02.12
JAVA) print, printf, println 차이점  (0) 2021.03.11

<table> 태그

 

표 작성을 위한 아주아주 기본 태그와 정의

보통 데이터를 보여줄 때 테이블을 많이 쓰는데요

너무 기본 태그인지라 포스팅하기가 좀 그릏지만 제가 좋아하는 언니를 위해서 열심히 끄적끄적해봅니다.

인터넷 오픈 소스에서 가져온 그림이지만

이렇게 이쁘게 뭔가 정보를 보여줄 때 <table>태그를 사용해요

그 외에도 활용도가 높은 기본 템(?) 이죠

그냥 여러 예시 구현해보면서 진행할게요

 

테이블에 사용되는 태그

테이블은 기본적으로 <table> </table>태그를 사용합니다

테이블을 구현하기 위해서 알아야하는 기본 태그가 몇 개 있는데요~

 

◆ tr태그

일반 행은 table row의 약자 <tr></tr>태그를 사용합니다. 위의 그림의 경우 총 6개의 행이 있으니 <tr>이 6개 사용됐겠네요

 

◆td태그란

첫 번째 데이터 행안에는 몇 개의 데이터가 있나요 4개의 데이터가 들어있네요

각각의 행은 4개의 데이터를 가지고 있어요 (이름, 등록날짜, 역할, 상태)

table data라고 해서 <td></td>태그를 사용합니다

 

th태그란

즉 한 행에 4개의 데이터가 있으니, <tr><td></td> <td></td> <td></td> <td></td> </tr> 구조를 띠겠어용

저어어기 사진 예시에서 보이듯 맨 첫번째줄이 나 제목이야~를 알리기 위해서 진하게 표시되어있죠

ex Username / Date registered / Role / Status 라인부문

 

<th></th>태그는 이와 같이 제목 데이터 표시할 때 사용합니다. (table headline 의 약자인듯?)

제목에는 <td>대신에 <th>를 써주면 됩니다.

 

 

기본 테이블로 함 구성해보자

<table> 
	<tr><th>제목</th><th>제목2</th></tr> 
    <tr><td>1행1데이터</td><td>1행2데이터</td></tr> 
    <tr><td>2행1데이터</td><td>2행2데이터</td></tr> 
</table>

요렇게 작성하면 결과는 아래처럼 됩니다.

 

테이블 꾸미기

 

Border 속성 - 테두리선

Border css는 깔끔한 표를 만들기 위해서 만져줘야 하는 속성이죠.

[1] 전체 테두리 border , [2] 데이터마다 border(seperate), [3]겹치는 거 싫어 깔끔하게 원라인으로

 

한 눈에 그림으로 보니까 border를 어떻게 해주느냐에 따라 어떤 차이가 있는지 딱 보이죠?

 

[1] table { border: 1px solid red; } <!--1px :선의 굵기 solid: 선 종류 red: 선 색깔 -->
[2] td { border: 1px solid red; } 
<!--테이블은 이렇게 하나의 데이터를 각각 감싸는 게(separate) 기본 설정이라 따로 collapse 속성을 설정해주지 않으면 
이와 같이 나옵니다. 이렇게 겹치는거 보기 싫고 한줄로 깔끔하게 보여지고 싶다면 [3]-->
[3] table { border-collapse : collapse } td { border: 1px solid red; }

[1] 첫 번째는 테이블에다가 테두리설정을 해준거라 맨 겉에만 됨.

[2] 두 번째는 th에는 테두리가 없는데 td에만 테두리가 있는걸로 보아 td에 border 속성을 넣어준거죠.

[3] 근데 이렇게 겹쳐ㅣ는게 싫을 경우 border-collapse옵션을 사용합니다.

 

[4] 열 선 없이 행에다가만 적용 [5] td에다가 bottom으로 적용했을 경우 저렇게 공백이 생김 [6] tr에다가만 적용

신기(?)한 사실은 [4]그림처럼 열[column] 선 없이 행에다가만 border를 적용하고 싶어서

tr { border: 1px solid red; } 이렇게 tr에다가 border css를 적용하려고 하면 먹지 않습니다.

 

 

그래서 tr이 아닌 td에다가 (border하면 열[column] 선까지 포함되므로) bottom만 적용하는 코드로 구현하면 [5]그림처럼 data사이의 간격에 선이 이어지지 않고 잘려요

 

[5] td { border-bottom: 1px solid red; }

 

그래서 tr에 적용을 해주는게 좋은데 tr의 경우 separate model일 경우에는 border속성이 적용되지 않습니다.

아래 코드처럼 테이블 태그를 separate가 아닌 collapse 속성으로 변경 후 border속성을 적용시켜줘야 제대로 작동합니다.

 

[4] table { border-collapse: collapse; } 
tr { border : 1px solid red; }

 

행의 모든 경계를 그리는 것! 그러므로 [4]와 같은 모양이 되고, 겉테두리 경계를 제거하고 싶으면 border대신 border-bottom속성만 적용해주면 [6]처럼 구현할 수 있습니다.

 

border (전체) , border-top (위 라인만) , border-bottom (아래 선에게만), border-left (왼쪽), border-right(오른쪽)

이렇게 전체에 줄 수도 각각에게 줄 수도 있습니다.

 

선 종류로는 solid외에도 아래처럼 dashed, dotted, double 등이 있습니다.

 

[7] table { border: 3px dashed blue; } [8] table {border: 3px dotted coral; } [9] table { border: 3px double orange;}

맨 첫 번째께 dashed 했을 때 점선 

두 번째가 dotted했을 때 

마지막이 두줄선 즉 double 했을 때 결과입니다.

 

 

표 간격 이쁘게 --열(column)

[2-1] 너무 따닥따닥 붙어있어서 보기 힘듬 

[2-2] 어떤건 데이터가 짧고 어떤건 길고 간격을 떼어나도 안이쁨

이렇게 [2-1]처럼 되어 있으면 너무나 보기 힘들죠. 그래서 좀 깔끔하게 정리해보는..

한 행에 [1행데이터][응][경기도고양시블라블라] 이렇게 3개의 데이터가 들어있는데 너무 따닥따닥 붙어 있어서 알아보기가 힘들어요. 그래서 데이터의 가로 길이를 설정해서 좀 띄어줍니다.

 

[2-2] td { width: 200px; }

 

그런데 2번째 열은 칸은 긴데 내용이 너무 짧은 데이터라 이상하잖아요 ex) 성별(여 or 남) 질환(있음 or 없음)등등

[2-3] 각각 열의 크기에 맞게 길이 정하기

 [2-4] 데이터는 왼쪽정렬인데 제목만 가운데정렬인거 거슬렸던거 통일

[2-5] nth-child응용해서 색깔 행에 적용시켜보기

 [2-3]처럼 행에 맞게 길이를 주는 데 도움되는 녀석으로 nth-child()라는 셀렉터를 사용해볼거예요.

뒤에 ':nth-child(n)'를 붙여주면 n번째 요소에만 적용해줍니다. 즉 :nth-child(1)은 첫번째 요소인거죠

 

[2-3]
td:nth-child(1){ width: 100px; }
td:nth-child(2){ width:60px; }
td:nth-child(3){ width:200px;}

[2-4] th는 기본적으로 가운데 정렬입니다. text-align 속성으로 통일성을 높이고자 왼쪽정렬로 바꿔주었어요
th {  text-align:left;  }

[2-5] nth-child의 응용입니다. 이번에는 td가 아닌 짝수행(tr)의 배경색깔 변경에 사용했어요
tr:nth-child(even){   background: ghostwhite; }

 

배경 색

[2-6] tr 에 배경색을 줬을 경우 

[2-7] 첫 번째 행만 제외하고 속성을 적용시키고 싶을 경우

 

[2-6] tr{   background: lightgray; }
[2-7] tr:not(:first-child) {background : lightgray; } <!--first-child는 결국 nth-child(1)과 같아요-->

제외하고 싶을 경우 not키워드를 이용하면 된다는거~!

first-child는 nth-child(1)과 동일합니다. 이런식으로 선별적으로 배경색을 줄 수 있어요. [2-5]그림 추가적으로 참조!

 

 

표 간격 이쁘게2 -- 행(row)

근데 열뿐만 아니라 행사이에서도 너무 글자크기만큼만 행이 크면 답답해보이잖아요

padding을 주고 싶은데 tr에는 또 얘가 안먹습니다..ㅎ

예전에는 padding이 tr을 포함해서 모든 element에 적용이 됐다고 해요 근데 복잡한 어떤 구조때문인지 padding이 안먹히게 바뀌었고 그것 때문에 생긴 불편함으로 논란이 많았지만,, 안먹히는걸로 결론이 난 상태입니다 (자세한 얘기 아시는분은 알려주시면 감사하겠음..) 그래서 내부 간격을 위해 우리는 td에다가 padding을 적용할거~

[2-8] [2-9] border로 명확히 보기

좀 간격이 달라진게 보이죠? [2-8]은 td{ padding : 15px 5px 10px 5px; } 이렇게 적용한 결과입니다

padding : 위 오른 밑 왼 (시계 방향으로 간격을 준다고 생각하면 돼요

좀 더 확실히 확인하고 싶으면 [2-9]처럼 border를 일부로 줘서 어떻게 늘어나는지 확인하면 좋은 복습이 될 듯 합니다.

 

 

 

출처 :

jhnyang.tistory.com/285

+ Recent posts