웹퍼블리셔가 알고있어야 할 display:table 속성

오늘 다룰 주제는

사이트에서 많이 사용되는 형태인

동일한 넓이와 간격을 가지고 있는 컨텐츠 (정확한 명칭을 몰라서 ㅎㅎ....)

에 대해 알아보도록 하겠습니다.

(글이 지루하신 분은 Ctrl + F 를 눌러 '결론' 을 검색해 주시지 마세요. 읽고서 댓글로 짱똘 던져주세요 +_+ ㅎㅎㅎ;;;)

moon_and_james-39

아마 위의 사진과 비슷한 형태를 작업해 보신 분들이 많을거라고 생각되는데요.

제가 웹퍼블리싱을 배울때

float으로 컨텐츠를 띄워 붙이고(왼쪽이나 오른쪽!)

width값을 100%/ n(갯수) 만큼 주면

동일한 간격으로 정렬이 된다고 배웠습니다!

4개 정렬 = 25%

5개 정렬 = 20%

6개 정렬 = 16.66%

· · ·

이런식으로 말이죠.

많이들 알고 있는 공식(?) 이시잖아요~

moon_and_james-4

저 또한 저 방법을 이용하여 작업을 했었습니다!(과거형!)

작업자님~~~

디자인 파일 메일로 보내드렸어요~!!

확인 부탁드려요!

sally_special-5

네~~~

(딸깍딸깍)

brown_and_cony-65

별거 없군! 금방 끝내주겠어!!

(다다다다다다다다다다다다다다다닥다다닥)

	
			.boxwrap {
    overflow: hidden;   
}
 
.boxwrap .box {
    float:left;
    width:25%;
}

짜잔~~! 다했따아~~

집에 가야지

brown_and_cony-65

개발자님~

작업물 푸시 했어요!

확인 부탁드려용~

이봐 스물쿤!! 갯수가 3개일때 이상하게 나오는데..?

확인좀 오네가이!

moon_and_james-56

우씨... 알았어요..!

	
			.boxwrap .box.length3 {
    width:33.33%;
}

3개 일때는 length3 클래스 추가해주세요!

moon_and_james-68

됐죠??

그럼 전 20,000....

어이어이~

2개일때는!!!? 5개일때는!!?? 6개 일때는..!!?

moon_and_james-82

(저 개ㅈ....ㅏ......ㅅ...)

moon_and_james-71

훗.. 금방 해드리죠!!

	
			
			.boxwrap .box.length2 {
    width:50%;
}
 
.boxwrap .box.length5 {
    width:20%;
}
 
.boxwrap .box.length6 {
    width:16.66%;
}

		

자요!! 됐죠!!?

moon_and_james-83

전 진짜 20,000~~ 수고하세용~~

· · · ·

저 개ㅅ.....

사진=영화 '어벤져스: 인피니티 워 닉퓨리역의 사무엘 잭슨 '

어머니....

----------------------------------------------------------------------------------------------------------------------------

자... 지금까지 스물쿤의 작업을 보셨습니다.

개발독은 스물쿤의 소스가 무척이나 별로라고 생각 할겁니다.

(끄덕끄덕)

프로젝트 마다 다르겠지만

컨텐츠의 갯수가 고정적으로 정해져 있을수도,

유동적으로 변할수도 있습니다!.

과거의 퍼린이 였던 스물쿤은 이런점을 생각하지 못했었습니다.

brown_and_cony-47

스물쿤의 소스를 한번 최종적으로 볼까요??

	
			
			.boxwrap {
    overflow: hidden;   
}
 
.boxwrap .box {
    float:left;
    width:25%;
}
 
.boxwrap .box.length2 {
    width:50%;
}
 
.boxwrap .box.length3 {
    width:33.33%;
}
 
.boxwrap .box.length5 {
    width:20%;
}
 
.boxwrap .box.length6 {
    width:16.66%;
}

		

이 소스가 결코 잘못되었다 고! 말할수는 없습니다.

이것도 방법이라면 방법이니까요.

하지만 좋은 방법은 아니죠.

갯수 제어 때문에 넓이를 조절하는 css가 4개나 더 늘었어요!!

만약 한줄에 7개, 8개 9개 10개 등등등... 갯수가 더 추가된다면

더 많아지겠죠!?!?!?

brown_and_cony-73

이쯤 되면 결코 좋은 소스라고 할수 없습니다.

이러한 넓이를 제어하는 CSS를

싹!! 없애버릴수 있는 방법이 있습니다.

그거슨 바로!!

table 과 table-cell 입니다~!

~~(이말 하나 하려고 참 오래도 걸린다 임마!!)~~

brown_and_cony-48

부모태그에 display : table을 선언해 주고!

자식태그에 display : table-cell을 선언해주면

갯수가 몇개가 되든 동일한 간격으로 영역 가지게 됩니다

(100개,200개가 되면 찌부가 될수 있겠죠...? 그렇게 가지는 않을테고..)

----------------------------------------------------------------------------------------------------------------------------

brown_and_cony-65

(다다다다다다닥)

	
			
			.boxwrap {
    display:table;
    width: 100%;    
}
 
.boxwrap .box {
    display:table-cell;
    vertical-align: middle;
}

		

???: 에이 안되는구만

???: 동일하긴 뭐가 동일합니까!!

길쭉해 지는구만.....

sally_special-30

(에잇... 괜히 읽었어!!)

brown_and_cony-71

하하하....

제가 실수로 빼먹은게 있네요...

	
			
			.boxwrap {
    display:table;
    width:100%;
    table-layout: fixed;
}
 
.boxwrap .box {
    display:table-cell;
            vertical-align: middle;
}

		

부모태그에 table-layout: fixed를 선언해 주시면!

짜잔~~~!

moon_and_james-74

동일한 넓이를 가지게 됩니다~!!

brown_and_cony-68

신기하죠~~~~~~!!!?!?!?!?!?

ㅅ....시....신...기....

하...ㅅ...ㅣ..죠...?;;

----------------------------------------------------------------------------------------------------------------------------

sally_special-9

(야.. 왜 갑자기 말돌려...)

넵.! 저는 오늘 여러분에게

CSS 속성인

- display: table

- display: table-cell

- table-layout: fixed

의 존재 에 대해 말씀 드리고 싶었습니다!

sally_special-37

이 속성이 '어떻게' 쓰이고 '무엇무엇' 이다~

라는 부가적인 설명은 안하고자 합니다.

왜냐하면 스물쿤도 퍼린이 시절..

새로운것 ,신기한 것을 발견하면

moon_and_james-5

그 속성에 대해 열심히 찾아보았거든요 ㅎㅎ...

그러면서 재미도 느끼고 뭔가, 내가 발전해 간다는게 느껴져서 뿌듯했었죠.

저 보다도 먼저 이러한 속성을 잘~ 정리해 주신 분들이 많답니다 ㅎㅎ

brown_and_cony-79

??? : 괜히 모르ㄴ...

brown_and_cony-42

(쌰랍)

----------------------------------------------------------------------------------------------------------------------------

아무튼... 끝으로!!

처음에는 flex라는 속성으로 작업을 했었는데

이게 익스에 하위버전에서는 안되어 어쩔줄 몰라 하고 있었는데

그때 알게된 방법이 바로 display table 속성 이었죠!

(플롯밖에 몰랐던 나란 퍼린이...)

부족하고 노잼인 제 글을 읽어 주신분들께는 1감사 1따봉을 드리며

짧게 요약을 하고 저는 이만 물러 가겠습니다~!

brown_and_cony-46

(사장님 저 퇴근.....)

결론

1. display: table , table-cell 쓰세요.

2. table-layout : fixed도 쓰세용

3. 아래 링크에서 해보세영!

http://jsfiddle.net/209p16n5/21/

여러분 안녕~~

brown_and_cony-80

출처 : https://www.biew.co.kr/35?category=314306

번호	제목	글쓴이	날짜	조회 수
71	스크롤 바(Scrollbar) 스타일링	팔공산	2024.05.13	31
70	현재 시간 실시간으로 카운트 출력	팔공산	2024.03.31	100
69	line-height 와 height의 차이점	팔공산	2023.04.02	1,090
68	css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리 1	팔공산	2022.04.25	2,368
67	flex로 세로 가로 정렬 하기 1	팔공산	2022.04.22	915
66	버튼 클릭시 클립보드에 복사하는 방법	팔공산	2021.12.31	2,050
65	Hover시 테두리두께 설정	팔공산	2021.11.05	2,559
64	CSS 색상 이름 rgb , 16진수 자료( css 색상표 )	팔공산	2021.02.15	857
63	display 속성: inline, block, inline-block	팔공산	2021.02.02	922
62	접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기 4	팔공산	2021.01.23	24,755
61	글 색상을 랜덤으로 출력하기	팔공산	2020.11.30	1,032
60	div 영역에 Width:100%; height:100%; 적용해 보기 - display:table	팔공산	2020.10.12	1,513
59	홈페이지에 화려한 에니메이션 효과를 주기 - aos animate	팔공산	2020.08.29	2,774
»	웹퍼블리셔가 알고있어야 할 display:table 속성 4	팔공산	2020.02.20	1,012
57	HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때	팔공산	2019.03.01	2,053
56	CSS 말줄임 처리하기	팔공산	2018.11.13	1,770
55	폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 6	팔공산	2018.09.26	16,603
54	DIV 영역 자체에 링크 거는 방법 4	팔공산	2018.09.23	28,249
53	DIV 화면 정중앙에 박스 배치하기	팔공산	2018.09.19	1,023
52	DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )	팔공산	2018.09.19	2,165

웹퍼블리셔가 알고있어야 할 display:table 속성

단축키

단축키

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

웹퍼블리셔가 알고있어야 할 display:table 속성

단축키

단축키

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

LOGIN