HTMl5 레이아웃 만들기

웹표준 2010. 2. 20. 15:57

HTMl5 간단한 레이아웃 만들기

html5를 이용해서 간단한 레이아웃을 만들어보자

먼저 생각하는 레이아웃의 모양은 다음과 같다.

각 엘리먼트와 그 크기는 그림과 같이 할것이다

html5 소스

위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, artucle) 맨아래 풋터(footer)를 둘것이다.

소스는 다음과 같다.

html5 simple test

header

section

article

footer

위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다.

CSS로 완성

이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을 none

*{ margin:0; padding:0;}
ul,li{list-style:none;}

중앙에 배치하기

대부분의 사이트는 가운데 배치한다 그방법중 하나가 body엘리먼트의 텍스트위치를 가운데로 잡아주고 그다음 div엘리먼트로 감싸서 margin:0 auto; 이렇게 주어 가운데로 배치하는방법이다.

body{ text-align:center; color:#FFF; background:#000;}
div#wapper{ text-align:left; width:800px; margin:0 auto; }
/*가로 넓이는 그림처럼 800px로 잡아주었다*/

display block

html5의 새로추가된 엘리먼트를 display:block; 으로 해줘야 된다 그래야 css가 먹힌다. 브라우저의 문제인지 정확한 이유는모르겠지만 어쨌든 display:block;으로 잡아주자

header, footer, nav, aside, section, article {
display:block; 
}

너비 잡아주기

각각의 너비를 잡아주자 그림을 참고하자. 그리고 aside는 왼쪽으로 배치 section은 오르쪽으로 배치시켰다.

header, nav, footer{
width:100%;
}
aside{
width:30%;
float:left;
}
section {
margin-bottom:10px;
width:65%;
float:right;
}

마무리

남은 것은 마진, 패딩조금씩주는것, 그리고 배경색 결정등이다.

header, footer, nav, aside, section{
margin-top:10px;
}
header, nav, aside, section, footer {
background-color: #666;
}
footer {
clear:both;
/* asdie와 section을 float시켰기
째문에 그아래위치하도록 clear*/
}

article부분은 약간다르게 꾸며주었다.

article {
width:90%;
margin:20px;
background-color: #999;
}

이로서완성되었다. 확인하려면 아래로 가보자

http://sianasiatiger.cafe24.com/study/5_html.html

html5 지원 브라우저

개인적으로 확인한 바로는 다음과 같다. 더낮은 버전이 지원가능할수도 있다. 정확한 자료가있다면 코멘트를...

  • 파이어 폭스 3.5
  • 오페라 10.0
  • 구글크롬 4.0
  • 사파리 3.0
  • IE8

IE의 경우 6,7은 지원되지않는다. IE8의 경우도 역시 확실하지않다.

마지막으로 html5로 만들어진 여러 사이트를 구경하고싶다면 아래 사이트를 가보로독

http://html5gallery.com/


설정

트랙백

댓글

  • 바삭 2010.04.11 19:36 ADDR 수정/삭제 답글

    홈페이지 만들기에 관심이 있어 들어왔다가 초보라.. 질문드려요~^^;//
    마지막에 있는 사이트에 들어가서 html5로 만들어진 사이트들을 둘러봤는데용,
    대부분이 IE8 에서 오류없이 잘 보이는데용,
    http://sianasiatiger.cafe24.com/study/5_html.html 요거는 파폭에서는 잘 보이지만
    IE8에서는 잘 안보이는데 어떤 차이인가요..?

    • Favicon of https://siana.tistory.com 샷타이거 2014.10.12 10:39 신고 수정/삭제

      IE의 경우를 대비해서 별도로 자바스크립트를 사용해야하지요..

      만약 브라우저가 IE라면 내용의 자바스크립트를 이용해야지요
      <!--[if IE] 스크립트 [endif]-->

      사용한 예시는 결과는 아래에서확인 할 수 있습니다.
      http://sianasiatiger.cafe24.com/study/5_html_IE.html

      이에 대해서는 간단히 트랙백으로 HTML5 IE핵을 설명해 올렸습니다
      http://siana.tistory.com/entry/HTML5-IE-%ED%95%B5

  • 감사합니다. 너무 너무 잘 읽었습니다. AD 클릭도 하고갑니당.

웹표준 간단한 폼(form) 양식

웹표준 2010. 2. 18. 16:53

웹표준 간단한 폼(form) 양식

리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다.

개인정보입력

form
form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다.
fieldset
fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다.
legend
legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다.
label
label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다.
input
input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가진다.

리스트를 활용한 응용

위에서는 p엘리먼트로 labler과 input엘리먼트로 감싸주었다.리스트를 이용해보자

  
  1. 이름(필수)
  2. 연락방법을 선택하세요 (적어도 하나)
    • E-Mail(선택)
    • Phone(선택)
    • Fax(선택)

위와같은 모델로 폼을 만들어볼것이다.폼양식은 만들기가 다른 것에비해 복잡하기에 이와같이 미리 모델을 만들어보는것이 유용하다.

개인 정보 입력
  1. (필수)
  2. 연락방법을 선택하세요 (적어도 하나)
    • (선택)
    • (선택)
    • (선택)

위와같이하면 결과는 아래그림처럼 나올 것이다.

CSS로 마무리

먼저 마진 패딩, 리스트 꾸밈을 초기화 해준다

*{ margin : 0; padding : 0; }
ol,ul { list-style : none; }

나머지는 아래를 참고

fieldset{ padding: 30px;}
/*필드셋안에 너비를 30px준다*/
form{ position:absolute; 
      left:200px; top:100px; 
      width:600px;}
/*폼의 위치는 임의로 대충 잡아놨다.
가로 너비를 600px*/
ol li{ margin-top:20px;}
ol li ul li{ margin-top:5px;}
ul{float:left; margin-left:30px; }
ul li label{ float:left; width:100px;}
/*개별 마진값을 준다.*/

결과는 여기서확인http://sianasiatiger.cafe24.com/study/F_start.html


설정

트랙백

댓글

Ajax란 무엇인가? Ajax의 정의

Ajax 2009. 12. 8. 16:12

Ajax란 무엇인가?

jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자.

Ajax 의 정의

초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다.

  • 비동기(Asynchronous)
  • 자바스크립트(javascript)
  • 그리고 and
  • XML

이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다.

위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운요청을 보내고 서버는 다른페이지를보내게된다. 하지만 ajax의 경우는 전체 페이지를 반환하는대신 현재 로딩되어있는 페이지의 일부분만 반환한다. 쉽게 말하자면 일반사이트의 클릭 새로고침으로 페이지가 완성된다면 한페이지내에서 간단하게 빨리 정보가 제공되는 셈이다.

간단히 둘러보는 몰라왔던 ajax

넓은 의미에서 ajax는 비동기란점에서 우리가 아는 다음과 같은 것들도 포함될수있다.

플래시
플래시 무비는 웹서버와 비동기적으로 통신할 수 있다.플래시로 구성된 사이트를 가보면 새로고침,앞으로 가기,뒤로가기와 달리 클릭으로 새내용을 볼수있는것을 볼수 있다. 새로고침을 플래시로 된 페이지에서 클릭한다면 맨처음페이지로 갈것이다.
프레임
요즘 홈페이지 구축에서 거의 사용하지않지만 기억을떠올려보자 클릭시 페이지의 모든 것이업데이트되지않고 한프레임만 업데이트되는것을 볼수 있다. 이것역시 비동기관점에서 본것이다.
그외..
아이프레임. XMLHttpRequest..

요약하기

Ajax는 특정한 기술, 즉 "css할 수 있어요"와 같이 "전 ajax할 수 있어요" 가 아니란 것이다. ajax는 방법론이다HTML,CSS,DOM을 기본으로 개념을 잡고 어떻게 서버측과 비동기적으로 페이지를 구축하는냐 라고 할 수 있다.

위키백과참조

앞서 설명한 것처럼 되어있다.여기도 특정 기술이 아니라고 설명되어있다. 일부 요약했고 링크된 곳으로 직접가보자

Ajax(Asynchronous JavaScript and XML)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 개발 기법이다.

  • 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
  • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML 이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).

DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.


설정

트랙백

댓글

jQuery hide, show ,fade 애니메이션 메소드

jQuery/DOM&jQuery 2009. 10. 25. 16:49

jQuery hide, show ,fadeIn, fadeOut 메소드

엘리먼트를 간단히 숨기고,보여주기는 css로도 충분히 가능하다.또 jQuery에서 css()메소드로도 마찬가지다.이에대한 간단한 예부터 보자

어쩌고 저쩌고

위 엘리먼트를 단순히 보이게 안보이게 할려면 다음과 같이 하면 된다.

p{display:none;}
/*안보임*/
p{display:block;}
/*블록 스타일로 보임*/

jQuery에서 css메소드를 이용한것을 보자

#('p').css('display','block');

마지막으로 하나더 있으니 css()메소드가 아닌 hide(), show()를 이용하는것이다. 각 명칭대로 보여주기, 감추기 기능이다.예제를 보자

$('p').show();//보여줌
$('p').hide();//감춤

이같은 것은 어느 방법을 이용하던지 단순히 보여주고 안 보여주고의 기능이다.그럼 애니메이션효과로 가보자

hide(), show()를 이용한 애니메이션

hide(), show()를 좀더 이용하면 애니메이션 효과를 줄수있다.방법은 괄호안에 값을 주는것이다.단위는 1/1000초이다.괄호안에 값을 줌에 따라 나타나고 사라지는 속도가 달라진다. 또 'slow', 'nomal' ,'fast'를 주어 속도를 줄수도있다.그속도는 아래예제를 보자

$('p').show(350)
//1000분의 350초 속도로 나타남
$('p').show('slow')
//0.6초
$('p').show('nomal')
//0.4초
$('p').show('fast')
//0.2초

fadeIn(), fadeOut()를 이용한 투명 애니메이션

fadeIn(), fadeOut()을 이용하면 나타남과 사라짐에 투명도를 줄수있다.괄호안에 값은 hide(), show()와 같다.

$('p').fadeIn(350);
$('p').fadeOut('fast');

클릭이벤트로 간단한예제

이제까지 설명한것으로 클릭을 통한 예제를 만들어보겠다. 버튼이란 글자를 클릭하면 바로나타나는 엘리먼트, 그리고 천천히나타나는 엘리먼트. 그리고 투명하게 사라지는 엘리먼트를 구현해 보겠다.

먼저 소스에는 h3엘리먼트를 버튼으로 그리고 각각 일어날 애니메이션에 아이디를 주었다.

버튼

클릭하면 바로 나타난다

클릭하면 천천히나타난다.

클릭하면 페이드효과로 투명하게 사라진다.

스크립트를 보자.설명은 소스에 각개 자세히 해놓았다.

$(document).ready(function(){
  //문서이벤트
    $('#gamma, #zeta').hide();
   // #gamma, #zeta 이란 두아이디에 접근하고 감추어 둔다.
     $('h3 a').click(function(){
       //h3 a 즉 버튼이라는 글자를 클릭했을떄
			$('#gamma').show();	
            //#gamma아이디의 엘리먼트를 보여줌
			$('#zeta').show(350);
            //#zeta아이디의 엘리먼트를
              350/1000초의 속도로보여줌
			$('#fader').fadeOut(900);
            //#fader아이디의 엘리먼트를
             900/1000초의 속도로 투명하게 숨김
		return false;
        //false값을 주어 기본동작 
        //즉 $('#gamma, #zeta').hide();이 일어나지않도록함
	 });
});

위의것을 적용한 예제는 여기로http://sianasiatiger.cafe24.com/study/J_display.html


설정

트랙백

댓글

CSS dispay 프로퍼티

CSS 2009. 10. 25. 15:26

CSS dispay 프로퍼티

dispay 프로퍼티는 엘리먼트를 어떻게 보여주냐(또는 어떤 타입으로 참조:엘리먼트의 분류)를 정하는 css 프로퍼티이다. 가장대표적인 값으로 none, inline, block가 있다.이세가지부터 간단히 보자

none
영문 뜻그대로다. 보이지 않게 한다.엘리먼트가 화면에 보이지않는다.

아무것도 안보임ㅠㅠ

p{display:none;}
inline
인라인(inline) 엘리먼트처럼 보여준다. 즉 한줄로 보여주게 된다.예제를 보자.가장대표적으로 li의경우 사용되는 경우가 많다.
  • 한줄로
  • 나란히
  • 줄서기
li{display:inline;}

이러면한줄로 나란히 줄서기이렇게 한줄로 화면에 표시될것이다

block
앞서설명한 inline과 반대로 블록(block) 엘리먼트처럼 보여준다

아래의 p엘리먼트안에 a엘리먼트가 블록으로 바뀐다.

우리는 한블럭 차지하네

#gama a{ display:block; }

예제는 여기가서 보자http://sianasiatiger.cafe24.com/study/S_display.html


설정

트랙백

댓글

jQuery를 이용한 CSS 효과

jQuery/DOM&jQuery 2009. 10. 24. 13:22

jQuery CSS 메소드

css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자

CSS 지정

css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자

#example{backgound: #fcc;}
/*선택자는 아이디인 #example 
 그리고 프로처티는 배경인backgound
 마지막으로 그배경색은 #fcc로 한것*/

이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자

jQuery css()메소드

jQuery에서 사용해보자 방법은 다음과 같다.

  • .css('프로퍼티' ,'값')
  • 만약 여러개를 정한다면 중괄호와 콜론을 사용한다. .css({'프로퍼티1':'값1','프로퍼티2':'값2' })

예제를 통해 알아보자

배경색을 #fcc로 할것임

배경색을 #fcc로 하고 폰트 사이즈를 28px로

h4엘리먼트에는 배경색변화 그리고 p엘리먼트에는 배경색변화와 더불어 폰트사이즈도 변하게 할것이다.

$(document).ready(function(){
  $('h4').css('background','#fcc');
  $('p').css({'background':'#fcc','font-size':'28px' });
});

위 소스와 같이$('h4'),$('p')로 접근했고 .css()메소드로 css를 지정해주었다.프로퍼티를 여러개 사용할떄는 중괄호와 콜론을 사용한다는점을 명심해두자.

직접작성한 예제는 여기서보자 그냥 css를 사용한것과 jquery를 이용한예제이다http://sianasiatiger.cafe24.com/study/J_cssEffect.html

jQuery를 이용한 것은 크로스브라우징의 목적도 있지만 이외 css()메소드와 함께 jQuery의 다른 메소드와 함께 혼용하여 다양한효과를 줄수도 있다는 점이 장점이다.


설정

트랙백

댓글

jQuery css 선택자에 접근

jQuery/DOM&jQuery 2009. 10. 15. 16:36

jQuery에서 css 선택자 접근하기

앞선 포스트에서 $()이방법으로 선택자에 접근한다고 설명했다.괄호안은 그대상을 넣어주면된다. css파일에서 선택했을때와 차이를 비교해보자.

선택자CSSjquery
엘리먼트p$('p')
ID(아이디)#name$('#name')
class(클래스).name$('.name')
되돌아보기 :: getElementByTagName,getElementById.....
jQuery를 사용하지않을떄 그 전에는 자바스크립트에서 getElementByTagName,getElementById로 선택자에 접근했어야 했다.또클래스에 접근할 getElementByClass는 만들어 줘야했다.게다가for(var i=0; i<elementLi.length; i++)처럼 문서 전체에서 원하는것을 찾기위해 for 구문도 사용해야했다.하지만 jquery에서는 $( )으로 엘리먼트, 아이디 클래스 모두 쉽게 접근가능하다.

간단한 예제보기

$('p').addClass('nanan');
$('#happy').addClass('nanan');
$('.unhappy').addClass('nanan');

위예제는 $()로 엘리먼트p, 아이디happy, 클래스unhappy에 접근하고 addClass란 메소드드를 통해 nanan이라는 클래스를 추가하는예제이다.

또다른 jQuery의 더 좋은 점은 브라우저를 넘나들 수 있다는 점이다.

크로스 브라우징(cross browsing)

최근 css3까지 개발중인 css로 접근할때 문제점은 브라우저에 따라 지원하고 안하고 차이가 엄청나다는 점이다. 지원여부는 아래 포스팅참조

이같은 지원문제를 jquery에서는 버전 종류를 떠나 모두 가능하게 해준다.특히 문제되는 IE버전 해결에 도움이 크다.앞에서 jQuery에서는 $()로 접근한다고 설명했다. 이방법으로 IE6~7에서 지원하지 않는 것도 접근가능하게 된다.대표적으로 유사,자식선택자 등이 있겠다. CSS3를 복습할겹 예제를 보자

크로스 브라우징

인접이요

  • 자식
  • 나도 자식
  • 막내

위의 html코드에서 인접, 자식선택자로 접근해보자

$('h1 + p').메소드();/*인접선택자*/
$('#parents > li').메소드();/*자식선택자*/

위의 예제에서 첫번째는 h1엘리먼트 다음바로오는 인접한 p엘리먼트를 선택하게될것이고, 두번째는 parents란 아이디의 자식 li를 선택할것이다.

인접,자식선택자가 떠오르지않으면 아래 포스팅 참조

요약하면 jQuery를 이용하여 접근하는 방식의 장점은 두가지이다.

  • 일반적으로 자바스크립트에서 사용했던 getElementByTagName,getElementById 없이 단순하게 $()로 쉽게 접근가능하다
  • 브라우저 버전 종류를 무시하고 css의 대부분의 선택자로 접근가능하다.

마지막으로 예제 페이지http://sianasiatiger.cafe24.com/study.html


설정

트랙백

댓글

CSS 텍스트 그림자 효과 (text-shadow in css3)

CSS 2009. 10. 12. 22:13

CSS 텍스트 그림자 효과(text-shadow in css3)

CSS3에서는 포토샵의 그림자효과 같은 텍스트에 여러 효과를 주는 기능이 추가되었다.추가된 기능들을 보자

텍스트 그림자(Text-shadow)

W3C에 정의 참조

흔히 우리는 포토샵에서 그림자효과로 drop shadow를 사용한다. 텍스트에 그림자를두는 건데 css3로 표현 가능하다.아래와같은 효과 이에대한 코드를 보자(사파리3.0이상,파폭3.1이상,오페라9.5에서 적용된다)

예제를 통해 이그림과 같은 효과를 볼 것이다

Text-shadow

css코드 가로,세로, 번짐효과, 그림자색깔, 이순서다.

p{text-shadow: 2px 2px 1px #000;}

위와 같은 경우 그림자가 가로 2px서로 2px 번짐효과 2px 이렇게일어난다.그리고 색깔은 검정(#000)

좋은예제는 아래두링크


설정

트랙백

댓글

CSS 고급 레이아웃

CSS 2009. 9. 27. 12:06

CSS 고급 레이아웃

레이아웃을 지정하는데 있어 플로트나 포지션을 지정할경우 상당히 귀찮아진다. 마진 패딩을 고려하고 일일이 지정하는것은 참귀찮은 일이다. css3에서는 원하는 모양을 단번에 나올수 있게 쉽게할수 있는 레이아웃모듈이 개발되고 있다. (월드와이드 맵고급레이아웃 모듈 http://www.w3.org/TR/css3-layout/.)

아래그림처럼 레이아웃을 꾸민다고 생각해보자

플로트나 포지션을 이용하면 아래위를 나누고 각각배치할 구역별위치를 지정해야한다. 이걸 단번에 지정하는방법이 개발되고 있다. 예제소스를보자

a
b
c
d
e
f
#box { display: 
          "a b c",
           "d e f "; }/*위그림처럼 display 값의 위치를 지정해준모습 코드*/
div#one{position :a}
/*포지션 값에 지정한 위치의 알파벳을 지정한다*/
div#tow{position :b}
div#three{position :c}
div#four{position :d}
div#five{position :e}
div#six{position :f}

아주 간단하다. 먼저 display에서 모양그대로 "a b c" ," d e f" 해주고 각div의 위치를 a~f까지원하는 위치에 갔다주면된다

앞서말했지만 여전히 문제되는 점은 "아직 개발중" 이라는 점이다.따라서 위와같이 해서는 아직 어떤브라우저에서도 적용되지않는다. 대신 자바스크립트로 위와같이 편하게 지정할 수 있도록 하는 방법이 있긴하다.

먼저 스크립트 almcss_4_6.js 이 필요하고 그다음으로 position 대신에 situated를 사용한다

예제를 보려면 여기서 볼수 있다.

이로서 CSS3에 대해 거의 둘러봤다고 보면 된다 hrml5와 더불어 아직 개발중이니 발전하는대로 올려보겠다.



설정

트랙백

댓글

CSS 다단 레이아웃(css3 column)

CSS 2009. 9. 25. 17:27

CSS 다단 레이아웃

여러레이아웃을 별도로 나누는것은 일일이 지정하기귀찮은 법이다.특히 같은 크기의 레이아웃으로 나눌떄는 귀찮다.다음그림과 같은경우를 보면 이걸 일일이 div태그로 정하고 class 로 이름을 달아주고 나눠줘여한다.코드는 다음과 같다.

첫번째 단입니다.

두번째 단입니다.

세번째 단입니다.

columns이라고 일일이 클래스를 지정해주었다.

#contents{ width:800px;}
#contents div{ float:left; border-right:2px solid #000;}
.columns{ padding:10px; width:200px;}

CSS3 columns 이용

첫번째 단입니다.

두번째 단입니다.

세번째 단입니다.

#colcontents{ 
width:800px;
column-count:3 ;
}

아주간단히 column-count:3 ;로 정하여 단이 나누어진다. 예제를 보려면

여기

그러나 아직까지 이 다단column-count

을 지원하는브라우저는 파이어폭스 뿐이다.그것도 -moz-column으로 지정해야한다.

월드와이드웹에서 column에 대한정보는http://www.w3.org/TR/css3-multicol이다.

column 자세히보기

마지막 column과 그 값은 다음과 같이 정의한다.

div{
columns: 200px 3;
/*단의 길이 , 나눌 갯수*/
column-width:200px;
column-count:3;
column-gap:
column-rule : 1px soild #000;
/*단의 보더의 두깨, 스타일, 색깔*/
column-rule-color:#000;
column-rule-style:soild;
column-rule-width:1px;
}

설정

트랙백

댓글