근데 정작 찾던 position에 관한 내용은 빠자 있..;;;;;

원문 : http://blog.naver.com/beige9?Redirect=Log&logNo=30019116536

CSS스타일 속성모음

 

각 항목을 클릭하시면 새창으로 상세사용법을 보실수 있습니다.

 

 

배경값 설정 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
박스 오른쪽 경계선의 두께 설정 border-right-width
경계선 스타일 지정 border-style
박스 위쪽 경계선의 속성 설정 border-top
박스 위쪽 경계선의 두께 설정 border-top-width
박스 경계선의 두께 설정 border-width
 
이미지나 테스트의 배치 지정 clear C
글자색의 설정 color
 
디스플레이 값의 변경 설정 display D
 
이미지나 택스트의 배치 지정 float F
글꼴 속성 설정 font
글꼴 종류 설정 font-family
글자 크기 설정 font-size
글자 모양 설정 font-style
글꼴의 전환 font-variant
글자 두께 지정 font-weight
 
Element(요소) 높이 설정 height H
 
글자간의 간격 조절 letter-spacing L
각 줄간격 설정 line-height
목록의 스타일 설정 list-style
목록의 이미지 설정 list-style-image
목록의 위치 형태 설정 list-style-position
목록의 형태 설정 list-style-type
 
모든 여백 설정 margin M
맨 아래쪽 여백 설정 margin-bottom
맨 왼쪽 여백 설정 margin-left
맨 오른쪽 여백 설정 margin-right
맨 위쪽 여백 설정 margin-top
 
박스내의 간격 설정 padding P
박스내의 아래쪽 간격 설정 padding-bottom
박스내의 왼쪽 간격 설정 padding-left
박스내의 오른쪽 간격 설정 padding-right
박스내의 위쪽 간격 설정 padding-top
 
수평 정열을 설정 text-align T
텍스트의 효과 조절 text-decoration
텍스트에서 첫번째 줄 들여쓰기 text-indent
문자열의 변환 text-transform
 
수직 정열을 설정 vertical-align V
 
띄어쓰기 부분의 처리 white-space W
Element(요소) 너비 설정 width
단어들 사이의 간격 조절 word-spacing


이런식으로 만들면 웹표준이나 웹 2.0에 가까워 질라나..?
근데 이걸 디자인으로 가독성 있께 코딩하는게.. 지금 실력으론 메롱 스럽..;;;

다음 홈피리뉴얼때 사용해봐야 겠..;;;

  • 갤러리
    • 운영자
    • 게스트
  • 자유게시판
  • 스크랩·스킬
  • 비밀노트
    • Script
      • html
      • css
      • Javascript
      • php
      • ajax
    • 디자인
      • 깔끔
      • 색상
      • 아이콘
      • 플래시
    • 프로그램/유틸리티
    • font
  • 방명록
  • 로그인
    • 아이디 :
    • 비밀번호 :
    • 회원가입



  <ul>
 <li>갤러리<ul>
  <li>운영자</li>
  <li>게스트</li>
 </ul>
 <li>자유게시판</li>
 <li>스크랩·스킬</li>
 <li>비밀노트<ul>
  <li>Script<ul>
   <li>html</li>
   <li>css</li>
   <li>Javascript</li>
   <li>php</li>
   <li>ajax</li>
  </ul>
  <li>디자인<ul>
   <li>깔끔</li>
   <li>색상</li>
   <li>아이콘</li>
   <li>플래시</li>
  </ul>
 </ul><ul>
   <li>프로그램/유틸리티</li>
   <li>font</li>
  </ul>
 <li>방명록</li>
 <li>로그인<ul>
  <li>아이디 : <input type="text" name="uid"></li>
  <li>비밀번호 : <input type="password" name="pass"></li>
  <li><input type="submit" value="로그인"></li>
  <li>회원가입</li>
 </ul>
  </ul>

if(basename($_SERVER['PHP_SELF'])=="해당파일명[index.php]")

슬일이 많은 코드...




그야 말로 알흠답다...
예전에 웹상에 사진을 등록할때 병우형의 기타 연주를 BGM 으로 깔곤했는데.
이런곡을 연주한건 몰랐네...
쵝오~


예전에 짜둔건데 웹표준을 생각해서 다시 손을 본겁니다.
웹상에 이미지를 호출하는 소스를 짤때 일일히 가로,세로 값을 저장하는 불편함을 완화 가기위해 만들어 본거지요.
물런 위즈윅방식(드림위버, 나모웹에디터) 할땐 자동으로 지정 되는것 같아요.

<?
function img($url,$css="",$alt="")
 {
  $imginfo = GetImageSize ($url);
  $ret_data= "<img src=\"".$url."\" ".$imginfo[3]." css=\"".$css."\" border=\"0\" alt=\"".$alt."\" />";
  return $ret_data;
 }
?>
jacklin - 401w

사용자 삽입 이미지401w



사공일더블유(401w)는 병원 입원실 호수 라고 하는군요.
2006년 프렌지 페스티발의 로고송으로도 사용되었던 곡입니다.

원곡은 좀더 빠르고, 살짝쉔~ 곡이라지요.ㅋ




제클린은 전 제니스 멤버이자 저와 절친한 친구 입니다. ㅋ





이것이 과연 내 친구가 만든 음악 이란 말인가.. 안산에 살고 있던 1999년도 쯤 고향 친구로 부터 배달되온 CD 한장...
당시 나역시 기타를 치고, 밴드를 하던 내겐 너무나 부러운 결과물 이였다.

기타 리프가 상당히 맘에드는곡이다, 지금도 운전을 할때 가끔 틀어 놓곤한다.


ZENIS - My Friends


스마티용 플러그인을 손봐서 만들것임.
언샤픈마트크는 이곳에서 좀더 자세히 볼수 있음
미니보드용은 이곳 에서...
<?
 function function_thumb($input, $output, $x, $y, $imgsharpen, $imgcrop)
 {
 $params['file']=$input;
 $_DST['file']=$output;
 $_DST['width']=$x;
 $_DST['height']=$y;
 if($imgcrop)$params['crop'] = 1;
 if($imgsharpen)$params['sharpen'] = 1;
 $temp = getimagesize($params['file']);
 $_SRC['file']  = $params['file'];
 $_SRC['width']  = $temp[0];
 $_SRC['height']  = $temp[1];
 $_SRC['type']  = $temp[2]; // 1=GIF, 2=JPG, 3=PNG, SWF=4
 $_SRC['string']  = $temp[3];
 $_SRC['filename']  = basename($params['file']);
 $_SRC['modified']  = filemtime($params['file']);

 if($params['crop'] and $x and $y)
  {       
  $width_ratio = $_SRC['width']/$_DST['width'];
  $height_ratio = $_SRC['height']/$_DST['height'];
 
  // Es muss an der Breite beschnitten werden
  if ($width_ratio > $height_ratio)
   {
   $_DST['offset_w'] = round(($_SRC['width']-$_DST['width']*$height_ratio)/2);
   $_SRC['width'] = round($_DST['width']*$height_ratio);
   }
  // es muss an der H?e beschnitten werden
  elseif ($width_ratio < $height_ratio)
   {
   $_DST['offset_h'] = round(($_SRC['height']-$_DST['height']*$width_ratio)/2);
   $_SRC['height'] = round($_DST['height']*$width_ratio);
   }
  }
  else {
  $params['longside'] = $_DST['width'];
  $params['shortside'] = $_DST['height'];
  $temp_large=$temp[0]>$temp[1] ? $temp[0] : $temp[1];
 
   //// 큰 쪽을 수정
   if($x and $y){
    if($temp_large>$x){
     $temp_sel = $temp_large==$temp[0] ? "width" : "height" ;
     if($temp_sel=="width"){
      $_DST['width']=$temp[0]>=$x ? $x : $temp[0];
      $_DST['height']=ceil($_DST['width'] * $temp[1] / $temp[0]);
     } else {
      $_DST['height']=$temp[1]>=$x ? $x : $temp[1];
      $_DST['width']=ceil($_DST['height'] * $temp[0] / $temp[1]);
     }
    }
   }
   //// 한쪽이 안정해졌을경우 ( 한쪽에만 맞춤 )
   elseif(!$x || !$y)
   {
    if($x){ // width 를 수치로 고정
     $_DST['width']=$x;
     $_DST['height']=ceil($_DST['width'] * $temp[1] / $temp[0]);
    }
    else{
     $_DST['height']=$y;
     $_DST['width']=ceil($_DST['height'] * $temp[0] / $temp[1]);
    }
   }
   
   //// 양쪽 다 정해졌을 경우
   else{ $_DST['width']=$x; $_DST['height']=$y; }
  }
 if ($_SRC['type'] == 1) $_SRC['image'] = imagecreatefromgif($_SRC['file']);
 if ($_SRC['type'] == 2) $_SRC['image'] = imagecreatefromjpeg($_SRC['file']);
 if ($_SRC['type'] == 3) $_SRC['image'] = imagecreatefrompng($_SRC['file']);
 if (!empty($params['type'])) $_DST['type'] = $params['type'];
 else $_DST['type'] = $_SRC['type'];
 $_DST['image'] = imagecreatetruecolor($_DST['width'], $_DST['height']);
 imagecopyresampled($_DST['image'], $_SRC['image'], 0, 0, $_DST['offset_w'], $_DST['offset_h'], $_DST['width'], $_DST['height'], $_SRC['width'], $_SRC['height']);
 if ($params['sharpen']) $_DST['image'] = UnsharpMask($_DST['image'],60,0.5,3);

 if(@imagetypes() & IMG_PNG) @ImagePNG($_DST['image'],$output);
      else @ImageJPEG($_DST['image'],$output);
      @chmod($output,0606);
 imagedestroy($_DST['image']);
 imagedestroy($_SRC['image']);
 return file_exists($output);
}

function UnsharpMask($img, $amount, $radius, $threshold)    { 
////////////////////////////////////////////////////////////////////////////////////////////////  
////  
////                  Unsharp Mask for PHP - version 2.1  
////  
////    Unsharp mask algorithm by Torstein Hønsi 2003-06.  
////             thoensi_at_netcom_dot_no.  
////               Please leave this notice.  
////  
///////////////////////////////////////////////////////////////////////////////////////////////  
 
    // $img is an image that is already created within php using 
    // imgcreatetruecolor. No url! $img must be a truecolor image. 
    // Attempt to calibrate the parameters to Photoshop: 
    if ($amount > 500)    $amount = 500; 
    $amount = $amount * 0.016; 
    if ($radius > 50)    $radius = 50; 
    $radius = $radius * 2; 
    if ($threshold > 255)    $threshold = 255; 
     
    $radius = abs(round($radius));     // Only integers make sense. 
    if ($radius == 0) { 
        return $img; imagedestroy($img); break;        } 
    $w = imagesx($img); $h = imagesy($img); 
    $imgCanvas = imagecreatetruecolor($w, $h); 
    $imgBlur = imagecreatetruecolor($w, $h); 
     
    // Gaussian blur matrix: 
    //                         
    //    1    2    1         
    //    2    4    2         
    //    1    2    1         
    //                         
    ////////////////////////////////////////////////// 
         
    if (function_exists('imageconvolution')) { // PHP >= 5.1  
            $matrix = array(  
            array( 1, 2, 1 ),  
            array( 2, 4, 2 ),  
            array( 1, 2, 1 )  
        );  
        imagecopy ($imgBlur, $img, 0, 0, 0, 0, $w, $h); 
        imageconvolution($imgBlur, $matrix, 16, 0);  
    }  
    else {  
    // Move copies of the image around one pixel at the time and merge them with weight 
    // according to the matrix. The same matrix is simply repeated for higher radii. 
        for ($i = 0; $i < $radius; $i++)    { 
            imagecopy ($imgBlur, $img, 0, 0, 1, 0, $w - 1, $h); // left 
            imagecopymerge ($imgBlur, $img, 1, 0, 0, 0, $w, $h, 50); // right 
            imagecopymerge ($imgBlur, $img, 0, 0, 0, 0, $w, $h, 50); // center 
            imagecopy ($imgCanvas, $imgBlur, 0, 0, 0, 0, $w, $h); 
            imagecopymerge ($imgBlur, $imgCanvas, 0, 0, 0, 1, $w, $h - 1, 33.33333 ); // up 
            imagecopymerge ($imgBlur, $imgCanvas, 0, 1, 0, 0, $w, $h, 25); // down 
        } 
    } 
    if($threshold>0){ 
        // Calculate the difference between the blurred pixels and the original 
        // and set the pixels 
        for ($x = 0; $x < $w; $x++)    { // each row 
            for ($y = 0; $y < $h; $y++)    { // each pixel 
                     
                $rgbOrig = ImageColorAt($img, $x, $y); 
                $rOrig = (($rgbOrig >> 16) & 0xFF); 
                $gOrig = (($rgbOrig >> 8) & 0xFF); 
                $bOrig = ($rgbOrig & 0xFF); 
                 
                $rgbBlur = ImageColorAt($imgBlur, $x, $y); 
                 
                $rBlur = (($rgbBlur >> 16) & 0xFF); 
                $gBlur = (($rgbBlur >> 8) & 0xFF); 
                $bBlur = ($rgbBlur & 0xFF); 
                 
                // When the masked pixels differ less from the original 
                // than the threshold specifies, they are set to their original value. 
                $rNew = (abs($rOrig - $rBlur) >= $threshold)  
                    ? max(0, min(255, ($amount * ($rOrig - $rBlur)) + $rOrig))  
                    : $rOrig; 
                $gNew = (abs($gOrig - $gBlur) >= $threshold)  
                    ? max(0, min(255, ($amount * ($gOrig - $gBlur)) + $gOrig))  
                    : $gOrig; 
                $bNew = (abs($bOrig - $bBlur) >= $threshold)  
                    ? max(0, min(255, ($amount * ($bOrig - $bBlur)) + $bOrig))  
                    : $bOrig; 
                 
                 
                             
                if (($rOrig != $rNew) || ($gOrig != $gNew) || ($bOrig != $bNew)) { 
                        $pixCol = ImageColorAllocate($img, $rNew, $gNew, $bNew); 
                        ImageSetPixel($img, $x, $y, $pixCol); 
                    } 
            } 
        } 
    } 
    else{ 
        for ($x = 0; $x < $w; $x++)    { // each row 
            for ($y = 0; $y < $h; $y++)    { // each pixel 
                $rgbOrig = ImageColorAt($img, $x, $y); 
                $rOrig = (($rgbOrig >> 16) & 0xFF); 
                $gOrig = (($rgbOrig >> 8) & 0xFF); 
                $bOrig = ($rgbOrig & 0xFF); 
                 
                $rgbBlur = ImageColorAt($imgBlur, $x, $y); 
                 
                $rBlur = (($rgbBlur >> 16) & 0xFF); 
                $gBlur = (($rgbBlur >> 8) & 0xFF); 
                $bBlur = ($rgbBlur & 0xFF); 
                 
                $rNew = ($amount * ($rOrig - $rBlur)) + $rOrig; 
                    if($rNew>255){$rNew=255;} 
                    elseif($rNew<0){$rNew=0;} 
                $gNew = ($amount * ($gOrig - $gBlur)) + $gOrig; 
                    if($gNew>255){$gNew=255;} 
                    elseif($gNew<0){$gNew=0;} 
                $bNew = ($amount * ($bOrig - $bBlur)) + $bOrig; 
                    if($bNew>255){$bNew=255;} 
                    elseif($bNew<0){$bNew=0;} 
                $rgbNew = ($rNew << 16) + ($gNew <<8) + $bNew; 
                    ImageSetPixel($img, $x, $y, $rgbNew); 
            } 
        } 
    } 
    imagedestroy($imgCanvas); 
    imagedestroy($imgBlur); 
     
    return $img; 
}
?>

+ Recent posts