Hello World

크리스 코이어(Chris Coyer)는 최근에 자신의 사이트인 CSS Tricks에 올린 상황별 CSS 중앙정렬 방법을 정리한 글을 통해 CSS를 이용해 뭔가를 가로 및 세로로 중앙정렬하는 방법이 너무나도 많다는 사실을 보여줬습니다. 각 중앙정렬 방법은 모두 저마다 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 막강한 중앙정렬 기법을 만들어낼 수 있습니다.이제 본격적으로 어떻게 하는지 살펴보겠습니다.블록 만들기응답형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의.container 요소를 만듭니다.123 ...123456.container { width: 70%; height: 70%; margin: 4..

웹 사이트에서 예쁜 서체를 사용하고 싶은 마음은 누구나 가지고 있습니다. CSS3에서 다양한 서체를 화면에 랜더링 할 수 있는 새로운 기준과 방법을 제시함에 따라 글자를 이미지화 하는 것 보다, CSS 문서에서 어느정도의 타이포 디자인이 가능해진 것입니다. 이는, 글자나 문장의 수정에 있어 이미지를 관리할 필요가 없기 때문에 상당히 매력있는 부분이 아닐 수 없습니다.웹 폰트를 구현하는 구문과 방법에 대한 글은 인터넷 여기저기서 쉽게 찾아볼 수 있습니다. 이 글에서는 무심코 사용하던 구문들에 대해 조금 더 깊이있게 이해하고, 스스로 어떤 방법이 가장 합리적인지 판단 할 수 있도록 도움을 드리고자 합니다. 다만, 상당히 포괄적인 내용까지 다루므로 내용이 길고 난해한 부분이 있을 수 있어 정신건강에 해로울 수..

디자이너와 개발자는 너무 다릅니다. 여러 가지 이유가 있겠지만, 작업 방식부터 다르기 때문이라고 생각합니다. 실제로 웹 개발실에서 일하면서도 많이 경험할 수 있었는데요. 그중 가장 문제가 많이 생기는 부분이 폰트라고 생각합니다.서체의 경우, OS, 브라우저의 렌더링 스타일이나 유료폰트 구매 문제로 귀결됩니다. 하지만 자간과 행간은 맞출 수 있음에도, 디자이너분들과 소통하지 못했습니다. 저는 디자인을 전공했지만, 디자인을 정확하게 구현하고 싶은 마음에 개발을 시작했습니다. 하지만 초심과 다르게, 효율을 중시한 나머지 자간과 행간을 간과하는 경우가 많았습니다.이 부분이 문제 제기되어 방법을 모색하게 되었는데요. 그 내용을 공유합니다.여담이지만 디자인과 출신인 저도 자간, 행간에 대한 감각이 형편 없습니다.자..

HTML 태그는 하나하나가 박스로 구성되어 있습니다. 별다른 설정을 하지 않았다면, 내용이 길어지면 그에 맞게 박스도 커집니다. 하지만, 박스의 크기를 설정했을 때 내용물이 박스를 넘어갈 수가 있는데, 그런 상황에 어떻게 대처할 것인가를 overflow로 정합니다.overflow의 값은 visible, hidden, scroll, auto 네가지가 있습니다.visible 내용물이 박스를 넘어가도 보여줍니다. 기본값입니다.hidden 내용물이 박스를 넘어간 부분은 보이지 않습니다.scroll 내용물이 박스를 넘어가든 넘어가지 않든 스크롤바를 만듭니다. auto 내용물이 박스를 넘어가지 않으면 스크롤바가 없고, 박스를 넘어갈 때에는 스크롤바를 만듭니다.다음의 예제로 이를 확인할 수 있습니다. This is ..

position:absolute 로 태그를 위치 시키다보면 같은 레벨단계의 2개의 태그가 위치가 겹치기도 한다.( 상위태그랑 겹치면 하위태그가 걍 위로감) 이때 원하는 태그가 앞으로 나오게 하려면 z-index를 사용 하면 된다. z-index 값이 높을수록 앞에서 보이는데 경쟁시킬 2가지 태그에 각각 z-index 값을 입력하고 앞으로 나오게 할 태그값을 더 높게 주면된다. 값은 그냥 정수형 100 정도 주면 된다. ie 6과 7에서는 absolute를 감싸는 부모 relative가 있을경우 absolute의 z-index가 0으로 변경된다. 이것으로 인해 원하는 모습이 안나올 수도 있는데 해결하려면 부모의 z-index에게도 z-inde x를 추가하면된다. z-index 음수도 가능하다.[출처] [C..