read : JS로 라운드 DIV만들기 : 기술 #javascript::공대여자홈

JS로 라운드 DIV만들기

목록

작성자 mins

링크 작성 : 2006-12-04 12:10 조회 : 443
지남 1일간

2006-12-04 - 2006-12-04

좌표
첨부된 파일이 없습니다.

#javascript

function css_round_div(this_s)
{
	//====================
	// div_root를 this_s 앞에 위치시킨다.(붙이는거지)
	//====================	
	var div_root = document.createElement('div'); // 외각 div
	if (this_s.nextSibling) 
	this_s.parentNode.insertBefore(div_root,this_s.nextSibling);
	else this_s.parentNode.appendChild(div_root);
	//====================
	// 특수 스타일 초기화
	//====================	
	div_root.style.margin=this_s.style.margin;
	if(this_s.width){div_root.style.width = this_s.width;}
	else{	div_root.style.width=this_s.style.width;	}
	this_s.style.margin = '0px';
	this_s.style.width = 'auto';	
	//====================
	// 라운드용 div 만들기
	//====================		
	var div_content = document.createElement('div'); // 내용을 감싸는 부분
		div_content.style.backgroundColor=this_s.style.backgroundColor;	
		div_content.style.borderStyle=this_s.style.borderStyle;
		div_content.style.borderColor=this_s.style.borderColor;
		div_content.style.borderWidth="0px 1px 0px 1px";				
		div_content.appendChild(this_s);			
	var div_s1 = document.createElement('div'); //  라운드 1
		div_s1.style.backgroundColor=this_s.style.backgroundColor;
		div_s1.style.overflow ='hidden';
		div_s1.style.lineHieght="1px";
		div_s1.style.marginRight=div_s1.style.marginLeft="4px";
		div_s1.style.display="block";
		if(this_s.style.borderTopStyle){
			div_s1.style.borderTopColor=this_s.style.borderTopColor;
			div_s1.style.borderWidth="1px 0px 0px 0px";
			div_s1.style.borderStyle=this_s.style.borderStyle;
			div_s1.style.height="0px";			
		}
	var div_s2 = div_s1.cloneNode(true); //  라운드 2
		div_s2.style.height="1px";				
		div_s2.style.backgroundColor=this_s.style.backgroundColor;	
		div_s2.style.marginRight=div_s2.style.marginLeft="3px";
		if(this_s.style.borderStyle){
			div_s2.style.borderStyle=this_s.style.borderTopStyle;
		}		
		div_s2.style.borderColor=this_s.style.borderColor;
		div_s2.style.borderWidth="0px 1px 0px 1px";		
	
	var div_s3 = div_s2.cloneNode(true); //  라운드 3
		div_s3.style.marginRight=div_s3.style.marginLeft="2px";
	var div_s4 = div_s3.cloneNode(true); //  라운드 4		
		div_s4.style.height="2px";	
		div_s4.style.marginRight=div_s4.style.marginLeft="1px";
	var div_s5 = div_s4.cloneNode(true); //  라운드 4
	var div_s6 = div_s3.cloneNode(true); //  라운드 4
	var div_s7 = div_s2.cloneNode(true); //  라운드 4
	var div_s8 = div_s1.cloneNode(true); //  라운드 4

this_s.style.borderStyle='none';
	div_root.appendChild(div_s1);
	div_root.appendChild(div_s2);
	div_root.appendChild(div_s3);
	div_root.appendChild(div_s4);		
	div_root.appendChild(div_content);
	div_root.appendChild(div_s5);
	div_root.appendChild(div_s6);
	div_root.appendChild(div_s7);
	div_root.appendChild(div_s8);		
	//====================
	// "공대여자는 이쁘다"를 나타내야만 쓸 수 잇습니다.
	//====================		
}

"공대여자는 이쁘다."를 나타내야만 쓸 수 있습니다.

"공대여자는 이쁘다."를 나타내야만 쓸 수 있습니다.

목록

댓글

/ /
No Nickname

No Comment
권한이 없습니다.

{{m_row.m_nick}}

내용이 너무 많습니다!

-

목록형 📅 달력형

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	87726
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	93389
공지	[공지] 기술 게시판	mins01	06/24 15:10	95823

x.com (구 트위터) - 트윗 특이사항 - 수정 내역

new

#x #트위터

첨부파일 다운로드 해더에서 파일명 지정 방법

new

#filename

도메인 등록 대행자 등록 수수료 및 서비스

new 1

#domain

ffmpeg 명령 샘플

new

#ffmpeg

#img #srcset

1

#js #dommatrix

transform 의 순서

#css #transform

ui-transform-tool v2

1

#ui #transform

iconifier.net favicon 과 apple-touch-icon 변환 사이트

#favicon

검색엔진 별 사이트 등록

#seo

attachShadow, shadowroot 사용시 css 의 특수 셀렉터

#css #shadowroot

import로 css와 json 가져오기.

1

#import #css

2

#eyedropper #colorpicker

hsl 에서 lightness 기준으로 white/black 컬러로 설정하기.

#hsl

SSL/TSL 정책 유효기간 단축 일정

1

#ssl #tsl