Programming/CSS (30) 썸네일형 리스트형 CSS animation spin 맛보기 네모박스 360도 회전 시키기 CSS animation spin 맛보기 네모박스 360도 회전시키기 CSS animation을 사용해 본 경험이 많지 않지만, 맛보기용으로 네모박스를 360도 회전시키는 코드를 간단히 정리해 봤습니다. 소스 코드는 인터넷에 있는 코드를 여기저기서 참고해 필요한 코드를 가져와 정리만 한 것이지만 나름대로 기본적인 사항을 파악하는 데에는 도움이 되었던 것 같습니다. div 태그에 table을 cell을 사용한 이유는 웹페이지 상 회전하는 네모박스를 가운데로 정렬하기 위해서 사용하였으며 CSS animation spin 코드를 이용해 브라우저 종류에 따라서 360도로 작동하는 소스 코드입니다. 결과 개인적인 용도로 참고할 목적으로 정리한 코드이기도 하지만 필요한 분들이 있을 수 있다는 생각에 정리한 내용을 .. CSS 의사클래스 HTML table 태그에 활용해 보기(nth-child) CSS 의사클래스 HTML table 태그에 활용해 보기(nth-child) CSS 의사클래스에 대한 내용을 책에서 본 기억이 있는데 나름 유용할 것 같다는 생각에 class, id 선택자 방식과 의사클래스를 이용해 HTML 태그를 선택할 수 있는 코드를 나누어서 간단히 샘플 코드를 작성해 보았습니다. CSS 의사클래스는 프로그래밍 계산 결과 방식과 비슷한 형태로 HTML 태그를 선택할 수 있다는 장점으로 인해 불필요한 코드를 작성하지 않아도 되기에 코드의 가독성이 더 좋아 보입니다. 단점은 CSS 의사클래스를 자세히 모르는 사람들에겐 코드의 가독성을 더 떨어뜨리는 결과가 있을 수도 있어 보입니다. CSS 의사클래스를 사용하지 않을땐 class를 HTML 태그에 넣어 줘야 하는데 코드를 수정해야할 부분이.. CSS display 활용 div 레이아웃 샘플 소스 CSS display 활용 div 레이아웃 샘플 소스 HTML 레이아웃을 구성하며 CSS display 속성 중 table을 사용한 기억이 많이 없는데 일반 div를 사용하는 것보다 간편하고 깔끔하게 화면 구성이 가능한 것 같습니다. 물론 상황에 따라 조금 다를 수 있겠지만 브라우저 사이즈에 따라 레이아웃이 고정되어 안정적으로 표시되어 모바일 화면을 구성할 때도 꽤 괜찮을 것 같습니다. 웹이나 모바일 화면을 구성하게 될 일이 생긴다면 간단히 이 샘플 소스를 활용할 목적으로 작성하였습니다. 소스 top 1(main_big) 2(right_sub) 5 6 7 8 9 10 11 12 13 14 15 16 17 18 footer 결과화면 CSS display의 table, table-row, table-cell.. CSS float, clear 활용 div 태그 레이아웃 샘플 소스 CSS float, clear 활용 div 태그 레이아웃 샘플 소스 HTML div 태그를 활용해 div 레이아웃 샘플 소스를 간단히 작성해 보았습니다. CSS의 position을 사용하지 않고 float와 clear만 활용해 간단히 작성해본 div 레이아웃입니다. 나중에 제가 활용할 수 있도록 간단히 저장해 놓으려 합니다. 소스 ONE 상단 TWO 메인 내용 THREE 오른쪽 사이드 내용 FOUR 하단~ 결과 화면 TWO, THREE가 붙지 않아 조금 거슬리긴 하네요. margin이랑 padding 때문에 브라우저 크기가 줄었을 때 모양이 예쁘게 안 나오네요. 딱 붙는 형태의 div 레이아웃 태그를 원하신다면 table display를 활용해 작성한 내용도 있으니 참고하시면 도움이 될 듯 합니다. - .. 엣지 브라우저 CSS, 익스플로러 브라우저 CSS, 크롬 브라우저 CSS를 각각 적용해 보자. 엣지 브라우저 CSS, 익스플로러 브라우저 CSS, 크롬 브라우저 CSS를 각각 적용해 보자. 제가 알고 있는 브라우저의 종류만 해도 대략 5가지 정도 됩니다. 익스플로러, 엣지, 파이어폭스, 오페라, 크롬 브라우저 등 모든 브라우저의 환경에 맞춰서 동일한 화면을 구성한다는 게 쉬운 일은 아닌 것 같습니다. 일정에 압박이나 기존에 사용하던 소스를 활용해서 새로운 무언가를 만들어 활용하고자 하는 경우에는 다양한 브라우저의 환경에 맞춰 소스를 작성한다는 것은 웹 프로그래밍을 하면서 정말 어려운 일 같기도 합니다. 시간이 좀 더 주어진다면 모든 환경에 맞춘 HTML 태그 작성과 모든 브라우저를 지원하는 CSS 문법을 사용하겠지만 사실상 그렇게 일을 처리하기 위해서는 시간적 여유가 필요합니다. 개인적인 경험으로.. HTML CSS 제목 밑줄 소스 길게 표시하기 HTML CSS 제목 밑줄 소스 길게 표시하기HTML과 CSS를 이용하여 제목이나 특정 태그에 밑줄을 표시하는 코드를 간단히 작성해 보려고 합니다. 대부분 HTML 태그에서 글자의 밑줄을 표시하기 위해서는 CSS 코드의 text-decoration: underline; 을 사용하면 되지만 글자가 표시된 부분만 밑줄이 표시되게 됩니다. 하지만 제가 하고 싶었던 글자의 밑줄 표현은 글자의 수와 상관없이 화면 끝까지 밑줄이 표시되기를 원했습니다. CSS text-decoration: underline; 을 사용하지 않고 간단히 밑줄을 표시하기 위해서 저는 border-bottom 속성을 이용해서 밑줄을 표시하였습니다. 첫 번째는 HTML의 h 제목 태그에 border-bottom 속성을 사용하여 밑줄을 표시하.. CSS 소스 작성할 때에 크롬브라우저로 편하게 코딩하는 방법 CSS 소스 작성할 때에 크롬브라우저로 편하게 코딩하는 방법웹사이트의 HTML 태그의 수정 및 디자인 등을 이용할 때 CSS 코드를 많이 작성하실 겁니다. 뭐 이미 현업에서 작업 하시는 분들은 대부분 아시는 내용이시겠지만 필요한 분들이 있을 수 있으니 크롬 브라우저를 이용해서 CSS 소스 코딩을 편하게 하는 방법에 대해서 간단히 작성해 보려고 합니다. 만약 크롬 브라우저를 잘 모르시는 분들은 크롬 브라우저를 설치하는 방법에 대해서 작성한 적이 있으니 필요하신 분들은 참고하시면 좋을 것 같습니다. 링크된 경로를 참고하시기 바랍니다. - http://zzarungna.tistory.com/472 물론 소스 코드를 작성하는 곳에서 CSS 코드를 많이 다뤄보고 익숙하고 기억하고 있으신 분들은 소스를 입력하는 곳.. CSS를 이용해 파비콘을 적용해보자. CSS 파비콘 적용. 파비콘은 인터넷창에 이미지를 넣는 기능입니다. CSS 소스로 아주 간단히 구현이 가능 합니다. 아래 이미지가 파비콘을 적용한 모습입니다. 티스토리 관련해서 파비콘 적용에 대해서 작성했지만 소스로는 어떻게 적용하는지 시작 하겠습니다. 소스 구문은 굉장히 간단 합니다. 그럼 테스트로 웹페이지를 하나 만들어봅시다. source.html 웹사이트에 이모티콘(파비콘)을 넣어봅시다. 위처럼 html 파일에 css구문 하나만 넣어주면 파비콘 적용이 끝납니다. 그런다음 파비콘을 넣기 위해서는 확장자가 ico인 파일이 필요합니다. 그래서 ico파일을 직접 만드셔도 되지만 홈페이지에서 무료로 제공되는 아이콘을 다운로드 해봅시다. https://www.iconfinder.com/ 위 URL을 클릭하신뒤.. 이전 1 2 3 4 다음
