" " : 공백(스페이스 한 칸)을 의미.
띄어쓰기를 할 때는 키보드의 스페이스키(가장 길쭉한 키)를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입합니다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없습니다. 공백을 아무리 많이 삽입해도 공백 1개로 간주됩니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을   이렇게 표현해 줍니다. 그러면 브라우저가   기호를 빈 칸으로 표시해 줍니다.

예제:

aaa    bbb


이렇게 aaa와 bbb 사이에 공백을 4칸 넣어줄 때에는

aaa    bbb


이렇게 합니다. 진짜 공백과   기호를 번갈아서 쓰면 됩니다.




& l t ;


부등호(<)
괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호입니다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없습니다. (물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있습니다.) 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문입니다.

제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때,

<h1>제목이 <여기에> 표시됩니다</h1>

라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버립니다. <여기에> 라는 태그는 없기에 이것은 오류입니다.

따라서 < 기호를, < 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현됩니다.



& g t;


부등호(>)
위의 경우와 같습니다. 닫는 괄호 또는, "무엇에 비해 크다(Greater Than)"는 뜻.




&amp;


앰퍼샌드(&) 기호는, 위의 경우들에서 보는 것과 같이 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를,&amp; 이렇게 표기해 주어야 합니다.



&quot;


이것은 쌍따옴표(") 하나를 표현하는 것입니다.

<a href="http://www.google.co.kr/">구글 "검색" 홈페이지</a>

가량 이런 링크가 있다고 할 때, 링크를 표현하는 <a> 태그 안에 속성을 나타내기 위해 href="" 이 부분에서 쌍따옴표가 사용되었습니다. 그런데 <a> 태그 안에 자바스크립트를 집어넣을 때, 자바스크립트의 쌍따옴표들이 태그 속성의 쌍따옴표와 겹쳐져 서로 충돌할 수 있습니다. 이때는 아주 심각한 에러가 납니다. 그럴 경우에는 자바스크립트 안의 쌍따옴표들을 &quot; 이렇게 표현하면 해결됩니다.

그러나 링크 제목 안에서는 구글 "검색" 홈페이지 이렇게 따옴표를 사용해도 괜찮습니다. 자바스크립트가 아닌 평범한 문자열에서는 쌍따옴표든 홑따옴표든 따옴표를 따옴표 그대로 사용하면 되고 굳이 &quot; 이렇게 바꾸지 않아도 됩니다.

요약하자면, &quot; 는, 태그 내부의, 쌍따옴표로 둘러싸인 곳 안에서 다시 쌍따옴표를 사용할 때 필요한 것입니다.

즉 &quot; 는 따옴표 충돌의 문제가 있을 때에만 사용하고 보통의 경우에는 사용하지 않습니다.





튜브 동영상을 게시판 같은 곳에 밀어넣으면,기본적으로는 플레이버튼을 눌러야만 플레이가 되도록 되어있는데요,이거를 그냥 페이지 로딩시 자동으로 재생되게끔 하고 싶으시다면 아래와 같은 방법을 이용해보세요유투브 동영상 공유탭에서 옛날소스 사용하기를 클릭하면 아이프레임이 아니라 엠베드 테그로 바뀝니다....유튜브 동영상의 다음과 같은 Embed 소스중에서<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/-d2aksz2HzI"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/-d2aksz2HzI" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">아래 그림의 노랗게 칠해진 부분처럼 &autoplay=1 를 추가해주시면"<"object width="425" height="355">아래와 같이 자동으로 실행되는 유튜브 동영상을 집어넣을 수 있ㅇㅓ요 




 



<?php 
$sns_url = googl_short_url('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); 
?> 

<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo $sns_url ?>&p[title]=<?php echo $title ?>" target="_blank" />버튼위치</a> 

제목과 현재페이지 짧은주소 공유하기






http://blog.naver.com/OpenPostWriteForm.nhn?preContents={원글 내용}&preContentsTitle={원글 제목}&preContentsUrl={원글 주소} 

list.skin.php나 view.skin.php에서 위 형식에 맞게 수정하여 링크를 걸어서 사용하면 됨...





mouse.html




<html> 

<head> 
<title>Untitled</title> 
</head> 
<body> 
<DIV ID=BODY_CONTENTS> 
<div style="width:580; padding: 0; overflow:hidden; word-break:break-all; font-size:16px"> 
<HTML><body> 
<P align=center><img onClick="javascript:BigImage_View(this);" style="cursor:hand" ondragstart="return false" oncontextmenu="alert('이 이미지는 저작권법에 의해 함부로 퍼가실수 없습니다. 만약에 함부로 퍼가시면 처벌받으실수 있습니다.');return false"  alt=positive hspace=0 src="http://www.etorrent.co.kr/data/mw.cheditor/131221/5ee51cad746b00d95f6b7da58a677253_1zG7dEJb73nl6Oq1SnV.gif" border=0><BR><BR> 
<FONT size=2><STRONG>이미지 오른쪽클릭시 경고글 띄우기<BR></STRONG></FONT></P> 
</body></HTML> 
</div> 
</DIV> 
</body> 
</html>





html { 
scrollbar-base-color: #000;  
scrollbar-face-color: #aaa;  
scrollbar-track-color: #aaa;  
scrollbar-highlight-color: #eee;  
scrollbar-3dlight-color: #aaa;  
scrollbar-shadow-color: #888;  
scrollbar-darkshadow-color: #666;  
scrollbar-arrow-color: #333;  


http://criticize.tistory.com/175 참고하시구요.





::selection { 
    background:#99CC00; 
    color: #FFF; 
    text-shadow: none; 

::-moz-selection { 
    background:#99CC00; 
    color: #FFF; 
    text-shadow: none; 

::-webkit-selection { 
    background:#99CC00; 
    color: #FFF; 
    text-shadow: none; 
}






가장 간단하면서도 훌륭한 방법 : CSS3를 이용한 방법 

  

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;} 

  

지원브라우저 

Safari 3+ 
Chrome Whatever+ 
IE 9+ 
Opera 10+ (Opera 9.5 supported background-size but not the keywords) 
Firefox 3.6+ 
  

애석하게도 IE9 밑으로는 반쪽짜리 코딩이다. 
해보면 알겠지만, 배경이미지 사이즈가 100% 되긴하는데, 브라우저 창의 크기에 따라 이미지가 작아지거나 커지지 않는다. 웹표준에 맞춘 브라우저들은 모두 잘 돌아간다. 

CSS를 이용하거나  jQuery 를 이용한 더 진화된 방법을 소개하는 곳이 있으니 다른 방법을 보시려면 아래 링크를 보시면 됩니다. 

http://css-tricks.com/perfect-full-page-background-image/






'웹 퍼블리싱 > Css' 카테고리의 다른 글

css 아키텍쳐 구성하기  (0) 2024.03.11
CSS 구글웹폰트 사용하기  (0) 2015.07.17
CSS에 대해 잘 알려져있지 않은 12가지 사실  (0) 2015.07.16

파일 업로드시 php 나 html 등 위험한 파일은 보통 제한하게 됩니다. 그래서 다양한 방법으로 허용가능 파일인지 체크 스크립트를 작성해 주는데, 문제는 잘못된 체크방법으로 개발자도 모르는 우회하여 파일을 업로드됩니다. 

예제 (ex #1 
 <?php  
 $filename = "test.php."; 
 $ext = array_pop(explode(".", strtolower($filename))); 

 if(@ereg($ext, "php|php3|php4|htm|inc|html")){ 
        echo "죄송합니다. php, html 파일은 업로드가 제한됩니다."; 
 } 
 ?> 

아무 문제가 없어 보이지만, 실은 php. 나 htm. gif. 등 모두 실행 가능한 파일임을 알아 둘 필요가 있습니다. 그러므로 다음 같이 한번더 체크해서 공격자가 우회하지 못하게 해주는게 좋습니다. 

예제 (ex #2 
 <?php  
 $filename = "test.gif.bmp.php."; 
 $ext = explode(".", strtolower($filename)); 

 $cnt = count($ext)-1; 
 if($ext[$cnt] === ""){ 
    if(@ereg($ext[$cnt-1], "php|php3|php4|htm|inc|html")){ 
        echo "죄송합니다. php, html 파일은 업로드가 제한됩니다."; 
    } 
 } else if(@ereg($ext[$cnt], "php|php3|php4|htm|inc|html")){ 
        echo "죄송합니다. php, html 파일은 업로드가 제한됩니다."; 
 } 
 ?>





'웹 퍼블리싱 > PHP' 카테고리의 다른 글

php 여분필드 문자열 자르기 태그  (0) 2018.08.13

div, span 등 태그에서는 수직 중앙 정렬이 안되죠 

vertical-align : middle 
이것이 정상적으로 인식 하지 않아요 

하지만 불가능하지 않아요.. 

<div style='display:table-col;vertical-align:middle;width:400px;height:400px;'>중앙</div> 

이렇게 하면 수직 정렬이 가능해요. 

수평 정렬은 당연 text-align으로 하면 되죠. 

이 둘을 이용하면 정중앙에 배치를 할 수 있어요 




다른방법 

table-col 보다 코드가 더 추가 되지만 , 

잘 몰라서 네이버 검색하고 뭐하고 등등 고민하지 말고 그냥 쓰시면 되요 

<div style="width:400px;height:400px;border:1px solid #ddd;"> 
      <table border=0 cellpadding=0 cellspacing=0 width=100% height=100%> 
          <tr><td align=center valign=center>중앙정렬</td></tr> 
    </table> 
</div> 

작업 할 시간도 부족한데...  이곳 저곳 찾아다니지 말고 그냥 이걸 이용해서 중앙 정렬 하면 되겠네요.






+ Recent posts