본문 바로가기
반응형

분류 전체보기333

[html/css] div 이미지 공백 없애기 [html/css] div 이미지 공백 없애기 div나 table 안에 이미지를 넣다 보면 뜻하지 않게 공백이 생기는 경우가 있더군요 오늘은 table, div 이미지 공백을 없애는 방법을 알아 보겠습니다~ 이미지 공백은 왜 생기는 것일까? 이미지는 인라인 요소인데요, 인라인 요소를 사용하면 보이지 않는 라인 박스(행 박스)를 생성합니다. 이 박스 안의 내용을 수직 정렬할 때 두 가지 방식이 존재합니다. 인라인 요소의 수직 정렬 -비표준 모드(IE7이하, doctype 선언하지 않은 문서): 박스의 border bottom에 맞추어 정렬 -표준 모드(doctype 선언한 문서): baseline에 맞추어 정렬 비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE 예.. 2014. 6. 24.
[HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션 [HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션 HTML과 CSS를 독학으로 공부하시는 분들은 내가 코드를 올바르게 작성하고 있는지 가끔 궁금할 때가 있으시죠.... 하나 하나 일일이 물어 볼 데도 없고요. 며칠 전에 네이버 개발자센터라는 사이트를 알게 되어 둘러 보았는데 마크업개발 툴 중에서 HTML과 CSS 마크업 언어를 작성하는 사람들에게 유용한 자료가 있어 소개해 드리려고요. NHN은 이렇게 한다! HTML/CSS 코딩 컨벤션 http://nuli.nhncorp.com/markup_tools/convention 네이버 개발자를 대상으로 한, HTML과 CSS 코드를 작성할 때 따라야 할 규칙을 명시해 놓은 문서입니다. 웹 사이트가 복잡하고 방대해지면, 원칙 없이 .. 2014. 6. 22.
[간단 레시피] 바나나요거트 만들기 [간단 레시피]바나나요거트 만들기와 매일 바이오 플레인 요거트 시식 후기 요거트는 위나 장에 좋다고 해서 가끔 사 먹는데요 어머니들은 주로 아이들 간식용으로 많이들 해 드실 거 같아요.^^ 요거트를 활용한 간식거리가 굉장히 많지만 오늘은 바나나요거트, 바나나요거트스무디 만드는 법을 알아 볼게요~ 마트에서 파는 수많은 요거트 중에 저는 주로 플레인요거트를 삽니다. 딸기, 블루베리 등은 제 입맛엔 너무 달더라고요.^^ 커피숍에서 파는 요거트의 경우 가격이 2,500원에서부터 4,000원까지 천차만별이죠. 그런데, 커피숍에서 파는 플레인요거트도 시럽을 넣는지 좀 달아요. 사실 플레인요거트만 먹게 되면 단맛이 너무 없어 밋밋하고 약간 느끼한 맛도 없지 않아 있습니다. 그래서 과일을 넣으면 단맛이 나며 먹을만 합.. 2014. 6. 21.
아이비 키우기(실패하지 않는 아이비 잘 키우는법) 아이비 키우기(실패하지 않는 아이비 잘 키우는법) 지지난 주에 양재꽃시장에서 아이비를 구입했어요. 어떤 사람은 아이비가 물만 주면 양지, 음지 어디든 잘 자라는 생명력 강한 식물이라 하고 어떤 사람은 이이비를 서른 번 넘게 떠나 보냈다고 어려움을 토로하는 사람이 있더군요..^^ 이것저것 자료를 찾아 보니 잘못된 오해 때문에 아이비 키우기를 실패하는 것이 아닌가 싶더라고요.. 아이비는 물을 좋아한다 vs 아이비는 습한 것을 싫어한다? 아이비키우기 실패하는 대부분의 이유 중 하나가 이 두 가지 설명 때문이 아닌가 싶습니다. 저 역시 아이비가 물을 좋아한다는 말만 믿고, 환기도 되지 않는 공간에서 3~4일에 한 번 물을 주었던 기억이 나네요.. ^^; 아이비 뿐 아니라 식물을 자주 떠나보내는 이유 중 하나가 .. 2014. 6. 20.
word-break 줄바꿈 속성(break-all, keep-all) word-break 줄바꿈 속성(break-all, keep-all) 어제는 word-wrap 속성을 알아 보았는데요 [css] - word-wrap 줄바꿈 속성(normal, break-word) 오늘도 위 속성과 비슷한 줄바꿈 속성 word-break 입니다. ▶word-break는 글이 길어질 때 줄바꿈을 어떻게 할지 지정하는 속성입니다. word-wrap은 비아시아 언어의 줄바꿈을 제어한다면 word-break는 아시아, 비아시아 언어의 줄바꿈을 모두 제어할 수 있습니다. ▶word-break 속성값 normal: 기본값으로, 일반적인 규칙에 따라 줄바꿈 함 break-all: 문자를 강제로 줄바꿈 할 수 있음. 아시아 언어(CJK)에서 사용할 때는 normal처럼 행동하며 * CJK는 Chine.. 2014. 6. 19.
word-wrap 줄바꿈 속성(normal, break-word) [html/css] word-wrap 줄바꿈 속성(normal, break-word) word-wrap 속성은 긴 텍스트를 강제를 끊어 줄바꿈을 해주는 속성입니다. overflow 속성과 비슷하지요... word-wrap를 흔히 사용하는 예는 박스보다 내용이 길 경우 레이아웃에 보기 좋지 않으므로 줄바꿈을 해주는 것인데요, 끊어질 수 없는 주소 같은 문자열을 끊을 때 사용합니다. (http://aboook.tistory.com 같은..) word-wrap 속성은 비아시아 언어의 줄바꿈을 제어하고, 아시아언어(CJK)의 줄바꿈은 word-break 속성을 참조해주세요. *CJK는 Chinese, Japanese, Korean의 약자 word-break 줄바꿈 속성(break-all, keep-all) ▶w.. 2014. 6. 18.
white-space 속성(pre, pre-wrap, pre-line 차이) white-space 속성(pre, pre-wrap, pre-line 차이) 오늘은 요소 안에 공백 처리를 어떻게 할지 지정하는 속성입니다. white space란 여백이라고도 하는데 html에서는 공백, 공란으로 이해하면 됩니다. ▶태그 작성 시 공백은 어떻게 만들어질까요? 공백은, 줄바꿈(line break), 들여쓰기(tab), 공백(space) 등으로 만들어집니다. 아래와 같은 코드를 작성한다고 하면(검은색 글씨) 빨간색으로 표시한 부분으로 공백이 만들어 집니다. tab키는 들여쓰기, space키는 공백, enter키는 줄바꿈 html 코드 작성시 공백은 아무리 많이 입력해도 1개만 표시합니다. 하나 이상의 공백을 표시하기 위해서 를 써야 하고요. 하지만 태그를 사용하면 공백이나 줄바꿈을 있는 그.. 2014. 6. 17.
[htm/css] word-spacing 속성(단어 간격) [htm/css] word-spacing 속성(단어 간격 지정) letter-spacing이 글자간 간격을 지정한다면 word-spacing은 단어 간격(공란)을 지정하는 속성입니다. ▶word-spacing 속성값 normal 기본값으로, 기본 공란을 재설정. 길이값 px, em, cm등으로 지정 (음수값 허용) *상속여부: 상속 ▶설명 *letter-spacing과 마찬가지로 word-spacing 도, 단어 간격이 글꼴마다 브라우저마다 기본 설정된 공란이 존재하는데 word-spacing은 거기에 추가하여 공란이 생기는 것. *길이값을 사용할 때는 글꼴 크기에 상대적으로 변화하는 em 단위를 권장합니다. *word-spacing은 인라인 요소뿐 아니라 인라인 블록 요소에도 영향을 미칩니다. ▶htm.. 2014. 6. 16.
양재 꽃시장 가는길(영업시간 포함) 양재 꽃시장 가는길(영업시간 포함) 지난 주에 양재 꽃시장에 다녀왔어요. 봄 되면 화초 사야지 벼르고 벼르다 못 사고, 친구한테 같이 가자고 꼬셔서 양재 꽃시장으로 나들이 갔어요. 자주 가는 게 아니고 1년에 한 두 번 방문하다 보니 늘 가는 길을 잊어 먹게 돼서 양재 꽃시장 방문 후기 겸 가는길과 영업시간 등을 소개해 보려고요. 양재꽃시장 가는길&영업시간은 맨 아래 참조해 주세요~ 양재 꽃시장에서 취급하는 품목은? 양재 꽃시장이라고 해서 꽃만 파는 것은 아니고요, 화초나 화초와 관련된 다양한 품목들을 모두 팝니다. 생화도매시장-절화 (국화, 장미, 백합 등), 소재, 조화 등 분화온실-동양란, 서양란, 관엽식물, 소품, 선인장, 허브 등 기타점포(자재, 초화, 종묘, 나무)-화병, 화분, 비료 화환점포.. 2014. 6. 14.
[html/css] 글자 간격 지정 속성 letter-spacing [html/css] letter-spacing 글자 간격을 지정 속성 부제: 인라인 블록 요소(inline-block)의 간격 없애는 방법 오늘은 글자 사이의 간격을 지정하는 letter-spacing 속성을 배워 보겠습니다. ▶letter-spacing 속성값 normal 기본값으로 문자에 공백이 들어가지 않음. 0px과 같음 길이값 px, em, % 등으로 지정 (음수값 가능) 상속 여부: yes 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) 설명 px (절대값), em (글꼴에 상대적인 간격), % (부모에 상대적인 값) 이 중에 글꼴에 상대적인 간격은 em을 추천하는데 그래야 글꼴 크기가 변할 때 간격이 적절하게 조절 됨. ▶주의: 글자 사이 간격은 브라우저마다 기본.. 2014. 6. 13.
반응형