1 > 1000

생리가 볼드모트도 아니고.

yucalip — Wed, 28 Jun 2017 02:30:40 +0900

나는 생리컵이 너무 좋다.

가끔 내가 초경을 시작한 무렵 생리컵을 알았더라면 내 삶의 질이 얼마나 달라졌을지 상상해보곤 한다.

나는 또래 친구들보다 초경이 늦은 편이었다.

월경이 어떤 느낌인지 너무 궁금해서 친구들에게 어떤 느낌인지 물어보고 다니곤 했다.

그 질문에 친구들은 곤란한 표정을 지으며 "뭐 그냥 있으면 나와..." 라는 식으로 얼버무리기 일쑤였다.

생리대 -> 탐폰 -> 천 생리대 -> 생리컵 순서로 월경 용품을 사용해보고,

월경 용품에 따라 이렇게 큰 차이가 있음에 월경 용품과 내 몸에 저절로 관심이 많이 생겼다.

새로운 사실들을 알아가면서 "왜 이렇게 중요한 걸 아무도 알려주지 않았지?" 라는 의문이 많이 들었다.

인터넷이 발달해서 맛집 공유나 화장품 리뷰가 활발한 지금에도,

여전히 월경, 월경 용품에 대한 전문 정보나 후기 등이 턱없이 부족한 것을 보면 신기하다.

인구의 반은 여성이고, 여성 대부분이 월경을 하거나 했는데, 왜 이렇게 정보가 부족한지.

"생리", "월경"은 정말 터부시 되어있는 정보인 것 같다.

"생리", "월경"이라는 단어는 아직까지 많은 사람들을 곤란하게 한다.

이 단어들을 꺼냈을 때 어떤 이들은 말이 없어지고, 어떤 이들은 마주치고 있던 눈을 피한다.

이런 곤란함은 남녀를 불문한다.

여중 여고 그리고 남녀비율이 1:10인 학과를 나와서 계속 여초 사회에서 살아온 나도

생리에 대해 대놓고 말하지 않는 것이 상식임을 눈치껏 배워왔다.

생리통이 있어도 생리통이 있다고 말을 못하고, "배가 아파요" 라고 해도 못 알아 들으면 "[그날]이예요" 라고 한다.

생리대를 안가져 오면 친구에게 귓속말로 "너 혹시 [그거] 있어?" 라고 하면 거의 대충 알아챈다.

그래도 모르면 "대~ 있어? 대?"라고 말한다. 절대 풀네임은 거론하지 않는다.

이것 참.. 생리가 볼드모트도 아니고..

아무튼, 생리컵과 천 생리대를 알게 된 이후로

생리컵에 관한 정보를 알리는 프로젝트도 하고, 주변에 생리컵을 홍보(?)하기도 하고,

일부러 더 공공연하게 이야기 하고 있는데,

신기한 것은 이렇게 대놓고 이야기하기 시작하니

나의 부모님도 친구들도 나와 같이 다른 사람들에게 대놓고 이야기하기 시작하는 것이었다.

작은 변화이지만 신기하게 생각하고 있다

나는 매달 생리컵을 사용하면서 매달 "생리컵 발명한 사람은 정말 노벨상을 줘야해" 라고 말하고 다니고,

여성의 몸과 생리, 생리용품에 대한 연구나 정보가 정말 놀랄만큼 부재함을 느끼고 있으며,

매일 좀더 생리에 대해 공공연하게 이야기하는 문화를 바라고 있다.

나의 사춘기 때와는 달리 자라나는 세대들은 생리를 생리, 월경이라 말할 수 있는 문화 속에서 자라나면 좋겠다.

three.js를 위한 HTML 스켈레톤 생성

yucalip — Thu, 22 Jun 2017 17:02:53 +0900

three.js를 이용해 웹에서 인터랙티브한 3d 장면을 구현하기 위해서 HTML 파일을 기본 세팅하는 것을 알아보자.

<Three.js로 3D 그래픽 만들기 2/e> 책에 나온 내용을 참고하였다.

책은 외국 책을 번역한 것이라 html 랭귀지를 설정하는 것이나 인코딩 설정하는 부분이 없다.

이 부분을 작성하지 않으면 title 부분을 비롯해서 한글 부분이 깨져서 나오니, 콘텐츠에 한글이 들어간다면 꼭 적어주어야 한다.



<!DOCTYPE HTML>
<html lang="ko">
<head>
		<meta charset="UTF-8">
		<title>Three.js를 위한 HTML 기본 스켈레톤</title>
		<script src="../learning-threejs/libs/three.js"></script>
		<!-- 전체 페이지를 사용하고, 스크롤바가 생기지 않기 위한 설정 -->
		<style>
			body{
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<!-- 렌더링 된 결과물이 표시될 div-->
		<div id="WebGL-output"></div>

		<script>
			function init() {
				//이 안에 모든 three.js 코드를 집어넣는다.
			}

			window.onload = init;
			// html 문서의 로딩이 끝났을 때 이 init 함수를 실행한다.
		</script>
	</body>
</html>

이제 전역 변수 설정을 제외한 모든 three.js 코드는 function init() { } 안에 적어주면 된다.

[생리컵] 몇천원에 살 수 있는 저렴한 생리컵을 써도 괜찮을까?

yucalip — Thu, 6 Apr 2017 23:52:10 +0900

단돈 몇천원이면 살 수 있는 저렴한 생리컵들이 있다니!

홈페이지가 잘 갖춰진 브랜드 생리컵들을 구매하는 데는 제품 가격+해외 배송비까지 해서 4~5만원 정도가 든다. 내가 잘 쓸 수 있을 지 알 수 없는, 게다가 직접 보고 고를 수도 없는 제품을 해외직구로 구매하는 것은 솔직히 부담스러운 일이다. 그런 입장에서 알리익스프레스나 이베이 등 오픈마켓에서 파는 단돈 2~3천원짜리 생리컵은 "나도 생리컵 한번 써볼까?" 생각했던 사람들에게 반가운 소식이 아닐 수 없다.

검색해보니 이미 많은 분들이 저렴한 생리컵을 구매해서 사용하고 있는 것 같았다. 3천원이면 생리컵을 살 수 있다니 나도 호기심이 발동하여 지난 3월에 알리에서 7곳의 상점에서 파는 11개의 생리컵을 구매해보았다. 3 ~ 4주가 넘어가니 2 곳을 제외한 7 곳의 상점에서 배송이 왔고, 총 9개의 생리컵들이 도착하였다. 몇몇은 가격에 걸맞는 얇은 포장으로 인해 컵 부분이나 꼬리 부분이 휘어져 있었지만 대부분은 반듯한 형태로 잘 도착했다.

저렴한 생리컵을 쓰면 몸에 안좋지 않을까?

나는 생리컵을 사용하기 얼마전부터 계속 월경과 월경용품에 대해 공부해왔다. 알리에서 생리컵을 주문하고, 받아보기 까지의 3주 남짓의 기간동안에도 생리컵에 대해 계속 정보를 찾아다녔다. 나는 생리컵에 관해 무지 궁금한 게 많았고, 한글로 된 정보나 논문 등의 전문 정보는 거의 없다시피했다. 생리컵에 대해 다루는 외국 온라인 사이트나 포럼을 구글 번역기의 도움을 받아 기웃거리기도 하고, 식약처, 유한킴벌리, 소재연구가 등이 한자리에 모여 이야기를 나누는 자리인 여성환경연대가 주최한 [월경용품 간담회]에 가보기도 하고, 이지앤모어의 [월경컵 수다회]에도 갔다오고 생리컵 덕질의 나날을 보냈다.

결론부터 말하면 나는 저렴한 생리컵이 안전하지 않다고 단언할 수 있는 사람은 현재 아무도 없을 것이라 생각한다.

그리고 당연하게도, 저렴한 생리컵이 안전하다고 단언할 수 있는 사람도 없을 것이다.

"인증 받지 않은 제품 = 건강에 안좋은 제품"이라는 말은 아니라는 것.

여드름이 났을 때, 여드름이 난 원인을 "베개 커버가 더러운가?", "새로 산 화장품이 안 맞나?", "생리할 때가 다가오나?" 등 여러 가지로 추측해 볼 순 있지만, 피부과 의사조차도 "당신이 여드름이 난 건 기름진 음식을 먹어서입니다."와 같이 내 여드름의 원인을 한 가지로 규정할 순 없다. 이처럼, 생리컵을 포함한 월경 용품과 "건강"도 1:1의 인과관계가 성립하진 않는다. 상세 정보가 제대로 표기되지 않거나 소재의 안전성을 확인할 수 없는 저렴한 생리컵을 사용한다고 했을 때 건강에 문제가 생길 지 여부는 정말 "알 수가 없는" 것이다.

저렴한 생리컵이 다 나쁘고 건강에 안좋다는 것이 아니다. 또한 FDA에 시판전 신고를 한 생리컵들이 다 안전하다는 것도 아니다. 다만 FDA 등 인증서를 확인할 수 있는 브랜드 생리컵에 비해 상세 정보가 거의 없는 저렴한 생리컵을 사용했을 때 감안해야하는 것들은 있다.

저렴한 생리컵을 살 때 감안해야하는 것,

기재된 소재, 사이즈, 인증 등의 사실 여부를 확인할 수 없다는 것.

안알랴줌ㅎ

생리컵을 편하게 사용하기 위해서는 컵의 길이와 용량, 손잡이의 길이 및 형태 등 다양한 정보가 필요하다. 하지만 저렴한 생리컵을 판매 중인 페이지에서는 실제로 배송이 오는 제품과 다른 제품의 사진을 사용하는 곳도 있었다. 또한 배송이 오는 박스의 사이즈가 표기되어있는 곳은 있었지만 정작 중요한 생리컵의 크기나 용량을 적어 놓은 곳은 드물었다.

특히, 의료용 실리콘을 사용했는지 여부를 확인할 수 없다는 것은 많이 아쉽다.

...확인할 방법이 없다.

알리나 이베이에서 파는 저렴한 생리컵들 중에선 "100% 의료용 실리콘으로 만들었다."고 적힌 제품이 많다. 하지만 정말 의료용 실리콘으로 제작되었는지는 확인할 길이 없다. 상세 정보에 줄줄이 붙어 있는 인증서들도 소재에 대한 증명서가 아닌 경우가 많다. 생리컵에 소재에 대한 인증이 아니라 다른 용도로 인증을 받은 것이라든지 다른 브랜드 생리컵의 인증서를 복사해서 쓴다든지 하는 경우가 있기 때문이다. 만약 진짜 의료용 실리콘으로 만들었으면 자랑하고 싶어 해당 인증서를 올려놓지 엉뚱한 인증서를 올려 놓진 않을 것이라 생각한다.

"의료용 실리콘을 사용하지 않음"이 건강에 나쁘다는 것을 직접적으로 의미하진 않지만, 체내에서 사용했을 때의 안전성이 확인되지 않았다는 것은 사실이다.

결론

알리익스프레스나 이베이 등에서 파는 몇천원에 살 수 있는 생리컵도 번듯한 홈페이지와 인증서를 확인할 수 있는 브랜드 생리컵만큼 좋을 수도 있을 것이다. 하지만 대부분의 저렴한 생리컵이 사이즈나 용량, 인증 번호 등 구체적인 스펙을 적어 놓지 않아서 각자에게 딱 맞는 제품을 구입하는 것도, 안전성에 대한 신뢰를 갖기도 힘든 상황이다.

저렴한 생리컵을 사서 생리컵이 어떻게 생겼는지 구경이나 해보자! 라는 마음으로 시도해볼 수는 있겠으나, 나의 몸에 대한 충분한 고민 없이 고르는 제품이 몸에 잘 맞지 않을 가능성이 크다고 생각한다. 당연하게도, 어떤 생리컵을 사서 쓰느냐는 각자의 선택이지만, 나는 한번 사면 10년 이상 쓸 수 있는 제품이니만큼 적어도 FDA에 시판 전 신고라도 한 브랜드의 제품으로 사용하는 바람이다.

[생리컵] 알리익스프레스에서 구매한 중국산 생리컵 Femcup 리뷰

yucalip — Thu, 6 Apr 2017 04:19:53 +0900

현재 나에게는 갯수로 총 10개의 생리컵이 있다.

아래에 있는 노란색, 주황색 컵이 Femcup.

나는 첫 생리컵으로 구매한 루넷컵 Small을 큰 불편 없이 사용하고 있는 중이다. 루넷 컵을 3달 정도 사용하다가, 월경 중에 운동할 때 사용하기 위한 용량이 더 크고 좀더 단단한 컵의 필요성을 느꼈다. 그래서 두 번째 컵을 사기 위해 제품 정보를 찾아보던 중에 알리 익스프레스에서 저렴한 중국산 컵을 판다는 얘기를 접하게 되었다. 이미 잘 쓰고 있는 컵이 있어서 딱히 급할 것도 없고, 여러 가지 생리컵을 구경이나 하자 싶어서 이것저것 다양한 브랜드, 다양한 색깔, 다양한 사이즈의 제품들로 골라 담아 주문했다.

주문한 7군데 상점의 생리컵 중 현재 5군데서 배송이 왔고, 그 중에서 가장 화려한 색깔을 자랑하는 Femcup부터 리뷰를 해보려고 한다. 소장은 하고 있지만 실제 사용해본 컵은 아니라서 사용 후기라고 할 수는 없지만, 제품 페이지에 잘 나와있지 않은 실제 모습이 궁금한 분에겐 도움이 될 것 같다.

1. 주문한 제품

Femcup / Yellow / Size S

Femcup / Orange / Size L

클릭 시 해당 제품을 판매 중인 AliExpress 웹페이지로 이동

2. 구매한 이유?

저렴한 가격에 다양한 제품을 접해보고 싶어서.

저렴하고 괜찮은 제품이 진짜 있는 걸까 궁금해서.

첫 생리컵을 살 때는 나름 비싼 가격을 자랑하는 브랜드 생리컵 사이에서 혹여나 잘못 살까 안 맞는 걸 살까 엄청 알아보고 샀는데, 알리 익스프레스 생리컵들은 하나에 비싸봤자 5천원 정도라, 다이소에서 그러하듯이 돈 몇푼으로 부자가 된 기분을 느끼며 별 고민없이 이것저것 샀다.

그래서 알리 익스프레스에서 산 생리컵들은 딱히 그렇다할 이유가 없이 "한 번 사본" 생리컵들이라 할 수 있다. 물론 생리컵을 고르는 대전제가 되는 기준인 "medical grade silicone (의료용 실리콘)" 이라고 명시되어 있는 제품을 골랐다. 이 글의 Femcup도 그 제품들 중 하나다.

3. 구매 경로

AliExpress에서 구매 (클릭하면 AliExpress로 이동합니다.)

G마켓의 중국 버전이라고 할 수 있는 AliExpress에서 구매하였다. 검색창에 생리컵을 뜻하는 영단어인 "menstrual cup"을 치고 검색을 해보면 매우 많은 판매자가 팔고 있는 다양한 생리컵 제품을 둘러볼 수 있다. 중국 사이트이지만 한글로 자동 번역이 된다. 이해할 수 없게 번역이 되지만 그래도 한글이긴 하다는 묘한 안도감을 느끼면서 쇼핑을 할 수 있다. ㅋㅋㅋㅋㅋㅋ 제목에 자주 나오는 의료 학년 실리콘은 "medical grade silicone"을 발번역한 결과일 것이다.

결제는 Paypal로 결제하는 방식이 없어서 신용카드 번호를 직접 기입하는 방식으로 진행했다. 알리익스프레스에서 구매하는 사람들의 블로그 글들을 보니 딱히 개인통관고유부호^[각주:1]를 적을 필요는 없다고 되어있지만, 혹시나 싶어 주소란에 개인통관고유부호도 함께 기입했다.

4. 배송 기간

3주 ~ 4주

2017년 3월 2일에 주문했고, 3월 28일경 도착했다.

이건 해외 직구인 이상 돈을 더 내지 않고서는 어쩔 수 없는 부분이다.

시킨 거 잊어버리고 일상 생활 하다보면 어느새 도착해있다.

5. 도착 모습, 개봉샷, 구성품 및 제품 모습

안쪽에 뽁뽁이 처리가 된 예쁜 노란색 봉투에 담겨 왔다.

벨벳느낌 소재의 하얀 파우치와 박스, 생리컵이 있다.

좁은 봉투에 꾸깃꾸깃 오다보니 꼬리가 휘어져 있다.

휘어진 꼬리는 생리컵이 도착한지 2주가 넘은 지금까지 펴지지 않고 있다 ㅋㅋㅋㅋ

특징을 몇 가지 적어보자면,

- 주황색 컵은 정말 정말 쨍한 색깔이다.

(사용된 색소의 안전성이 우려가 된다.)

- 노란 컵에 비해 주황 컵이 더 불투명한 편이다.

- 미끄럼 방지 구조가 상당히 많아서 꺼낼 때 편할 것 같다.

- 주둥이(입구) 부분이 상당히 두툼한 느낌이다.

- 파우치가 다른 중국산 컵에 비해 고급진 느낌.

6. 실측 데이터

상세 페이지에 생리컵 정보가 워낙 없다.

사이즈와 용량을 직접 재보고 도면을 만들어보았다.

~~(의료용 실리콘으로 제작된 것이 아닌 것 같아서 이 컵 구매를 추천하진 않음)~~

부드러운 정도는 객관적으로 비교할 만한 측정 기준을 몰라서,

사람들이 많이 가지고 있을 법하면서도 내가 가지고 있는 루넷컵과 비교할 수밖에 없다.

루넷컵과 비교해보면

일단 입구 부분은 루넷컵보다 조금 더 단단하다.

그리고 컵 부분은 루넷컵보다 조금 더 말랑하다.

S, L 사이즈를 비교해보면

L 사이즈가 S 사이즈보다 더 단단하다.

6. 쭉쭉 늘려본 결과

의료용 실리콘이 아닌 것으로 추정.^[각주:2]

두개 모두 컵 부분을 힘주어 늘려보면 손톱에 칠한 매니큐어 색깔이 안 보일 만큼

불투명한 흰색으로 색이 바뀌는 것을 알 수 있었다.

8. 요약

만수르 놀이 해본 것에 만족

사보고 괜찮게 생겼으면 직접 써보기도 하고 친구도 사줘야지~ 라고 주문했지만, 소재가......

일단 나는 안 쓸 것 같다. 물론 친구에게도 안 줄 것이다.

서랍에 고이고이... 모셔둘 것이다.

일반적으로 해외온라인사이트에서 제품을 구매할 때는, 개인통관고유부호를 기입해야한다. 기입하지 않을 시 귀찮은 일(?)이 발생할 수 있다. http://p.customs.go.kr/ 에서 간편하게 발급받을 수 있다. [본문으로]
이지앤모어 월경컵수다회에서 얻은 정보에 따르면, 의료용 실리콘이 아닌 제품은 늘렸을 때 하얗게 된다고 한다. [본문으로]

와콤 타블렛에서 '대응하는 타블렛이 시스템상에 발견되지 않았습니다'라고 떴을 때 해결법

yucalip — Mon, 13 Feb 2017 20:06:46 +0900

내가 쓰고 있는 WACOM 인튜어스4 (intuos4 PTK-840)

케이블을 연결했는데 전원 연결도 안된다?

오랜만에 일러스트를 그릴 일이 생겨서 와콤 타블렛 intuos4를 꺼내어 연결해보는데 타블렛이 인식이 되지 않았다.

intuos4 본체에는 컴퓨터와 연결하기 위한 5PIN짜리 구멍이 2개가 있는데, 내 경우에는 두 군데 모두에 케이블을 꽂아봤지만 전원이 켜졌음을 알리는 불조차 들어오지 않았다. 그러다 케이블이 연결된 채로 타블렛을 이리저리 돌리다가 가끔 불이 들어오는 걸 확인할 수 있었다.

시스템 환경설정에 있는, 와콤 타블렛에 들어가봐도 "대응하는 타블렛이 시스템상에 발견되지 않았습니다." 라고 메시지가 떴다.

"대응하는 타블렛이 시스템상에 발견되지 않았습니다."라는 검색어로 검색을 해보니 대부분 타블렛 드라이버를 새로 설치하라고 해서 응용프로그램에 가서 와콤 타블렛 드라이버를 지운 후 Mac OS X 버전으로 다시 깔고 맥북을 재시동했지만 여전히 인식이 안되었다.

이렇게만 나오고!

케이블을 그냥 꽂으면 전원 불이 안들어오고, 케이블을 위로 잡아 당기면 전원 불이 들어오곤 했다.

아이폰 케이블이 고장났을 때랑 비슷한 증상인 것 같다는 생각을 했고, 케이블 문제라는 생각이 들어서 케이블을 구매하기로 했다.

와콤 INTUOS4용 케이블 = 시중에 파는 MINI 5PIN 케이블

나는 케이블에 대해 잘 알지 못해서 온라인으로 샀다가는 잘못 구매할 것 같은 생각이 들고,

케이블을 구매하기 전에 확인해야할 것이 있어서 상암에 있는 와콤 A/S 센터에 전화를 걸어 확인하였다.

Q. 와콤 인튜어스4 사용자인데 케이블이 고장이 난 것 같다. 와콤 온라인 스토어에서 판매하는 케이블만 사용해야 하는지?

A. 아니다. 시중에 판매하는 MINI 5 PIN 케이블이면 사용이 가능하다.

다만 인튜어스4에 케이블 연결하는 부위가 좁은 편이라 케이블 구매시 연결부위가 뚱뚱하지 않은 것으로 확인하고 구매해야한다.

오프라인 구매 시, 헛걸음 방지를 위해 전화로 재고 문의하기

오늘 당장 써야하기 때문에 온라인이 아닌 오프라인에서 구매를 해야했다.

사야할 케이블 이름을 확인 후 내가 살고 있는 지역에 있는 대형 문구점 3군데에 전화를 걸어 MINI 5PIN 케이블의 재고를 확인하였다.

3군데 중에 MINI 5PIN 케이블의 재고가 있는 곳은 한 군데 뿐이었고, 재고는 하나만 남아있는 상태였다.

예전에 DSLR 카메라도 케이블도 MINI 5PIN 케이블이라, 타블렛이랑 케이블을 같이 썼는데 오프라인에서 파는 곳이 얼마 없어서 신기했다; 이제 잘 안쓰는 케이블인건가 싶다.

60cm 짜리 USB 미니 케이블 5P라고 적혀있고, 가격은 1700원이다! 와콤 스토어에서 구매하는 것보다 훨씬 싸다.

한쪽은 USB, 한쪽은 5PIN!

새로 산 케이블을 연결해보니 인식이 잘 되었다 !!

비슷한 문제가 있는 와콤 사용자에게 도움이 되면 좋겠다.

[CSS] 브라우저 창의 너비나 높이에 따라 크기가 변하는 가변 폰트 단위 vw, vh, vmin, vmax

yucalip — Thu, 22 Sep 2016 15:47:55 +0900

em과 rem을 사용하면 기준이 되는 폰트 크기를 바꾸었을 때,

다른 폰트의 크기들도 지정해둔 것에 따라 차등적으로 바뀌어 적용되기 때문에 편리하다.

하지만 em과 rem은 브라우저의 창의 크기와는 상관이 없는 단위이다.

이와 달리 vw, vh, vmin, vmax는 브라우저 창의 가로 또는 세로 크기에 따라 변하는 폰트 단위이다.

vw : viewport width

vw단위는 웹 브라우저의 가로폭 (너비)를 기준으로 결정되는 크기다.

만약 웹 브라우저의 너비가 1280이고, 폰트 크기를 10vw라고 한다면

이 때 10vw의 크기는 1280의 1%인 12.8px이 되는 것이다.

vw단위를 지정한 예제는 이 곳을 클릭하면 볼 수 있다 .

브라우저 창의 가로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확인할 수 있다.


body{
    font-size: 2vw;
}

p{
    line-height: 4vw;
}

vh : viewport height

vh단위는 웹 브라우저의 세로폭 (높이)를 기준으로 결정되는 크기다.

만약 웹 브라우저의 높이가 600이고, 폰트 크기를 10vh라고 한다면

이 때 10vh의 크기는 600의 1%인 6px이 되는 것이다.

vh단위를 지정한 예제는 이 곳을 클릭하면 볼 수 있다 .

브라우저 창의 세로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확인할 수 있다.

위의 예제에서 적용한 CSS 코드는 아래와 같다.

body{
    font-size: 2vh;
}

p{
    line-height: 4vh;
}

vmin : viewport minimum

vmin 단위는 웹브라우저의 가로폭(너비)과 세로폭(높이) 중에 더 작은 값을 기준으로 한다.

vmin단위를 지정한 예제는 이 곳을 클릭하면 볼 수 있다 .

브라우저 창의 가로 / 세로 크기를 늘렸다 줄였다 하면서 보면

가로 / 세로의 크기 관계에 따라 글자 크기가 그대로이기도 하고 달라지기도 하는 것을 확인할 수 있다.


body{
    font-size: 2vmin;
}

p{
    line-height: 4vmin;
}

vmax : viewport maximum

vmax 단위는 웹브라우저의 가로폭(너비)과 세로폭(높이) 중에 더 큰 값을 기준으로 한다.

보통 창의 크기에 관계 없이 글자가 화면의 가로로 꽉 차게 만들고 싶을 때 사용한다.

vmax 단위를 지정한 예제는 이 곳을 클릭하면 볼 수 있다 .

브라우저 창의 가로 / 세로 크기를 늘렸다 줄였다 하면서 보면

가로 / 세로의 크기 관계에 따라 글자 크기가 그대로이기도 하고 달라지기도 하는 것을 확인할 수 있다.


body{
    font-size: 2vmax;
}

p{
    line-height: 4vmax;
}

Can I use Viewport units ?

가변 폰트 단위의 브라우저 호환성

아래에서 볼 수 있듯, 인터넷 익스프로러 8 (IE 8) 이하나 오페라 미니 Opera Mini에서 사용이 지원이 안되는 기능이다.

IE8은 전세계에서 0.55%의 유저가 사용하고 있고, 오페라 미니는 4.88%의 유저가 사용하고 있다.

사용할 때 몇몇 주의점들이 있다.

IE9에서는 vmin 대신 vm이라고 명명하여 지원하고 있다.

그리고 IE11, Edge13, Edge14에서는 vmax 단위를 지원하지 않는다.

[HTML/CSS] 화면의 크기와 환경을 감지하는 기술, 미디어 쿼리 (Media Queries)

yucalip — Wed, 21 Sep 2016 16:54:43 +0900

미디어 쿼리 (Media Queries) 란?

미디어 쿼리란 반응형 웹을 구현하기 위해 필요한 기술 중에 하나로,

컴퓨터나 기기에게 '너는 어떤 종류의 미디어니?' 또는 '미디어의 화면 크기는 어느 정도나 되니?' 라고

미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술이다.

기기의 종류 뿐만이 아니라 해상도, 비트 수, 가로/세로 여부 등 세밀한 부분까지 감지가 가능하여 유용하다.

미디어 쿼리의 기본 용법

미디어 쿼리 작성을 할 때는 기본적인 순서와 규칙을 따라야 한다.

다음과 같은 구조가 기본이다.

@media
미디어 쿼리 문법의 시작을 선언하는 부분이다.

조건문
조건문에서는 뒤따라 올 실행문을 실행시킬 조건을 명시해준다.
미디어의 유형이나 속성 등을 적어준다.
어떤 종류가 있는지는 이따 자세히 알아보도록 한다.
미디어 유형이 아닌 조건문은 ( 괄호 ) 안에 넣어 주어야 한다.

중복되는 조건은 and나 ,로 나열시켜주어야 하는데,
and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 실행문을 실행시키라는 의미고,
,(콤마)는 앞뒤 조건 중 하나만 사실이더라도 실행문을 실행시키라는 OR의 의미이다.
실행문
실행문은 미디어 유형이나 해상도가 조건과 일치할 때 실행되는 CSS이다.

대소문자를 구분하지는 않지만 띄어쓰기는 반드시 주의해야한다.

특히, 논리 연산자 중 하나인 and 구문 뒤에 항상 공백을 한 칸 띄어줘야한다.

예시 구문

예시 구문을 보면 문법에 대해 이해하기가 좀더 쉬울 것 같다.

예시 1.

모든 미디어 기기 중 브라우저 가로 길이가 320px 이상이면 다음을 실행하라.

@media all and (min-width: 320px) { }

예시 2.

가로 너비가 320px 이상이면서 768px 이하일 때 실행문을 실행하라.

@media (min-width:320px) and (max-width:768px) {  }

예시 3.

컴퓨터 화면 장치 또는 스마트 기기의 화면 중에

기기의 가로 너빗값이 640px 이하이면서 단말기의 화면 비율이 9/16이거나,

기기의 가로 너빗값이 640px 이하이면서 단말기의 화면 비율이 16/9인 경우에 다음을 실행하라.

@media screen and (max-device-width:640px) and (device-aspect-ratio:9/16),
screen and (max-device-width:640px) and (device-aspect-ratio:16/9){ }

(*유의사항* : 콤마(,) 연산자가 OR의 역할을 하지만, 콤마 앞뒤로 분리된 조건들은 서로 공유하지 않기 때문에

같은 조건이라도 반복적으로 값을 작성해줘야 한다. (참고 페이지 : naradesign) )

실행문을 실행 여부를 판단할 때,

어떤 미디어 유형과 조건문을 실행 조건으로 사용할 수 있을까?

위에서 간단히 미디어 쿼리의 문법과 예시를 살펴봤는데,

이제 내가 원하는대로 미디어 쿼리를 사용하기 위해서 조건판별을 위한 옵션이 어떤 것이 있는지 자세히 알아보자.

1) only | not

미디어 유형 조건 앞에 오는 only나 not에 대해 알아보자.

not은 뒤에 오는 모든 조건을 부정하는 연산을 하는 것이고,

only는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이다.

이 only나 not이 오는 자리에 아무 것도 입력하지 않으면

기본값은 only로 처리가 되므로 일반적으로 생략하는 편이다.

2) 미디어 유형

미디어 유형의 종류를 설정하면, 미디어 쿼리를 해석해야할 대상 미디어를 선언해주는 것이다.

미디어 유형에는 11가지의 분류가 있다.

이 중에서 자주 쓰이는 것은 all, print, screen이 있다.

all 키워드는 모든 미디어가 이 미디어 쿼리를 해석해야함을 의미한다.

all은 생략이 가능하고 생략시 기본값이 all이다.

기기명	설명
all	모든 장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고 다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

3) (조건문)

미디어 쿼리의 조건문은 프로그래밍 언어와 같이 =, >, < 등의 연산자를 사용하지 않는다.

연산을 하기 위해 min-이나 max-를 붙여서 최대값, 최소값을 판단한다.

괄호 안에 넣는 조건문은 and나 콤마를 이용하여 두 가지 이상 작성할 수 있으며 생략도 가능하다.

(조건문)에 들어올 수 있는 조건문은 다음 표를 참고하자.

조건문	설명	조건값	min/max 사용 여부
width	웹페이지의 가로 너빗값	width 속성에서 사용할 수 있는 모든 속성값	사용함
height	웹페이지의 세로 높잇값
device-width	기기의 가로 너빗값 (단말기의 물리적인 가로 길이)
device-height	기기의 세로 높잇값 (단말기의 물리적인 세로 길이)
orientation	기기의 화면 방향 (width와 height를 구하여 width 값이 길면 landscape로, height 값이 길면 portrait로 판단)	portrait (세로 방향)	사용 안 함
orientation		landscape (가로 방향)	사용 안 함
aspect-ratio	화면 비율 (width / height)	브라우저 화면 비율(1)	사용함
		브라우저 종횡비(16/9)
		기기 해상도(640/320)
device-aspect-ratio	단말기의 물리적인 화면 비율	기기의 화면 비율(1)
		기기 종횡비(16/9)
		기기 해상도(640/320)
color	기기의 비트 수	8(bit 단위) 자연수를 쓰지만 2의 지수를 뜻함 (1을 쓰면 2, 2를 쓰면 4, 3을 쓰면 8)
color-index	기기의 색상 수 (단말기에서 사용하는 최대 색상수)	128(색상 수 단위)
monochrome	기기가 흑백일 대 픽셀당 비트 수 (흑백 컬러만을 사용하는 단말기의 흰색과 검은색 사이의 단계 판단)	1(bit 단위)
resolution	기기의 해상력 (기기가 지원하는 해상도를 판단 resolution은 아이폰3,4 같이 화면의 크기는 같지만 해상도가 다른 경우를 감지할 때 필요)	300dpi (dpi : 인치당 도트 수) dpcm (dpcm : cm당 도트 수)
scan	TV의 스캔 방식	progressive/interlace	사용 안 함
grid	기기의 그리드/비트맵	0(비트맵 방식)/1(그리드 방식)	사용 안 함

반응형 웹사이트를 위한 CSS 미디어 쿼리 예시

구글링을 해보면 반응형 웹사이트 구현을 위한 미디어 쿼리 예시들이 정말 많이 나와 있다.

크게 3가지 정도로 나눈 것부터, 각각의 모바일 폰과 가로보기, 세로보기를 각각 나눈 것까지 매우 다양하다.

사이트의 디테일을 최고로 올리고 싶다면 각 기기별로 대응할 수 있게끔 자세하게 미디어 쿼리를 짜면 될 것 같다.

원하는대로 스타일이 지정되기 위해서 min이나 max등 앞의 접두어에 따라 미디어 쿼리를 넣는 순서를 유의해야한다.

구글링해서 나온 몇 가지 미디어 쿼리 예시를 소개한다.

1. 해상도 구획을 크게 3분류로 나누어 스타일 지정하기

@이지스퍼블리싱, 반응형 웹디자인

지금 공부하고 있는 반응형 웹디자인 책에서는 비교적 간단한 형태인,

3가지 범위로 나눈 미디어 쿼리를 적용하고 있다.

@media all and (min-width:320px){ 
    /* 스타일 지정 부분*/
}
@media all and (min-width:768px){ 
    /* 스타일 지정 부분*/
}@media all and (min-width:1024px){ 
    /* 스타일 지정 부분*/
}

2. 스마트폰 / 태블릿 / 랩탑 / 데스크탑 나누어 지정하기

@naradesign

naradesign 블로그에서 예시로 제공되는 템플릿이다.

All, Mobile, Tablet, Desktop으로 기기별로 분류되어있다.

/* All Device */
/* 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.*/


/* Mobile Device */
/* 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다.
모든 해상도에서 이 코드가 실행된다.
미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다. */


/* Tablet & Desktop Device */
@media all and (min-width:768px) {
/* 사용자 해상도가 768px 이상일 때 이 코드가 실행됨.
태블릿과 데스크탑의 공통 코드를 작성한다. */
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
/* 사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨.
아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다. */
}

/* Desktop Device */
@media all and (min-width:1025px) {
/* 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.
1025px 이상의 이상의 랩탑 또는 데스크탑에 대응하는 코드를 작성한다. */
}

3. 스마트폰 / 태블릿 / 랩탑 / 데스크탑

+ 가로 보기 | 세로 보기별 나누어 지정하기

@onlinedesignteacher.com

위의 그림과 같이 일반적으로 기기들이 위치하는 해상도 구간을 좀더 세분화하여 미디어 쿼리를 지정하는 방법이다.

/*Responsive Styles*/


/* Smartphones (portrait) ---------------- */
@media only screen 
and (max-width : 320px)
{
/* Add Your CSS Styling Here */
}

/* Smartphones (landscape) ---------------- */
@media only screen 
and (min-width : 321px)
and (max-width : 767px)
{
/* Add Your CSS Styling Here */
}

/* Tablets (portrait) -------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{
/* Add Your CSS Styling Here */
}


/* Tablets (landscape) ------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{   
/* Add Your CSS Styling Here */
}

/* Old Desktops and laptops ------------------ */
@media only screen 
and (min-width : 1025px) 
{
/* Add Your CSS Styling Here */
}

/* Desktops ------------------ */
@media only screen 
and (min-width : 1201px) 
{
/* Add Your CSS Styling Here */
}

기타

이 외에 더 디테일하게 지정하고 싶다면 미디어 쿼리 스니펫 (Media Query Snippets)이나

CSS-TRICKS의 Media Queries for Standard Devices 등을 참고해보자.

이 외에도 구글에서 media query code template 이라고 검색을 하면 많은 검색 결과가 나온다.

아래의 그림은 참고하기 위해 만든 모바일 기기별 해상도이다.

미디어 쿼리의 브라우저별 호환성

Can I Use 사이트에서 살펴본 CSS3 미디어 쿼리의 호환성은 다음과 같다.

IE6~8에서 미디어 쿼리를 지원하려면 어떻게 해야할까?

IE에서 미디어 쿼리 사용하기

: 자바스크립트 라이브러리 활용

다음 두 자바스크립트 라이브러리를 통해 가능하다.

이 두 자바스크립트 라이브러리들은 미디어 쿼리를 모방하여

IE6~8에서 미디어 쿼리가 동작하는 것처럼 보이게 해준다.

respond.js
: 빠르고 가볍다. 단, 미디어 쿼리 구문 중에 min-width와 max-width만 지원이 가능하다.
즉, width, device-width, device-height, orientation, aspect-ratio 등은 지원하지 않는다는 이야기다.
또한, @import나 <link media = "screen and ..." >와 같이 <link> 태그 안에 속성으로 미디어를 설정하는 것을 지원하지 않는다.

직접 삽입을 하려면 이곳에서 받아 디렉토리 경로를 적어주면 되고,
다운받지 않고 사용하기 위해서는 다음 구문을 </body> 바로 위에 삽입해야한다.
(</body> 직전에 삽입해야 하는 이유는, 좀 더 페이지 로딩 속도를 빠르게 하기 위해서임)

*참고로, 이 respond.min.js는 로컬에서 실행이 안되는 경우가 있는 것 같으니,
테스트할 때는 로컬이 아니라 실 서버 환경에서 테스트해보자.
```

```

css.mediaqueries.js
이 라이브러리 또한 페이지 로딩 속도를 위해 </body> 태그 전에 삽입해주는 것이 좋다.
그리고 역시, @import로 불러온 스타일시트는 작동하지 않으며,
<link media = "screen and ..." >와 같이 <link> 태그 안에 속성으로 미디어를 설정하는 것을 지원하지 않는다.
발생한 이슈는 이곳에서 확인할 수 있다.

~~IE에서 미디어 쿼리 사용하기~~

: IE에서는 반응형 웹 포기하기

하지만 모바일에서도 작동하는 미디어쿼리로

IE6~8에서 반응형 웹을 지원하기 위해 위의 자바스크립트 라이브러리를 사용하는 것보다는,

IE8 이하에서 접속했을 때 반응형 스타일 시트가 아닌, 고정폭의 스타일 시트로 따로 연결해주는 것이

좀더 간단하며 접근성이 좋은(accessible) 해결책이라고 한다.

데스크탑에서는 반응형이 되지 않아도 가독성이 크게 떨어지지 않기 때문이다.

예시는 다음과 같다.

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

참고 사이트

[CSS] width와 max-width의 차이점

yucalip — Tue, 20 Sep 2016 17:06:41 +0900

웹페이지에 이미지나 영상을 넣을 때 가로 크기를 지정하지 않을 수도 있지만,

가로 크기를 지정하고 싶을 수 있다.

만약 가로 크기를 지정할 때 가로 속성 값을 %로 지정했을 때

width와 max-width는 무시할 수 없는 차이가 있다.

width와 max-width의 차이

width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있다.

width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만,

max-width 속성은 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않는다.

이 곳을 클릭하면 직접 만든 예제 페이지로 이동한다.

width: 100%로 지정한 경우
가로 너비 값을 아무 것도 지정하지 않은 경우
max-width: 100% 로 지정한 경우

를 비교할 수 있다.

width와 max-width의 차이를 비교할 수 있는 예제 페이지

예제에서 브라우저 창의 너비를 줄여보거나 늘려보면 확인할 수 있듯이,

width: 100%로 지정한 경우에는
: 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감한다.
가로 너비 값을 아무 것도 지정하지 않은 경우
: 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없다.
max-width: 100% 로 지정한 경우
: 창의 크기를 줄이면 줄인만큼 충실히 줄어들지만,
크기를 키울 때는 원래 이미지 사이즈보다 커지지는 않는다.

참고서적

김운아, 『반응형 웹디자인』, 이지스퍼블리싱, 2014, 71쪽

[CSS] padding이 헷깔린다? box-sizing 속성 지정으로 padding 값 직관적으로 조절하기

yucalip — Mon, 19 Sep 2016 14:17:38 +0900

일전에 워드프레스에서 css 커스터마이징을 하다가 이상한 일을 겪었다.

여태 padding 값을 지정하면 전체 div의 사이즈는 변함이 없이 안쪽의 여백만 조절이 되었는데,

그때는 padding 값을 지정하면 전체 div 사이즈가 변해버리는 것이었다.

당시에 padding은 div의 border 영역 안쪽 여백으로 이해하고 있었기 때문에,

이런 현상이 이해가 안되어서 찾아보니 padding이 지정되는 방식이 두 가지가 있다는 것을 알고 깜짝 놀랐었다.

너비값을 조절하는 방법을 설정하는 box-sizing

div의 여러 너비값을 조절하는 방법은 여러 가지가 있다.

div 안의 콘텐츠가 얼마나 길어지든 간에 최우선적으로 콘텐츠가 다 보이도록 지정하는 방법도 있고,

처음 디자인한 div의 가로와 세로 너비를 더이상 변형되지 않게 하는 방법도 있다.

만약 그리드 상에서 콘텐츠의 양이 다르더라도 더이상의 가로 세로 너비 변형이 없기를 바란다면

box-sizing 이라는 속성을 사용해서 고정시켜 주어야한다.

엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의

패딩 및 테두리 영역을 지정하더라도 전체 박스의 너비는 더이상 변하지 않는다.

위의 그림처럼, padding을 지정하면 기본적으로는 콘텐츠 영역의 너비 밖으로 너비가 늘어난다.

위의 그림에 해당하는 codepen 예제를 만들었으니, 이곳을 클릭하여 테스트 해봐도 좋다.

코드펜 예제처럼 가장 오른쪽의 박스처럼 전체 박스에 변형을 가하지 않으려면

다음과 같이, CSS에서 box-sizing을 border-box로 지정해주어야 한다.

div {
box-sizing: border-box;
}

box-sizing 속성

w3school을 참고하면, box-sizing 속성 값에는 4가지를 지정할 수 있다.

box-sizing : Property Values

속성 값 Value	설명 Description
content-box	기본 값. 가로와 세로 너비가 콘텐츠 영역만의 가로 세로 너비를 지칭하도록 설정한다. 패딩, 보더, 마진 영역은 지정된 크기에 포함되지 않는다.
border-box	가로와 세로 너비가 마진 영역을 제외하고 콘텐츠 영역, 패딩 영역, 보더 영역을 포함한 크기로 설정한다.
initial	속성의 기본 값으로 설정한다.
inherit	부모 요소의 속성 값을 상속받도록 설정한다.

Can I use : box-sizing ?

그렇다면 이 속성을 여러 브라우저에서 안전하게 사용할 수 있을까?

다행이도, 모두 사용이 가능하다고 되어있다. prefix 없이 사용하는 경우가 거의 대부분이다.

하지만, 이 기능을 사용했을 때의 Issue가 6가지 정도 나와있으니 유의해서 사용하자.

Chrome 브라우저에서 box-sizing: border-box 를 사용했을 때 브라우저 줌 레벨이 100%보다 작다면, select 엘리먼트를 사용한 선택 옵션을 사용하는 데 문제가 발생한다.
IE 8은 min/max-width/height가 사용되었을 때 box-sizing : border-box 설정을 무시한다.
Safari 6.0.x에서는 display: table 로 설정된 요소에 box-sizing 속성이 적용되지 않는다.
IE 9는 해당 요소의 position : absolute | fixed일 때나, overflow: auto | overflow-y: scroll일 때, 스크롤바의 가로를 줄여버린다. (IE 9 will subtract the width of the scrollbar to the width of the element when set to position : abosolute/fixed, overflow: auto/ overflow-y: scroll)
Android 브라우저는 HTML select element의 가로, 세로 면적을 정확히 계산하지 못한다.
IE 8에서 min-width 속성은 해당 요소의 box-sizing 값이 border-box로 설정이 되어있어도, content-box에 적용이 된다.

참고 사이트

1. w3school : box-sizing

2. CSS 레이아웃을 배웁시다 : box-sizing

3. Can I use : box-sizing

[HTML/CSS] 가변 그리드 만들 때 <div>와 <div> 사이에 가로로 틈이 생길 때 해결 방법

yucalip — Mon, 12 Sep 2016 12:22:42 +0900

이지스 퍼블리싱에서 출간된 <반응형 웹디자인>

첫째마당의 2장 [px을 %로 바꾸기 - 가변 그리드]를 공부하다가

책에서는 별다른 언급이 없지만

나같은 초심자가 쉽게 실수할 수 있는 부분에 대해 공유하려고 한다.

둘을 합쳐 너비가 100%인데,

옆으로 나란히 배치가 안되고 아래로 넘치네?

책에서 제시한 예제의 가변 그리드 구조

두 div를 합쳤을 때 너비가 100%로 꽉 차는 형태이다.

책의 45page 부터 시작되는 예제에서 위와 같은 구조의 가변그리드를 만드는데,

보면 알 수 있듯 container 라는 클래스의 div 안에 두 div가 가로로 꽉찬 구조이다.

그런데 예제 코드를 직접 입력해서 실행해보니 책의 예시와는 다르게

아래 그림과 같이 자꾸 두 번째 div가 밑으로 내려가는 것이었다.

책에서 제시한대로 코드를 입력하고 실행했는데

자꾸 두 번째 <div>가 아래로 밀려나는 문제가 발생.

문제는 띄어쓰기, 엔터

오타가 있거나 잘못 입력된 부분일거라고 의심했던 부분은

선택자 오류 / display : inline-block 오류 / border의 두께 /

숫자를 잘못 입력 / 텍스트 편집기 오류 / CSS 초기화 오류

등등이 있었으나 아무리 CSS를 책과 똑같이 해도 해결이 안되는 것이었다.

그러다가 책과 다른 부분이 딱 하나가 있는 것을 발견했는데,

html에서 div를 입력한 부분에서 엔터를 쳤냐 안쳤냐 / 띄어쓰기를 했냐 하는 것이었다.

책에서는 div를

<div></div><div></div>

로 붙여 썼고

나는 div를

<div></div>

라고 썼다.

'설마....'하고 엔터를 삭제하고 붙여 써보니 거짓말처럼 해결되었던 것이다.

inline-block, inline 요소는

공백을 무시하지 않는다.

html 코드에서 안심하고 요소 사이에 엔터나 띄어쓰기를 남발해왔기에 매우 당황스러웠다.

이유가 궁금하여 Stackoverflow에서 검색해본 후 이유를 알 수 있었다.

div는 원래 block element이다.

하지만 가변형 그리드를 만드는 과정에서 div를

display: inline-block으로 설정해뒀던 것이 이 문제의 화근이었다.

block 요소와는 다르게

inline(또는 inline-block)이 된 요소는 공백이 있으면 그 공백이 표현된다.

붉은색 체크부분 처럼 코드 사이에 여백이 있으면

띄어 쓰기로 인식되어 실행 화면에서도 공백이 생긴다.

그래서 <div></div>와 <div></div> 사이에 있는 공간을

한 칸의 여백 등으로 인식하는 것이다.

따라서 이 경우 두 div 사이의 틈은 1 byte의 스페이스가 있는 셈이 된다.

그래서 첫 번째 div의 가로 + 두 번째 div의 가로 = 100%여도

공백만큼의 가로 너비가 생겨서 두 번째 div가 밀려나는 것이다.

inline (또는 inline-block) 요소에서

공백을 띄어쓰기로 인식하는 문제를 해결하는 방법

Stackoverflow에서 이 문제를 해결하는 네 가지 방법을 찾을 수 있다.

> 방법 1. 마크업에서 공백을 없앤다.

CSS에 수정을 가하지 않고 해결할 수 있는 방법은 문제의 원천인 공백을 없애는 것이다.

공백을 없애면서도 엔터를 친 것 처럼 가독성있게 코드를 작성하는 방법은 4가지 정도가 있다.

1) 엔터나 띄어쓰기 없이 쓰기.

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

2) 주석을 사용해서 공백을 없앤다.

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

3) 닫는 괄호를 다음 줄로 넘겨 태그를 닫는다.

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

4) 닫는 태그 전체를 다음 줄로 넘겨 태그를 닫는다.

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

> 방법 2. 부모 div의 폰트 크기를 0으로 만든다.

div 사이에 있는 여백이 띄어쓰기 된 공간임을 생각했을 때,

그 공간의 너비는 폰트 크기에 의해 결정이 된다는 사실을 짐작할 수 있다.

따라서 부모 div의 폰트 크기를 0으로 만들면, 띄어쓰기 공간의 너비도 0이 되는 원리다.

#parent {
    font-size: 0;
}

#parent > div {
    font-size: 16px;
}

이와 같이 CSS에서 부모 div의 폰트 크기를 0으로 해준 후,

자식 div의 폰트 크기를 재설정 해주면 된다.

하지만 이 방법은 자식 div의 폰트 크기가 em단위로 설정이 되어있을 경우 불가능하다.

em 단위는 부모로부터 속성을 상속받기 때문에

폰트 크기가 0인 div를 부모로 하는 자식 div의 폰트 크기를

em 단위를 사용해서 설정하면 0에 무엇을 곱하든 0이 되기 때문에 어떻게 해도 0이 된다.

> 방법 3. 부모 div의 display 속성을 flex로 변경한다. (가장 추천하는 방법)

다음과 같이부모 div의 display 속성을 flex로 변경하는 방법을 사용하면

div 요소 사이의 공백을 쉽게 없앨 수 있다.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

단, flexible box를 지원하는 브라우저에서만 가능한 방법이다.

Can I use 사이트에서 flex를 지원하는 브라우저 사양을 알 수 있다.

안정적인 사용을 위해 각 vender prefix를 붙여 선언해주면 좋다.

CanIuse 사이트에서 flexible box를 지원하는 브라우저를 확인할 수 있다.

이 외에도 div의 마진에 음수 값을 지정하는 방법도 있지만,

위의 방법들을 적용했을 때 문제를 해결할 수 있다면, div의 마진에 음수값을 지정하는 방법은 권장하지 않고 있다.

참고 문서

1. Stack overflow QnA

Why is there an unexplainable gap between these inline-block div elements?

2. Can I Use _ flexbox (링크)