텍스트가 모여 단어가 되고, 단어가 모여 문장이 됩니다. 그리고 문장이 모여 문단을 이루죠. 오늘 알아볼 word-spacing과 letter-spacing 은 각각 단어와 텍스트의 간격에 영향을 주는 CSS 스타일옵션입니다. 다시 한번 깔끔하게 정리하고 바로 예제를 살펴보겠습니다. word-spacing : 단어 사이의 간격 조절 letter-spacing : 텍스트 사이의 간격 조절 예제 See the Pen word-spacing, letter-spacing by rgy0409 (@rgy0409) on CodePen. 위의 예제에서는 무작위로 생성한 한글입숨 문단이 다섯개 있습니다. 첫번째는 word-spacing이나 letter-spacing의 스타일이 없는 보통의 문단입니다. 두번째는 word-..
아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편합니다. 물론 터치스크린의 경우에는 화면을 스와이프하면서 슥슥슥 내리고 올릴 수 있습니다. PC의 경우 마우스휠을 사용해서 올리거나 내릴 수 있습니다. 「근데! 한 방에 많이 내리거나 올리고 싶은데 그럴 수가 없잖여!」 그렇습니다. 저는 아직까지도 스크롤바를 정말 유용하게 사용하고 있습니다. 원하는 지점으로 빠르게 내리거나 올릴 때 정말 편리하거든요. 콘텐츠양이 얼마 되지 않는 본문이라면 모르겠지만 양이 어마무시한 글의 경우라면 마우스 휠로 조작하기란 매우 번거로운 일인 것입니다. 화면 터치 조작은 그나마 좀 나은 편이긴..
최근 display: grid라는 스타일을 알게 되었습니다. 유심히 살펴보니까 이것으로 레이아웃을 구성할 수 있다고는 하는데 제 생각에는 grid는 셀을 대체하는 표현이 될 수 있을 것 같다는 생각이 들었습니다. HTML의 수많은 요소들 중 이라는 태그를 써서 우리는 표를 구현합니다. 하지만 HTML5로 넘어오면서 이제 테이블 태그는 거의 사용하지 않는 추세입니다. 사용하는것도 다소 복잡하구요. 차라리 div 태그로 표를 구성하는게 훨씬 깔끔하고 쉽습니다. 하지만 div요소의 쓰임새는 정말 많죠. 그래서 특별히 display: grid라는게 개발된것이 아닐까라는 생각이 들었습니다. grid와 inline-grid 기본적으로 요소의 성격은 크게 세가지죠. 블록요소, 인라인요소, 인라인-블록 요소 이렇게요...
CSS에서 색상을 지정하는 방법은 크게 네가지가 있습니다. 어렵지 않으니 한번 따라해 보시기 바랍니다. 색상명 말그대로 색상명을 입력하는 방법입니다. 빨간색인 경우면 영어로 RED죠? 그래서 영문 표기를 그대로 입력하는 방식입니다. 엄청 쉽죠? 이를테면 (일러봐라) 이런 경우입니다. color: red; 이렇게 입력하면 폰트 색상이 빨간색으로 적용될 것입니다. 색상명을 입력하는 경우의 장단점은 다음과 같습니다. 장점 : 직관적인 표현이라 어떤 색이 적용되어있는지 바로 파악 가능 단점 : 다양한 색상 표현 어려움 그렇습니다. 영어만 읽을 줄 아시면 현재 어떤 색상이 적용되어 있는지 금새 파악이 가능합니다. 하지만 이렇게되면 마치 크래파스 20색처럼 정해진 색상으로만 표현을 해야 한다는 부분이 아쉽습니다. ..
개인적으로 링크 버튼을 만드는 두 가지의 방법에 대해 언급해보려고 합니다. 정답은 없지만 어떤 작업을 할 때 이 방법이 좋다라는 견해는 있으니 한번 참고해 보시기 바랍니다. 예시 먼저 아래의 링크 버튼을 살펴보시겠습니다. See the Pen a링크 버튼 만들기 두 가지 컨셉 by rgy0409 (@rgy0409) on CodePen. 버튼1과 버튼2 두 가지가 완성되어 있습니다. CSS를 살펴보시면 버튼1의 클래스명인 ex1에 적용시킨 스타일과 버튼2의 클래스명인 ex2의 스타일 옵션들이 다르다는것을 알 수 있죠. ex1은 비교적 간단합니다. ex2는 ex1에 비하면 다소 복잡합니다. 자유롭게 만들고자 할 때 이 방법은 현재 티스토리같은 규격과 형식에 얽메이지 않은 웹페이지에서 적용해볼 수 있는 방법입..
홈페이지를 제작하다보면 텍스트는 필연적으로 들어가게 되어있습니다. 메뉴 항목이라던지, 홈페이지 제목 등등에 사용되곤 하죠. 푸터 영역엔 무조건 텍스트가 들어갑니다. 설마 푸터를 이미지로 퉁치는 만행을 저지르는 일은 없어야 할 것입니다. 오늘 알아볼 text-transform은 한글이 아닌 알파벳으로 이루어진 영문장을 사용할 경우에 적용할 수 있는 방법입니다. 내용이 너무나도 간단하니 예시를 통해 바로 알아봅시다. See the Pen CSS text-transform by rgy0409 (@rgy0409) on CodePen. 어떤가요? 금새 파악이 되죠? 그러면 간단히 요약해 보겠습니다. text-transform: none; ▶ 기본값 text-transform: capitalize; ▶ 영단어의 첫..
텍스트에 밑줄을 넣거나, 취소줄을 긋거나 a링크의 줄을 없앨 때 사용하는 text-decoration에 대해 알아보겠습니다. 개인적으로는 text-decoration을 a링크에 많이 사용하는 편입니다. a링크 태그는 기본적으로 밑줄이 들어가는 형태입니다. 요즘 웹페이지를 살펴보시면 링크에 밑줄이 들어간 경우가 거의 없잖아요? 그때 사용하는것이 text-decoration: none; 처리입니다. 종류와 쓰임새는 예시를 통해 한번 자세히 살펴보겠습니다. 기본 옵션 예시 See the Pen CSS text-decoration by rgy0409 (@rgy0409) on CodePen. 각 항목별로 살펴보시면 쉽게 파악 가능합니다. 아래는 요약 내용입니다. text-decoration: none; ▶ 비활성..
텍스트 혹은 이미지와 텍스트 조합에서 세로축에 대한 정렬을 설정할 수 있는데 이때 사용하는것이 바로 vertical-align 입니다. vertical-align은 부모 요소와 자식 요소 사이에 사용되어지며 부모 요소는 반드시 inline 또는 inline-block 요소여야 합니다. 블록요소는 안 됩니다. 그렇기때문에 텍스트로 이루어진 문장에서 사용되어지거나 이미지와 텍스트가 같이 있는 경우에 사용됩니다. 사용 빈도는 그렇게 높지 않습니다. 블록요소를 세로정렬하는게 훨씬 깔끔하고 확실한 방법이기 때문입니다. 하지만 이것도 알아두면 분명 요긴하게 사용할때가 올 것입니다. 블록요소의 세로 정렬에 대한 방법은 아래의 글을 참고해주시기 바랍니다. CSS flex align-items 자식요소 세로 정렬(배치)..
수 많은 도서들, 그리고 그 속에 담겨있는 엄청난 양의 텍스트들... 이 텍스트들의 공통점이 하나 있습니다. 모든 도서가 이렇지는 않겠지만 대부분은 들여쓰기가 적용되어 있습니다. 보통 새로운 문단이 시작되면 첫 단어의 왼쪽이 살짝 떨어져 있을겁니다. 이런 식으로요. 예시 살펴보기 See the Pen 텍스트 들여쓰기 두 가지 방법 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 쭉 훑어보시면 두 개의 무작위 문단과 두 개의 이미지가 있습니다. 각 문장은 p태그로 감싸여 있으며 들여쓰기가 적용되어 있습니다. 또한 p태그 안에도 img 태그를 넣었습니다. 그런데 이 두개의 이미지는 차이가 있습니다. 이미지의 왼쪽 부분을 유심히 살펴보시면 알 수 있습니다. 첫번째 이미지에는 들여쓰기 ..
HTML 요소의 영역을 확장하고 펼치는데 유용하게 사용하는 CSS 스타일이 바로 padding(패딩)과 margin(마진)입니다. 예를 들어서 h3 태그를 사용하는데 이 태그의 주변 영역을 넓혀서 백그라운드의 색상을 확장하고 싶습니다. 이럴때 우리는 padding을 써야 할까요? margin을 써야 할까요? 여기에서는 백그라운드의 색상 영역을 확장하고 싶다고 했으니 padding을 사용해야 맞습니다. padding 패딩은 요소의 영역을 몸을 부풀려 확장하는 역할을 합니다. 겨울에 추우면 패딩을 입죠? 패딩을 입으면 몸이 커지는 효과를 볼 수 있습니다. 그 원리라고 이해하시면 됩니다. 패딩은 자신의 몸둥아리를 늘리는 역할을 합니다. 아래에 태그를 사용하여 간단한 텍스트를 넣어봤습니다. 인라인요소에 적용시키..
기본적으로 HTML의 태그에는 고유 속성이 있습니다. 이 부분에 대해서는 이미 한 차례 자세히 언급을 한 글이 있으니 아래의 내용을 한번 더 확실히 이해하시는것이 도움이 될 것입니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com 위의 글에도 나와있듯 태그(Tag)에는 고유 속성이 있는데 그 속성에 따라 블록요소, 인라인요소, 인라인-블록요소 이렇게 3가지의 요소로 나뉩니다. 각 요소마다 가지는 특징을 정확히 이해한다면 HTML+C..
display: flex;에 대해서 계속해서 강좌를 이어나가도록 하겠습니다. 드디어 오늘은 flex의 마지막 시간이 될 것 같군요. 그동안 잘 따라오셨나요? 만약 이 누추한 곳을 처음 방문하신 분이시라면 flex에 대해서 정확하게 알아야 할 필요가 있습니다. 그래야 본문이 이해가 되거든요. 그리고 어차피 flex에 대해 알아야 나중에 퍼블리싱 하실 때 작업하시기 편하실 것입니다. 아래의 글들을 모두 정독해 주시기 바랍니다. CSS display: flex 그리고 inline-flex CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성 CSS flex justify-content 자식요소 가로 정렬 원하는대로 배치 CSS flex align-items 자식요소 세로 정렬(배치)1 ..
태그 블록 요소는 세로로 쌓이는 속성을 가지고 있습니다. 크기를 가지고 있기 때문이죠. 불과 얼마전까지만해도 flex를 사용할 수 없었던 시절에는 블록 요소를 가로로 정렬하기 위해 float 이라는 스타일 속성을 사용했었습니다. 물론 지금도 이 속성을 이용하고 있는 편입니다. 그렇지만 반드시 뒤따라오는 요소에서 clear:both; 를 해줘야만 하는 불편함이 있습니다. 또한 float은 가로 정렬에 대해서만 정의합니다. 만약 세로로 배치된 요소를 서로 반전시키려면 HTML의 태그 순서를 바꾸거나 transform으로 180도 돌리는 방법을 구사해야만 할 것입니다. 이제 이런 불편함을 한방에 해결하는 flex-direction 사용 방법을 알아봅시다. flex-direction 여느때와 마찬가지로 예시를 ..
지난 시간에는 align-items에 대해서 알아봤습니다. align-items는 문서 프로그램으로 비유하자면 텍스트의 왼쪽/가운데/오른쪽 정렬과 비슷합니다. 이번에 알아볼것은 items가 아닌 content죠. align-content는 각 자식 요소별 간격에 따른 다양한 배치를 정의합니다. 만약 컨테이너의 부모 요소에 단 하나뿐인 자식 요소가 있다면 세로를 기준으로 정렬할 때 align-items를 사용해도 되고 align-content를 사용해도 됩니다. 하지만 자식 요소가 여러개가 들어가는 순간, 또한 자식 요소의 크기가 어떻느냐에 따라서 items 보다는 content를 사용하는것이 훨씬 편리합니다. align-content 백문이 불여일견입니다. 예시를 살펴보겠습니다. See the Pen C..
지난 시간에는 가로에 대한 다양한 정렬 방법을 알아보았습니다. 이번에는 세로축에 대해 다양한 정렬 방법에 대해 알아볼 것입니다. 우선 세로에 대해서 정렬하기 위해서는 부모 요소인 컨테이너에 반드시 세로크기가 정의되어 있어야 합니다. 아시다시피 웹브라우저 생태계는 보통 가로축은 고정으로 정해져 있습니다. 반응형에서는 100%로 사용되어질텐데 스마트폰이나 모니터의 경우에는 웹페이지의 가로 크기가 접속한 디바이스 또는 PC 디스플레이의 가로 사이즈만큼의 크기가 최대 사이즈입니다. 그러나 세로는 보통 스크롤로 표현되어집니다. 이때 홈페이지에 담긴 콘텐츠의 양에 따라 세로 사이즈는 무한정으로 늘릴 수 있습니다. 그러니 세로 크기는 반드시 고정된 상태여야 자식 요소를 세로 기준으로 자유롭게 배치할 수 있게 됩니다...
지난 시간에 flex에 대한 개념을 안내해 드렸습니다. 혹시 제 블로그가 첫 방문이시라면 우선 아래의 글을 먼저 정독 후 본문을 읽어주시면 더 이해가 빠를 것으로 예상됩니다. flex 정렬 방식에 대해서 정리해놓은 글이니 꼭 읽어주시기 바랍니다. CSS display: flex 그리고 inline-flex CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성 그러면 시작해 보겠습니다. justify-content 이 속성은 자식 요소의 부모 요소인 컨테이너 태그에 적용시키는 flex 옵션입니다. justify-content는 요소의 가로축인 X축에 대해서 정렬하는 6가지 옵션이 있는데 각 종류와 설명은 다음과 같습니다. justify-content: flex-start; (기본값)..
지난 시간에는 부모 요소인 컨테이너에 적용하는 flex와 inline-flex에 대해 알아보았습니다. 이번에는 자식 요소들의 가로 사이즈 형성에 영향을 주는 부모 요소의 flex-wrap 속성에 대해 자세히 알아볼 것입니다. 이 부분도 상당히 중요합니다. 웹 페이지를 구상할 때 정사이즈로 보여줘야 하는 요소가 있는 반면, 사이즈의 크기에는 상관 없이 어떻게든 보여지기만 해도 되는 요소가 있을 수 있죠. 보통 여행 사이트가 후자에 해당하고 쇼핑몰 카테고리가 정사이즈에 속할 것입니다. 이럴때 부모 요소인 컨테이너에 flex-wrap 옵션을 사용함으로서 자식 요소의 가로 크기를 정의할 수 있습니다. flex-wrap: nowrap; 이 옵션은 flex 속성의 기본값입니다. 따라서 부모인 컨테이너 요소에 dis..
인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정렬이든, 중앙 정렬이든, 세로에 대한 중앙 정렬이든 뭐든지 싹 다 쉽고 간편하게 만들 수 있습니다. 말로는 뭔들 못하겠습니까? 바로 실습으로 들어가겠습니다. Flex 속성에 대하여 먼저 플렉스에 대한 개념부터 이해하고 넘어가겠습니다. flex를 검색해 보시면 「구부러지다」, 「탄력성」 등의 의미를 담고 있음을 확인할 수 있습니다. 즉 유연하게 요소들을 배치할 수 있다는 뜻으로 해석할 수 있을 것입니다. flex는 display의 여러 옵션 중 하나입니다. block이나 inline-block, ..
부모 요소의 자식 요소들 끼리, 그러니까 자매 및 형제 요소들을 선택하는 방법은 두 가지가 있습니다. 여기에서는 부모 요소를 기준으로 하는것이 아닌, 자식 요소간의 선택 방법입니다. 본문 내용의 이해를 돕고자 아래의 예시를 먼저 살펴보시기 바랍니다. See the Pen ~ 선택자 // + 선택자 by rgy0409 (@rgy0409) on CodePen. ~ 선택자 물결표 모양의 특수 기호를 사용한 선택 방법입니다. 이 기호를 사용하게되면 같은 F1 세대의 모든 자식 요소가 일괄 선택됩니다. 단 HTML의 마크업 순서가 중요한데, 기준으로 선정한 태그의 다음 태그들이 일괄 선택되어집니다. 위의 예시에서 test1의 ID값을 갖는 div 안의 태그를 살펴보시기 바랍니다. H3 H3 DIV H3 H3 H3..
CSS 스타일시트에서 마크업을 하는 선택자는 크게 세 종류입니다. 자기 자신, 혹은 자식요소, 나머지 하나는 자식 요소의 형제요소죠. 그 중에서 오늘은 자식 선택 방법에 대해서 집중 탐구를 해보려고 합니다. 친효스킨에서도 이 방법을 통해서 정확하게 어떤 자식 요소에 스타일을 만들어줄지 명시하고 있습니다. 사용 빈도가 꽤 높은 선택 방법이라고 할 수 있겠습니다. 먼저 아래의 예시입니다. 나를 선택해 보아요! 제발요 에 이런 태그 구조가 있습니다. 여기에서 div는 p들의 부모요소가 됩니다. 이제 p안에 입력되어있는 텍스트의 글씨 색상을 빨간색으로 바꾸고 싶습니다. 그러면 CSS에서는 이렇게 제어하면 될 것입니다. div.wrap p { color: red; } 이렇게하면 wrap이라는 클래스명을 가진 di..
지난 시간에는 a링크의 텍스트에 밑 줄이 들어가는것을 없애는 방법 및 더 자세한 옵션 활용 방법을 알아봤습니다. 이번에는 a링크의 기본 색상을 변경하는 방법에 대해 알아볼 것입니다. 이 부분도 지난 시간에 살짝 언급을 했었습니다. 링크 텍스트의 기본 색상은 파란색, 한 번 클릭한, 그러니까 최소 한 번이라도 방문한 링크 페이지는 보라색으로 바뀐다는 것을 말입니다. 여러분들께서 직접 구글에서 어떤것을 검색하시고 그 결과에 대한 링크들을 유심히 살펴보세요. 아직 방문하지 않은 검색글은 파란색 텍스트가, 방문한 사이트는 보라색 텍스트 링크로 바뀌어 있을테니까요. 본문에서는 이런 상황별 색상 변경 방법에 대해 안내를 해드릴 것입니다. HTML에서 그리고 CSS에서 사용하는 방법 두 가지를 모두 알려드리겠습니다...
HTML 세계에서 사용하는 수 많은 태그 중 요소라는것이 있습니다. 많이들 보셨을지도 모르겠습니다. 주로 링크를 넣을 때 사용하죠. a는 Anchor의 약자로 닻이라는 뜻입니다. 맞습니다. 배에 있는 그 닻을 의미합니다. 배가 정박하거나 출항할 때 바닷 속 바닥에 내린 거대한 쇳덩이가 바로 닻입니다. 닻을 올려라! 하면 출항을 의미하죠. 즉 이 앵커라는 개념은 뭔가를 단단히 고정하며 든든히 그 자리에 위치하는 우직함의 대명사로도 쓰입니다. 아무래도 HTML 세계에서는 하이퍼링크 문서답게 클릭 시 다른 웹사이트로의 이동에 있어서 마치 닻을 올리고 출항하는 기분을 주고 싶었던 모양입니다. 그래서 a 태그를 사용하게 된 것이 아닐까라는 생각을 해봅니다. a태그의 기본 형태는 다음과 같습니다. 텍스트 입력 a태..
HTML에서 글꼴을 스크립트 혹은 링크로 로드하는 방법이 있듯 CSS에서도 @font-face를 사용해 원하는 폰트(글꼴) 파일을 불러와 적용하는 방법에 대해 알아보겠습니다. 방법은 너무나도 간단하고 쉽습니다. 먼저 사용하고자 하는 글꼴 폰트 파일을 준비합니다. 그전에 웹에서 사용 가능하고 여러 브라우저에서 지원이 가능한 폰트 확장자에 대해 알아볼 필요가 있습니다. 웹용 폰트 확장자 다음의 확장자들이 있습니다. 보시죠. Internet Explorer Chrome Safari Opera FireFox TTF/OTF IE9 이상 O O O O SVG IE9 이상 O O O X EOT IE6 이상 X X X X WOFF X O O O O WOFF2 O O O O O 현재 인터넷 익스플로러(Internet E..
이번에는 정말 간단한 CSS 스타일을 알아봅시다. HTML에서 특정 단어를 두껍게 만들기 위한 태그(요소)로는 태그를 사용합니다. b는 Bold의 약자죠. 두껍게 처리하고자하는 단어를 태그로 감싸주면 해당 텍스트만 두껍게 표시가 됩니다. 이것을 CSS에서도 얼마든지 적용시킬 수 있습니다. 두껍게 See the Pen CSS font-weight 두껍게 / 보통 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 살펴보시기 바랍니다. 태그는 설명을 했으니 더 이상 언급을 하지 않고 바로 다음에 보이는 태그를 살펴봅시다. 태그는 인라인 요소로 주로 문장의 특정 단어를 강조하고자 할 때 간편하게 사용할 수 있는 대표 HTML 요소입니다. CSS에서 span 태그를 선택 후 다음의 CSS ..
이번에는 텍스트의 크기를 변경해 봅니다. 보편적으로 CSS에서 폰트 크기를 변경해주는 옵션은 다음과 같습니다. font-size 그러면 바로 예시를 살펴보겠습니다. See the Pen CSS 폰트 크기 3가지 옵션 by rgy0409 (@rgy0409) on CodePen. px 세 개의 문장이 있고 각 텍스트는 크기가 다릅니다. 지난 시간에도 잠깐 언급했듯 HTML에서의 기본 폰트 크기는 16px입니다. 따라서 첫번째 문장은 20px로 값을 입력했으니 기본 크기보다는 4px이 더 커진 상태가 될 것입니다. em (rem) 두번째에서는 폰트 크기의 단위가 px이 아닌 em을 사용했습니다. em 또는 rem을 사용할 수 있는데 간단하게 말씀드리면 「배」라고 생각하시면 됩니다. 물 위에 떠 있는 그 배 말..
HTML에서 텍스트를 입력 후 CSS에서 색상을 변경하는 방법에 대해 알아봅시다. 텍스트는 태그 없이 에디터에서 텍스트만 입력해도 출력은 되지만 편집을 위해서는 되도록 태그 안쪽에 텍스트를 입력하는것이 좋습니다. 대표적으로 태그나 태그들이 있습니다. 아래의 예시에서는 태그에 텍스트를 입력해 보겠습니다. 안녕하세요! 친절한효자손입니다. 이렇게 입력했습니다. 그러면 브라우저에서는 태그 안쪽에 입력된 텍스트만 출력됩니다. HTML에서 폰트 크기를 별도로 지정하지 않았다면 기본값인 16px 크기로 출력되며 색상은 검정색입니다. 색상을 변경하는 CSS 코드는 다음과 같습니다. p { color: #000; /* 16진수 헥사코드 또는 색상명 또는 rgba */ } color 라는 CSS 옵션을 사용한다는것을 기억..
div같은 블록박스 요소안에 백그라운드 이미지를 꽉 차게 적용하는 방법이 두 가지가 있습니다. 이미 예전에 이 부분은 잘 정리를 해두었기 때문에 본문에서는 한번 더 부족한 설명 부분을 언급하는 정도로 진행하려고 합니다. 아래의 글을 먼저 정독해 주시기 바랍니다. CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 rgy0409..
블록 요소를 가로 정렬할 때 display 속성을 inline-block으로 변경하면 됩니다. 가장 쉬운 방법 중 하나죠. 그러나 inline-block 속성으로 변경을 하면 한 가지 문제점이 발생합니다. 완전 치명적인 부분은 아니지만 1px 하나 하나에 민감한 레이아웃 작업에서는 다소 치명적일수도 있는 문제입니다. 여백이 생성된다는 것입니다. 아래의 예시를 봐주세요. See the Pen CSS3 - display : inline-block ; 여백 초기화 by rgy0409 (@rgy0409) on CodePen. wrap1과 wrap2의 아이디값을 가진 div 그룹이 있습니다. 각 div의 자식 요소에는 display : inline-block; 속성이 적용되어 있는 상태입니다. wrap1 그룹은 ..
유튜브의 알 수 없는 알고리즘이 하나의 영상을 보여줍니다. 해당 영상은 홈페이지를 만드는 과정을 보여주었습니다. 해외 유튜버인 것 같은데 웹아이콘을 폰트어썸을 사용하지 않고 다른 쪽 제품(?)을 사용하더군요. 다시 뒤로 돌려서 어디것을 사용하는지 살펴보니 Boxcions(박스아이콘)이었습니다. 역시 세상은 넓고 능력자는 많아요. Boxicons 설치하기 박스아이콘은 폰트어썸과 같은 웹아이콘을 제공합니다. 폰트어썸의 경우는 일부 유료지만 박스아이콘은 완전 무료입니다. 물론 언제 유료화가 될지는 모르겠지만 적어도 아직까지는 무료군요. 박스아이콘 홈페이지의 모습입니다. 아래에 링크를 걸어두었으니 바로 방문해 보시기 바랍니다. 홈페이지 방문 후 우측 상단에 있는 Usage 메뉴를 눌러주세요. Boxicons :..
현재 이 문제는 티스토리에서도 보여지는 문제입니다. 친효스킨에서도 문제입니다. 이것을 해결하기 위해서 한 달 전부터 머리를 끙끙 싸메고 노력중인데 별다른 뾰족한 방법이... 있긴 있습니다. 문제는 이게 기본 아이콘 이미지에도 영향을 준다는 부분입니다. 이게 문제인 것입니다. 현재 상황입니다. 댓글 리스트에서의 사용자 아이콘 부분입니다. 위는 기본 이미지죠. 기본 이미지의 경우는 문제 없습니다. 보시는 것처럼 정상 출력됩니다. 문제는 사용자가 프로필 이미지로 지정한 이미지의 경우입니다. 이게 친효스킨만 이러는건지 타스킨도 비슷한 상황인건지는 확실치 모르겠지만 (확인해보니 타스킨도 일부는 이미지가 흐림) 검색해보면 유독 크롬 브라우저에서 이런 현상이 발생한다는것을 알 수 있습니다. 해결은 어떻게 할까요? 아..