반응형

Study Room/웹표준(하드코딩) 7

DIV 라운드박스 쉽게 만들자.

출처: http://urin79.com/?document_srl=100968&mid=blog&rnd=424585#comment_424585 DIV 라운드박스 쉽게 만들자. 우선 http://wigflip.com/cornershop/ 홈페이지에 접속해 보세요. 위와 같은 글자가 나옵니다. 배경색과 글자색 및 둥근 모서리의 크기등을 지정한 후 Create Graphics 를 클릭하니 아래의 그림처럼 나오는군요. 해당 이미지를 다운받고 css와 html 소스를 필요한 부분에 붙여넣기만 하면 끝납니다. 정말 간단하죠? DIV의 구조를 이해하시고 싶으시다면 아래의 링크주소로 가보시면 자세한 설명을 읽으실 수 있습니다. Div & Rounded box | Page Layout Series Part IX [CSS] ..

[div 강좌] 블로그 꾸미기! 아주 쉬운 div 코딩 Tip 하나...

[div 강좌] 블로그 꾸미기! 아주 쉬운 div 코딩 Tip 하나... (테이블 만들기) 제 블로그 우측에 보시면 아래 그림부분이 있죠? 이 부분처럼 div 코딩 하는 방법을 알려드리겠습니다. (div 테이블 코딩) 여기가 윗칸 => Cut ㅣ Action ㅣ HanRSS 부분 검색칸 관리자모드 > 스킨 > html/css 에서 해당부분 (Ctrl + F(검색) 창에서 " BLOG main image "를 찾으셔서 그 하단 부분 로 마감 되는 바로 밑줄)에 위의 #ccc

span tag

자세히 속성을 알려드립니다. 1. MARQUEE 태그 ▣원어 : ? / 시작태그:필요 함 / 종료태그:필요 함 텍스트가 어떤 방향으로 흘러가는 것을 표현합니다. 이 태그는 Explorer 전용 태그입니다. ▣속성 • align="값" (값 = left / right / center / justify) -----흘러 가는 텍스트 영역 밖에 있는 본문의 정렬 상태를 설정합니다. 3.0 이상 • behavior="값" (값 = scroll / slide / alternate) -----흘러가는 텍스트의 형식을 지정하며, scroll은 텍스트가 흘러가다 사라지고, slide는 흘러가다 마지막에 멈추며, alternate는 양쪽 방향으로 왕복합니다. 3.0 이상 • bgcolor="색이름 / SRRGB" ----..

div, span 태그강좌

◆ 강좌 요점 이번 강좌에서는 공간을 지정하고 style을 적용하는 태그인 DIV와 SPAN에 대해서 알아보도록 하겠습니다. 공간을 지정하는 것에 대해서는 FIELDSET도 마찬가지이기에 함께 다루도록 하겠습니다. DIV나 SPAN의 경우 공간을 지정하는 것에서 거의 같은 역할을 하지만 실상 미세한 부분에서 차이가 있습니다. 그 차이점은 강좌를 통해 알아보시고, DIV나 SPAN 그리고 FIELDSET을 공간을 담는 상자로 이해하고 시작하는 것이 빠릅니다. 이전 강좌에서 공간에 관한 태그로서 TABLE을 보셨으니 이해의 측면에서 그리 어려운 태그가 아닙니다. TABLE과 다른점이라면 TABLE은 하나의 공간을 로 나누어 의 묶음들의 집합체인 TABLE이 하나의 표 기능을 수행키 위한 태그이지만, DIV,..

DIV와 CSS를 이용한 웹 표준코딩의 장점

첨부파일 다운로드 웹 표준코딩을 준수 했을때 어떤 가시적인 효과가 있는지 직접 검증하기 위하여 한가지 실험을 하였습니다. 첨부된 파일은 동일한 화면을 Table로 구성하였을 때와 Div로 구성하였을 때 어떤 차이가 있는지 보여드리기 위하여 작성된 html 및 css 파일입니다. Table Layout Div Layout HTML 코드라인 수 = 59 Line HTML 코드라인 수 = 31 Line HTML 파일 용량 = 1.58 KB HTML 파일 용량 = 746 Byte Table Layout Menu List Menu1 Menu2 Menu3 Menu4 Menu5 Page Title Layout Test Page. Links Copyright Table Layout Menu List Menu1 Menu..

css style 사전

배경값 설정 background B 배경 이미지의 스크롤 여부 설정 background-attachment 배경색 설정 background-color 배경 이미지 background-image 배경 위치 설정 background-position 배경 이미지의 반복 설정 background-repeat 박스 경계선의 속성 설정 border 박스 아래 경계선의 속성 설정 border-bottom 박스 아래 경계선의 두께 설정 border-bottom-width 박스 경계선의 색상 설정 border-color 박스 왼쪽 경계선의 속성 설정 border-left 박스 왼쪽 경계선의 두께 설정 border-left-width 박스 오른쪽 경계선의 속성 설정 border-right 박스 오른쪽 경계선의 두께 설정 ..

div로 레이아웃잡기

직접 적용해보고... 경험을 토대로 올려드립니다.. 익숙해지면....테이블보다 쉽네요^^(간단하여)... 솔직히 예전에는 테이블이 웹페이지 레이아웃, 틀을 잡는데에 쓰일수 밖에 없었습니다. 그만한 틀을 잡아주는 속성이 약했기 때문입니다. 그리고 그 당시에는 그것이 더 편했고, 깔끔했습니다. 규격이 맞지 않아서 줄이고 늘리고 하는것이 더 문제 였으니까요. 하지만 DIV는 레이아웃을 위한 그 목적으로 씌여진 만큼, 그보다 더 다루기 쉽게, 간편하게 발전 되었습니다. 보통의 홈페이지 레이아웃으로 예를 들어가면서 보겠습니다. 이런 레이아웃을 만들어 보겠습니다. 이렇게 만들어 볼까요? 그렇다면 이제 슬슬 테이블은 복잡해 집니다

반응형