본문 바로가기

css7

CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius [CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius] 웹디자인을 하다보면 모든 개체가 사각형이라서 지겨울 때가 있습니다. CSS 둥글게 만들기는 창의적인 웹디자인에 필요한 방법일 것입니다.div나 li의 border 모서리를 둥글게 하기는 CSS에서 border-radius 속성을 사용합니다.border-radius 속성은 포토샵 없이도 외곽선을 둥글게 만들 수 있다는 장점이 있습니다. 기본적인 div 등은 html, php문서에서 개체를 만들어 준 후에 CSS파일을 열어서 테두리를 둥글게 만드는 속성을 주는 방법입니다. DIV, LI, SPAN 등의 개체를 만든 후 적용한다 예를 들기 위해 div로 사각형을 만들고 div개체의 모서리를 둥글.. 2018. 10. 2.
게시판 목록 리스트 글자 크기, 본문 글자 크기 CSS로 조절하기 - 스킨 수정 [게시판 목록 리스트 글자 크기, 본문 글자 크기 CSS로 조절하기 - 스킨 수정] 그누보드 스킨 수정 경로 한동안 한국의 사이트들은 작은 글씨, 오밀조밀한 배치가 유행했었습니다. 지금 보면 눈이 아파서 어떻게 사용했을까 할 정도로 촘촘하고 글자도 작습니다.물론 당시엔 모니터 해상도가 낮아서 지금보다 상대적으로 글자가 컸던 이유도 있습니다.그러나 그런 점을 감안하더라도 현재의 사이트들은 글자 크기가 많이 커졌습니다. 대부분의 게시판 목록과 본문 글자 크기는 CSS를 사용하여 한 번에 조절하고 있습니다.그누보드의 경우에도 마찬가지 입니다. 특정 부분에 CSS를 적용하는 것은 굳이 그누보드가 아니더라도 다 같으니, 스킨에 대해서 알아보도록 합시다. 그누보드에서 기본으로 적용된 스킨은 "그누보드5"를 기준으로.. 2018. 9. 28.
ID와 class를 제어하는 CSS의 # 과 . 에 대하여 ID는 class 둘 모두 스타일을 정의하는 부분입니다 DIV, IMG, TABLE 등 홈페이지에 사용되는 각종 요소들을 객체라고 합니다. 이 객체들에게 각자의 이름을 붙여주면 그 모양을 한꺼번에 조절할 수가 있어서 편리합니다. 심지어 DIV가 여러 개면 각각에게 또 다른 이름을 붙여서 다른 객체로 취급할 수도 있습니다. 홈페이지를 제작할 때 마법사가 되었다고 상상합니다. 이 것들은 두가지 과정을 거칩니다. 미리 style 정의 부분에서 선언하기 사이에 아래와 같이 적으면 됩니다. 또는 CSS파일에 아래의 내용을 입력해 놓아도 됩니다. #부분은 HTML문서에서 ID=title이라고 되어 있는 객체의 글자색을 붉은 색으로 적용합니다. .부분은 HTML문서에서 CLASS=contents라고 되어 있는 객체의.. 2015. 1. 28.
DIV의 투명도 효과 조절 - opacity (브라우저 버전에 따른 CSS적용) [DIV의 투명도 효과 조절 - opacity (브라우저 버전에 따른 CSS적용)] 인터넷 사이트를 다니다 보면 글자가 반투명이라 글자 뒤의 사진이 글자에 비치는 효과를 낸 것을 볼 수가 있습니다. 이건 어떻게 하는 것일까요? 사진에 바로 포토샵으로 글자를 쓴 것이라면 레이어의 투명도를 조절해서 넣은 것이겠지만, 회원이 올린 사진에 자동으로 글자 반투명 효과가 적용되는 것은 어떻게 하는 것일까요? 아래 내용은 세가지 문제점에 대한 설명입니다. 첫째, DIV를 투명하게 또는 반투명하게 할 수 있는가? 둘째, DIV 내부의 DIV까지 투명 지정에 영향을 받는 것을 어떻게 해결할 것인가? 세째, 브라우저마다 지원을 하는 것도 안하는 것도 있는데 어떻게 해결할 것인가? DIV의 투명도 조절에 대한 기본 opac.. 2015. 1. 19.
표준화 - DTD 선언 : 종류와 사용 방법 / DTD와 쿼크모드 [표준화 - DTD 선언 : 종류와 사용 방법 / DTD와 쿼크모드] 웹브라우저는 익스플로러 외에도 크롬, 파이어복스, 싸파리 등등 매우 많습니다. 만드는 제작 업체마다 여러가지 기능을 넣다보니 각각의 표현방법이 달라집니다. 그러다 보니 같은 홈페이지라도 어떤 브라우저에서는 잘 보이고 어떤 브라우저에서는 깨져 보이는 현상이 발생합니다. 이를 극복하기 위한 표준화 방법이 DTD인 것입니다. DTD와 쿼크모드 DOCTYPE를 규정하는 말입니다. 어떤 방식의 언어로 제작되었는가를 알려주는 것입니다. 물론 DTD선언을 하지 않고 홈페이지를 만들어도 됩니다. 그런 것을 쿼크 모드(Quirks mode)라고 하는데, 선언을 하지 않고 홈페이지를 만들면 코드입력을 조금 실수하거나 꼭 필요한 요소를 다 입력하지 않아도.. 2015. 1. 12.
메뉴/팝업 등에 써먹기 좋은 "떠있는 고정 레이어"코드 만들기 [메뉴나 팝업 등에 써먹기 좋은 "떠있는 고정 레이어" 코드 만들기] 떠 있는 고정 레이어? 어떤 사이트에서는 마우스 휠을 굴려서 화면을 아래로 스크롤 하더라도 상단의 메뉴가 계속 같은 자리를 차지하고 있는 것을 볼 수가 있습니다. 또 어떤 사이트에서는 화면이 스크롤 되도 배너가 계속 같은 자리에 떠 있는 것을 볼 수가 있습니다. 이것은 레이어를 fixed로 띄워서 놓았기 때문입니다. 브라우저 상에서의 고정 좌표를 지정하여서 계속 그 좌표에 있게 하면 아무리 화면이 움직여도 자리가 변하지 않습니다. 계속 같은 자리에 떠 있으면서 고정되는 레이어이기 때문입니다. 화면 디자인용이나, 배너용, 메뉴용 등으로 자주 활용되는 떠 있는 고정 레이어의 소스코드에 대해 알아 보도록 하겠습니다. CSS에서의 모양을 정하.. 2015. 1. 5.
화려한 HTML5 효과의 소스를 얻자 - tympanus.net [화려한 HTML5 효과의 소스를 얻자 - tympanus.net] tympanus.net HTML5가 대세입니다.HTML5의 효과들을 참고하고, 코드소스를 얻어가 보세요. 이 사이트에서 원하는 효과의 이미지를 클릭하면 데모를 볼 수도 있고 Markup, CSS, Javascript 별로 공개된 소스를 복사해 갈 수도 있습니다.따로 소스다운을 지원해 주기도 합니다. 영문으로 되어 있지만 코딩에 대한 지식이 있는 사람이라면 어려움 없이 활용을 할 수 있을 것입니다. ★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^ (로그인 필요없음) 2014. 12. 17.

티스토리툴바