<? phpinfo();?>
홈페이지에 설치된 정보를 보기 위해서는 이 한줄만 있으면 된다.
정보를 알 수 있어 좋지만 노출되면 보안 문제가 발생할 수도 있다.
| [PHP] 설문조사 종료날짜 체크 (0) | 2015.05.27 |
|---|---|
| [PHP] 쿠키와 세션, 그리고 보안 (0) | 2015.05.27 |
| PHP 기본 함수 (0) | 2015.03.07 |
| [PHP] 한글자르기 substr (0) | 2015.01.04 |
| IP 체크 (0) | 2014.05.18 |
Link2Me
PHP 에서 폴더(디렉토리)내에 특정 파일만 지우는 걸 해야 할 일이 있어서
인터넷 검색하여 여러자료를 토대로 원하는 내용을 만들어서 테스트를 해보고 개념을 잡았다.
if($fileExt == 'csv') 에서 처리할 사항이 있어서 테스트 해봤는데 파일 다루는데 많은 도움이 되었다.
리눅스 명령어 `rm -rf 디렉토리명`;
리눅스 명령어 `rm -rf 파일명`; // `는 키보드 상의 왼쪽 위 물결(~)키와 함께 있는 기호
을 PHP 코드에 넣어서 파일을 실행해보니 권한이 없는 것도 그냥 지워버린다.
파일의 소유권자가 root 인 경우에는 @chmod($_tempdfile,0707); 로 파일의 모드 변경을 시도해도 웹은 사용자이므로 권한 변경이 안된다. Owner 를 apache 로 변경해줘야만 변경이 된다.
아래 코드에서 가장 핵심적인 사항은 unlink 는 파일을 지우는 함수인데, unlink(파일명) 이렇게 하면 안되고
unlink(경로+파일명) 으로 해야 지워진다.
파일을 읽어서 프로세스를 처리하고 나서 파일을 지울 때는 읽어드린 파일명과 경로를 포함해서 unlink 하면 바로 바로 지워지므로 서버에 불필요한 자료가 남지 않는다.
<?php
// 파일의 크기 구하기
foreach (glob("*.csv") as $filename) {
echo "$filename size " . filesize($filename) . "\n";
echo "<br />";
}
echo "<br />";
// 폴더내 파일 전부 구하기
echo "<br />";
$dir = './';
$files = scandir($dir);
foreach ($files as $ind_file) {
if (is_file($ind_file)) {
?>
<li><?php echo $ind_file;?> </li>
<?php
}
}
// 디렉토리에 있는 파일과 디렉토리의 갯수 구하기
$path = opendir("./"); // opendir 함수를 이용해서 현재 디렉토리의 핸들을 얻어옴
// readdir함수를 이용해서 현재 디렉토리에 있는 디렉토리와 파일들의 이름을 배열로 읽어들임
while($file=readdir($path)) {
if($file=="."||$file=="..") continue; // file명이 ".", ".." 이면 무시함
$fileInfo = pathinfo($file);
print_r($fileInfo); // 파일 경로 정보가 어떻게 되는지 확인하기 위해 출력
echo "<br />";
$fileExt = $fileInfo['extension']; // 파일의 확장자를 구함
if (empty($fileExt)){
$dir_count++; // 파일에 확장자가 없으면 디렉토리로 판단하여 dir_count를 증가시킴
} elseif($fileExt == 'csv') {
$csv_count++; // 파일 확장자가 CSV 이면 csv_count를 증가시킴
$_tmpdfile = $path.$file;
@chmod($_tempdfile,0707); // 파일의 소유권이 있는 경우에만 권한변경
$cmd = `rm -rf *.csv`; // 파일의 소유권에 상관없이 파일 모두 삭제처리
if(is_writable($_tmpdfile)) {
unlink($_tmpdfile);
echo "파일 삭제됨"."<br />";
} else {
echo "파일 쓰기(삭제) 권한 없음"."<br />";
}
} else {
$file_count++; // 파일에 확장자가 있으면 file_count를 증가시킴
}
}
@closedir($path);
echo "<br />";
echo "subfolder 수는 : ".$dir_count."<br />";
echo "CSV 파일의 갯수는 : ".$csv_count."<br />";
echo "파일의 갯수는 : ".$file_count;
echo "<br />";
// 폴더내 파일 전부 구하기
echo "<br />";
$dir = './';
$files = scandir($dir);
foreach ($files as $ind_file) {
if (is_file($ind_file)) {
?>
<li><?php echo $ind_file;?></li>
<?php
}
}
?>
| PHP 파일 읽어서 2중 배열 처리 (0) | 2016.03.27 |
|---|---|
| [PHP] while 문을 이용한 파일 읽기 (0) | 2015.04.29 |
| [PHP] 파일 삭제 (0) | 2015.03.21 |
| [PHP응용] DB 내용을 화면에 출력(이중 for 문) (0) | 2014.12.02 |
| [PHP응용] MySQL DB 중복여부 검사하여 없는 것만 추가 (0) | 2014.09.09 |
Link2Me
인터넷 검색해서 겨우 겨우 제대로 된 방법을 알아냈다. 인터넷의 좋은 점은 자료가 널려 있다는 것이고 단점은 제대로 된 자료를 찾기가 정말 어렵다는 점이다.
나는 인터넷에서 찾아낸 것을 테스트를 해서 결과를 확인해보고 정리를 하는 편이다.
에러 메시지 출력을 검사할 때는 반드시 잘 동작하는 파일을 기준으로 검사를 먼저 해본 다음에 에러가 발생하는 파일에 적용하는 것이 필요하다.
홈페이지 계정 root 폴더에 존재하는 .htaccess 에 하단 내용을 추가하면 에러메시지가 화면에 출력됨
# vi .htaccess 한 다음에 아래 2줄을 넣어줌.
form post 로 값을 넘긴 특정한 파일만 검색하는 경우에는 아래 자바스크립트를 넣어서 코드 한줄 한줄 찍어가면서 분석한다. 왜냐하면 form post 로 넘기면 값을 확인하기가 쉽지 않기 때문이다.
echo "<script>alert('$content')</script>";
찍어보고 싶은 변수를 지정하면서 값이 넘어오는지 넘어오지 않는지 확인한다.
코드가 간단한 경우에는 크롬브라우저 개발자 모드로 확인하면 헤더정보, Response 정보 등을 확인할 수 있는데 이런 걸로 분석이 어렵게 만들어진 프레임웍이 있을 수도 있기 때문이다.
코드를 공통 함수에 넣어서 사용한다면 아래처럼 해당 파일에 한줄 넣어주면 된다.
include_once $g['path_core'].'function/string.func.php';
// PHP 디버깅시 사용할 함수
function Err($str)
{
echo("<script> alert('".$str."');</script>");
}
| [ajax 에러] JSON.parse: unexpected character at line 1 column 1 of the JSON data (0) | 2017.02.18 |
|---|---|
| PHP 디버깅 요령 및 경고메시지 처리 방법 (2) | 2016.11.30 |
| Undefined index 에러 해결방법 (0) | 2016.09.10 |
| 비정상 접속 체크 (0) | 2016.05.04 |
| PHP alert 창 띄우기 (0) | 2016.04.10 |
Link2Me
자바스크립트에서 사용되는 API 이다.
함수 |
설 명 |
getElementById( ) |
특정 id 속성값에 해당하는 요소를 반환 |
getElementsByName( ) |
특정 name 속성값에 해당하는 요소를 반환 |
getElementsByTagName( ) |
특정 태그 이름과 일치하는 모든 요소를 반환 |
getElementsByTagNameNS() |
태그의 name 속성의 값과 일치하는 모든 요소를 반환 |
querySelector() |
페이지내에서 특정 선택자 규칙과 일치하는 첫 번째 요소를 반환 |
querySelectorAll() |
특정 선택자 규칙 또는 여러 규칙과 일치하는 모든 요소를 반환 |
Selector API를 이용해 DOM 트리로부터 HTML DOM 객체를 가져오기 위해서는 자바스크립트 코드 실행이 HTML 문서가 파싱된 다음 실행되어야 함
HTML 문서가 파싱되기 전에 자바스크립트 코드가 실행되면 Selector API로 HTML DOM 객체를 DOM Tree 에서 찾지 못함
자바스크립트 코드가 HTML 파싱이 완료된 다음 실행되게 하기 위해서는 ....
1. 자바스크립트 코드를 외부 파일로 작성했을 경우 defer 속성을 부여함
<script src="xxx.js" defer></script>
2. HTML 문서 본문의 맨 아래 <script>코드를 이용하여 자바스크립트 코드를 작성함
3. <script>요소를 이용해 자바스크립트 코드를 <head>요소에 포함시킬 수 있는데
onload 이벤트를 이용하여 페이지가 로드된 다음 자바스크립트 코드가 실행되도록 함
| [자바스크립트] 체크박스 개수 카운트하기 (0) | 2015.05.29 |
|---|---|
| [자바스크립트] getElementsByName 사용하여 체크박스 checked 구하기 (0) | 2015.05.28 |
| jQuery 개념 이해 ★★★★ (0) | 2015.04.01 |
| 이클립스를 사용하여 HTML5, JSP 코드 연습 (0) | 2015.03.27 |
| 자바스크립트 비교 연산자 및 논리연산자 (0) | 2015.03.25 |
Link2Me
PHP 에서 검색어를 여러개 입력하여 AND 조건이나 OR 조건을 검색해야 하는 경우가 있다.
검색어가 여러개면 보통 이렇게 검색어 처리를 하기 쉽다.
$keystr = explode(" ", $keyword);
$sqlque .= " and (eng LIKE '%".trim($keystr[0])."%')";
이걸 좀더 깔끔하기 처리하는 방법은 아래처럼 array 와 join 함수를 이용하는 것이다.
$keystr = explode(" ", $keyword);
$exp_query = array();
for ($i = 0; $i < count($keystr) ; $i++) {
array_push($exp_query, "eng LIKE '%".$keystr[$i]."%'" );
}
if(count($exp_query) > 0){
$sqlque .= " and ( ";
$sqlque .= join(" and ", $exp_query);
$sqlque .= " ) ";
}
echo $sqlque; // 쿼리문이 정상인지 확인
| [jQuery] 테이블 게시물 순서 바꾸기 (DB 저장처리) (0) | 2016.07.09 |
|---|---|
| PHP urlencode() (0) | 2016.03.27 |
| [PHP기초] <textarea> 엔터키 처리, 싱글 쿼테이션(') 처리 (0) | 2016.03.25 |
| [PHP] 검색폼의 결과를 자바스크립트로 제어 (0) | 2015.05.10 |
| addslashes 함수의 필요성 (0) | 2014.09.09 |
Link2Me
KIMSQ RB
list01 게시판 테마로 예를 들어..
| 킴스큐 RB 2.0 설치 (0) | 2015.05.28 |
|---|---|
| 파일 내용 검색 쉽게 하는 방법 (0) | 2015.05.19 |
| 킴스큐 함수 (0) | 2015.03.01 |
| 최고관리자 비밀번호 변경 (0) | 2014.08.14 |
| 글 등록자만 수정버튼 보이게 하기 (0) | 2014.07.19 |
Link2Me
jQuery 는 DOM과 관련된 처리, 일관된 이벤트 연결, 애니메이션(시각적효과), AJAX Application 개발 등을 손쉽게 할 수 있는 강력한 기능을 가진 일종의 자바스크립트 라이브러리다. 즉, jQuery는 크로스브라우징(모든 브라우저에서 동작하는) 클라이언트 사이드의 자바스크립트 라이브러리이다.
jQuery는 사용법이 간단하고, 코딩이 직관적이며, 성능도 뛰어나다.
DOM(Document Object Model)은 웹문서에서 HTML의 문서 요소를 제어하기 위한 문법적인 구조로 W3C에서는 DOM의 표준 규격을 제시했다.
- DOM은 document(문서), object(객체), model(모델)을 의미하는 용어로서 문서는 HTML을 의미한다.
- 객체는 자바스크립트에서 HTML문서전체에 존재하는 요소들을 객체로 인식한다는 의미이다.
- 이 객체는 DOM형식에 있어 노드(node)라는 개념으로 전환되며 element, text, attribute등의 노드가 존재하게 된다
- Text node
. HTML 웹 문서의 실제 내용을 의미하게 된다.
. TEXT node는 반드시 element node 안에 포함되어 있어야 한다.
그러나 TEXT node가 element node 를 포함하거나 attribute node를 소유할 수는 없다.
- Attribute node
. 모든 attribute node는 <html> 태그 내에 포함 된다.
. attribute node는 (속성,값)의 한쌍으로 표현된다.
. attribute node는 element node 안에 포함되며, element node 를 포함 시킬 수 없다
- javascript코드는 노드에 접근하기 위해 getElementById, getElementByTagName등의 메소드를 이용한다.
. getElementById : 특정 아이디를 가지고 있는 태그에 접근한다.
. getElementByTagName : 특정 태그에 접근한다
. getAttribute : 원하는 태그의 속성을 가져온다
. setAttribute : 원하는 태그의 속성의 값을 설정한다.
jQuery 에는 자바스크립트에서 볼 수 없는 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다.
var h1 = document.getElementById("hello");
를 jQuery 로 하면
var h1 = $("#hello");
로 간단해진다.
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
$("#셀렉터") = document.getelementbyid("셀렉터") |
jQuery 를 사용하는 방법은
1. 라이브러리 파일을 다운로드 받아서 직접 연결하여 사용하는 방법
2. CDN을 이용하는 방법
http://code.jquery.com/jquery-latest.js 를 사용하면 가장 최신 버전으로 자동 연결된다.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
구글 CDN 이용 방법
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
$(selector).action(function() { 소스코드} ); // 내가 원하는 다른 명령을 넣어 함수를 고치고 싶을 때
$(document).ready(function() {
$("#myclick").click(function() {
$("myclick").html("눌렀어요");
});
});
브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 한다.
이벤트가 발생했을 때 자바스크립트/jQuery 실행문을 실행하는 것을 이벤트 핸들러라고 한다.
이벤트는 마우스 이벤트, 키보드 이벤트, 기타 이벤트로 구분할 수 있다.
선택자에 document 가 오면 html 문서 전체가 선택된다.
자바스크립트 또는 jQuery 의 위치가 <head> </head> 사이에 위치한다.
jQuery 는 인터프리터 언어이기 때문에 jQuery가 먼저 실행되고 난 후 <body> 영역에 문서 객체가 로딩된다.
이렇게 되면 선택자가 먼저 실행되어 문서 객체를 선택할 수 없다.
<body> 객체 영역에 문서 객체가 먼저 로딩된 후 jQuery 선택자가 선택되게 하려고 $(document).ready(function(){ 코드 } 또는 간략하게 $(function(){ 코드} 방법을 사용한다.
id 선택자가 #myclick 인 a 엘리먼트가 사용자에 의해 클릭되었을 때 실행된다.
클릭이 되면 $("myclick").html("눌렀어요"); 를 통해서 a 엘리먼트의 내용을 "눌렀어요"로 바꾸게 된다.
.attr()은 attribute 정보를 가져오고,
.prop()는 property 정보를 가져온다.
attrubute는 HTML Element 의 속성들을 의미하며
property는 자바스크립트의 프로퍼티를 의미한다.
$("#menu li") 는 #menu 안에 있는 모든(child & descendant) li를 가리키고
$("#menu > li") 는 #menu 바로 아래의 li만 가리킨다. 즉 $("parent > child") 관계에 해당되는 li 가 5개라면 5개가 해당되고 자손(descendant) 요소는 해당되지 않는다.
※ $("기준요소 > 자식요소") ← 선택한 기준 요소를 기준으로 자식(child) 관계에 지정한 요소만 선택한다.
$("기준요소 하위요소") ← 선택한 기준요소를 기준으로 자식(child), 자손(descendant) 해당되는 요소를 선택한다.
$("div + p").css("background-color", "#82fcc1");
의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 바로 다음에 나오는 태그만 배경색을 변경하라.
$("div ~ p").css("background-color", "#82defc");
의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 태그 이후에 나오는 모든 태그의 배경색을 변경하라.
div 태그 이전에 나오는 p 태그는 해당되지 않는다.
div 태그의 child, descendant 태그는 해당되지 않는다.
$("[attribute]") : [attribute(속성)] selector는 각 selector의 특정 속성을 선택한다.
- [attribute=value] : 특정 속성과 값을 가진 각 element를 선택한다.
- [attribute!=value] : 특정 속성과 속성 값을 안 가진 element를 선택한다.
- [attribute$=value] : 특정 문자값으로 끝나는 selector를 선택한다.
- [attribute|=value] : 특정문자로 시작하는 속성과 속성 값을 설정한다.
- [attribute^=value] : 특정 속성이 특정 속성 값으로 시작하는 값을 갖는 selector을 설정한다.
- [attribute~=value] : 특정 속성이 특정 속성 값을 포함하는 selector를 설정한다.
- [attribute*=value] : 특정 속성이 특정 값의 일부분(문자열)을 포함하는 selector를 선택한다.
$("셀렉터").html() |
셀렉터 태그내에 존재하는 자식태그을 통째(html + text)로 읽어올때 |
$("셀렉터").text() |
셀렉터 태그내에 존재하는 자식태그들 중에 문자열(text)만 출력하고자 할때 |
$("셀렉터").val() |
INPUT 태그에 정의된 value 속성의 값을 확인하고자 할때 |
$("태그[속성명=속성값]") |
<input type="checkbox" value="1" /> var checkbox_val = $("input[type=checkbox]").val(); |
<input type="text" id="txt" value="2" /> | |
| $(":input태그의type명") | <input type="checkbox" value="1" /> var checkbox_val = $(":checkbox").val(); |
<input type="text" value="2" /> | |
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "http"로 시작하는 <a> 태그를 선택
$("li a[href^='http']").css({color:"#f90"});
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "com/"으로 끝나는 <a> 태그를 선택
$("li a[href$='com/']").css({color:"#f90"});
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "5"가 포함되어 있는 <a> 태그를 선택
$("[href*='5']").css({color:"#f90"});
<img> 태그의 src 속성이 "images/sample1.jpg"와 일치하지 않는 이미지 태그를 선택
$("img[src='images/sample1.jpg']").css({border:"1px solid #f90"});
$("img[src!='images/sample1.jpg']").css({border:"1px solid #f90"});
<li> 태그 안에 있는 <a> 태그의 class 속성이 있는 모든 태그를 선택
$("li a[class]").css({color:"#f90"});
기본 필터 선택자 : filter 선택자에 사용되는 형식은 filter 선택자 앞에 :(클론)을 붙여 표현한다. - $("li:eq(6)").css({"background-color":"#666", color:"#fff"}); // li 항목 중에서 index가 6인 <li> 태그 선택 - $("li:gt(6)").css({"background-color":"#666", color:"#fff"}); // index가 6 뒤에 있는<li> 태그 모두 선택 - $("li:lt(6)").css({"background-color":"#666", color:"#fff"}); // index가 6 앞에 있는 <li> 태그들을 모두 선택 - $("li:first, li:last").css({"background-color":"#666", color:"#fff"}); // <li> 태그 중 처음과 마지막 노드 선택 - $("li:not(:eq(6))").css({"background-color":"#666", color:"#fff"}); // <li> 태그 중 index가 6인 것을 제외한 나머지를 선택 |
보다 상세한 Selector 속성은 https://www.w3schools.com/jquery/jquery_ref_selectors.asp 참조
// 스크롤 따라다니는 박스 div jquery
var currentPosition = parseInt($("#sidebox").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop();
$("#sidebox").stop().animate({"top":position+currentPosition+"px"},1000);
});
// 롤오버(rollover) 이미지
<script type="text/javascript">
$(function() {
$("img[src='images/aaa.jpg']").hover(function() {
$(this).attr("src", "images/aaa_on.jpg"); // 변경할 이미지
}, function() {
$(this).attr("src", "images/aaa.jpg"); // 원래 이미지
});
$("img[src='images/bbb.jpg']").hover(function() {
$(this).attr("src", "images/bbb_on.jpg");
}, function() {
$(this).attr("src", "images/bbb.jpg");
});
});
</script>
<script type="text/javascript">
$(function() {
// :eq(n)은 특정 셀렉터가 여러개의 복수 요소를 지정할 경우
$("#box > input:eq(0)").click(function() { //첫 번째 input 버튼을 누른 경우
$("#box > div").toggle(300); // slideToggle(300); fadeToggle(300);
});
$("#box > input:eq(1)").click(function() {
$("#box > div").show(200); // slideDown(200); fadeIn(200);
});
$("#box > input:eq(2)").click(function() {
$("#box > div").hide(200); // slideUp(200); fadeOut(200);
});
});
</script>
도움될 사이트 : http://hellogk.tistory.com/
| [자바스크립트] getElementsByName 사용하여 체크박스 checked 구하기 (0) | 2015.05.28 |
|---|---|
| 자바스크립트 Select API (0) | 2015.04.10 |
| 이클립스를 사용하여 HTML5, JSP 코드 연습 (0) | 2015.03.27 |
| 자바스크립트 비교 연산자 및 논리연산자 (0) | 2015.03.25 |
| 자바스크립트 기초 2 (0) | 2015.03.22 |
Link2Me
HTM5 에서 음악 재생하는 걸 해봤다.
서버에 올리고 테스트를 해봤는데 모양은 볼품없지만 소리는 잘 나온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 audio play</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/><!-- 스마트폰에서 글자 크기가 줄어들지 않고 나오게 하는 명령어 -->
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
var audio = new Audio("test.mp3");
audio.addEventListener("timeupdate", function(e) {
$("info").innerHTML = audio.currentTime + "/" + audio.duration;
});
// 볼륨 조절
function changeVolume(v) {
var new_v = audio.volume + v;
if (0 <= new_v && new_v <= 1.0) {
audio.volume = new_v;
}
}
</script>
</head>
<body>
<h3>HTML5 음악재생</h3>
<div id="info"></div>
<div id="player_div">
<input type="button" value="재생" onclick="audio.play()" />
<input type="button" value="정지" onclick="audio.pause()" />
<input type="button" value="처음부터" onclick="audio.currentTime=0;audio.play()" /><br />
<input type="button" value="소리작게" onclick="changeVolume(-0.2)" />
<input type="button" value="소리크게" onclick="changeVolume(0.2)" />
</div>
</body>
</html>
| [PHP] switch 문 (0) | 2015.06.01 |
|---|---|
| [PHP] 문자열 자르기 substr (0) | 2015.05.16 |
| [PHP기초] 삼항연산자 ? (0) | 2015.03.06 |
| [PHP기초] continue 문 (0) | 2015.03.05 |
| [PHP문법] array (배열) (0) | 2015.03.04 |
Link2Me
이클립스를 사용하여 코드를 타이핑하면서 연습해보자.
자바스크립용으로 파일을 생성시켜 봤더니 아래 화면이 default 로 나온다.
이제 실제로 코드를 한번 연습해보자.
Ctrl + Spacebar 만 눌러도 자동완성 시킬 내용이 나온다.
이 부분이 엄청 편해서 코딩하는 실수를 상당히 줄이면서 가능할 수도 있겠다 싶다.
| 자바스크립트 Select API (0) | 2015.04.10 |
|---|---|
| jQuery 개념 이해 ★★★★ (0) | 2015.04.01 |
| 자바스크립트 비교 연산자 및 논리연산자 (0) | 2015.03.25 |
| 자바스크립트 기초 2 (0) | 2015.03.22 |
| 자바스크립트 기초 1 (0) | 2015.01.19 |
Link2Me
1. ID 선택자
ID 선택자(Selector)는 페이지 안에서 하나 밖에 없는 고유한 엘리먼트를 나타내기 위해 사용한다.
ㅇ 앞에 #을 붙이고 영문으로 시작하는 이름을 부여한다.
ㅇ 같은 페이지 내에 한번만 적용하는 것이 원칙이다.
ㅇ 자바 스크립트 프로그램에서 값을 얻거나 수정할 때 사용하기도 한다.
ㅇ 다른 페이지와 중복해서 사용할 수 있다.
반면에, 클래스 Selctor 는 고유한 것이 아니기 때문에
한 문서내에서건, 전체 페이지에서건 어느 오브젝트에나 광범위하게 다 적용할 수 있다.
CSS : 본문 <body> 가 시작되기 전에 설렉터( Selector )로써 미리 정의한다.
2-1) 전역 셀렉터 : 모든 요소, 즉 모든 태그에 필요하다면 적용 가능
2-2) 클래스 셀렉터 : 특정 태그에 적용
2-3) ID 셀렉터 : ID셀렉터는 특정부위에 예외 처리를 할 때 사용한다.
2. Position : 태그들의 위치를 결정하는 CSS
| static | 모든 태그들은 처음에 position: static 상태다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. |
| relative | static 상태를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동된다. 보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치된다. z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성이다. |
| fixed | 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정된다. 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. |
| absolute | 뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다. 부모 중에 포지션이 relative, absolute, fixed 가 없다면 가장 위의 태그(body)가 기준이 된다. position 을 설정했다면 부모 요소에 position 이 설정되어 있는지 확인하고 없다면, 부모 요소에 position:relative 를 추가하라. |
- top : 요소의 position 기준에 맞는 '위쪽'에서의 거리(위치)를 설정
- bottom : 요소의 position 기준에 맞는 '아래쪽'에서의 거리(위치)를 설정
- left :
- right :
3. z-index : position 적용된 요소에만 작동하며, 숫자가 높을수록 앞으로 배치된다. 기본값은 0이다.
4. display 프로퍼티
| block | 요소를 block 요소(element)처럼 표시한다. 따라서 요소 앞뒤로 줄바꿈된다. 사용 가능한 최대 가로 너비를 사용한다. 크기를 지정할 수 있다. div는 표준 블록 레벨 엘리먼트다. |
| inline | 기본값으로, 요소 앞뒤로 줄바꿈되지 않는다. 필요한 만큼의 너비를 사용한다. 크기를 지정할 수 없다. a, span 태그는 인라인 엘리먼트다. |
| inline-block | 내부는 block 처럼 표시되는데, 줄바꿈되지 않는다. |
| none | 보이지도 않고 해당 공간도 존재하지 않게 된다. visibility:hidden 은 width, height 값만큼 공간은 차지하는데 보이지 않는다. |
| flex | flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 한다. display: flex; /* 수평으로 나란히 정렬 */ flex-direction: column; /* 추가하면 수직으로 정렬된다. */ flex-direction: row; /* 수평 정렬 */ |
| 참조 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90 |
|
| .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } |
5. float : 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성이다.
float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 된다.
사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용한다.
| .box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; } |
- inherit : 부모 요소에서 상속
- left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
- none : 요소를 부유시키지 않음
- clear:none 기본값으로 clear를 설정하지 않은 것과 같다.
- clear:left float:left 를 취소한다
- clear:right float:right 를 취소한다
- clear:both 왼쪽 오른쪽을 취소한다.
6. overflow : 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성
7. box-sizing : 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
- content-box : 콘텐트 영역을 기준으로 크기를 정한다.
- border-box : 테두리를 기준으로 크기를 정한다.
- initial : 기본값으로 설정한다.
- inherit : 부모 요소의 속성값을 상속받는다.
| * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } |
| [CSS] Table 꾸미기 (0) | 2018.05.13 |
|---|---|
| CSS 기초 (0) | 2015.03.16 |
Link2Me
아래 코드는 내 웹사이트 직접 구현된 코드의 일부이다.
<script language="javascript">
//<![CDATA[
function SelectedCategory(relateduid,uid)
{
if (relateduid == 0)
{
document.bbssearchf.cat1.value=uid;
document.bbssearchf.cat2.value='';
}
else {
document.bbssearchf.cat1.value=relateduid;
document.bbssearchf.cat2.value=uid;
}
document.bbssearchf.submit();
}
//]]>
</script>
//<
const : 상수 (한번 선언하고 값이 바뀌지 않는 값)
ㅇ 변수(Variable)
- 변수는 변화하는 값을 저장하는 공간이다. 변수는 한번에 1개의 데이터만 저장 가능하다.
- 변수의 선언은 변수만 선언하고 값을 할당하지 않거나, 값을 할당하기도 한다.
var temp; // morden Javascript 에서는 더 이상 var 변수를 사용하지 않는다.
var temp, i, data;
var temp = 10;
- 변수명은
대문자 Temp 로 작성했으면 출력하거나 다른 곳에서 이용할 때 temp 라고 하면 에러가 발생한다.
변수명은 반드시 영문자, 숫자, _(underbar, underscore) 로만 사용해야 하며, 공백문자는 포함할 수 없다.
키워드를 사용할 수 없고, 변수 이름의 길이에는 제한이 없다.
첫글자가 숫자로 시작할 수 없다.
!, #, ?, $, @ 등과 같은 특수문자는 올 수 없다.
자바스크립트 문법 안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.
- 자바스크립트 데이터 타입(변수에 저장 가능한 데이터)
숫자형 데이터, 문자형 데이터, 논리형(boolean)형 데이터, 널(Null)형 데이터 이다.
변수형을 선언할 때에는 숫자형, 문자형 등을 구분하지 않는다.
숫자형 변수는 정수, 실수 구분이 없다.
문자열 변수는 작은 따옴표 나 큰 따옴표로 감싸야 한다.
status = "My computer is working."
document.write(status);
ㅇ 참, 거짓 판별
- 자바스크립트에서는 소문자로 true 와 false 를 판별한다.
TRUE는 '정의되지 않음' 오류가 발생한다.
즉, 불린(boolen) 타입 : true/false
- 참인지 거짓인지 확인할 때
거짓으로 평가되는 false 문자열 자체와 0, -0, 빈 문자열, null, 비정의, NaN 을 제외하고는
모든 값은 참으로 간주한다.
즉, 비교결과가 0, null, 빈문자열(""), false, undefined, NaN 으로 판단되면 false 다.
if(1 == true) document.write('true') // 참
ㅇ 자료형 확인 : typeof 연산자를 이용
- 언제든지 type of 연산자를 이용해 변수의 형식을 확인할 수 있다.
- 변수를 var n 으로 선언했다면, type of n 으로 확인한다.
<script>
alert(typeof('String')); //String
alert(typeof(123)); //Number
alert(typeof(true)); //Boolean
alert(typeof(function(){})); //Function
alert(typeof({})); //Object
alert(typeof(abc)); // undefined : 아직 값이 설정되지 않는 것을 의미
// 변수를 선언했지만 초기화를 하지 않았을 경우에도 undefined 출력된다
</script>
ㅇ 이용문법
- \n : 줄바꿈
- 문자열 연결은 + 를 사용한다.
'이런'+'식으로도'+' '+'출력 가능'
PHP 에서는 마침표(.)로 문자열을 연결한다.
- \t : Tab
- \' : 작은 따옴표
- \" : 큰 따옴표
- \\ : 역슬레쉬(\)
- % : 나머지 연산자, alert(5 % 3);
- 변수 : 값을 저장할 때 사용하는 식별자, 변수선언 var 식별자;
ㅇ 연산처리
- 자바스크립트의 연산자는 수식의 왼쪽에서 오른쪽으로 처리된다.
- || 연산자는 첫번째 피연산자가 참(true) 이면, 두번째 피연산자는 실행되지 않는다.
의도하지 않는 문제가 발생할지 잘 확인해야 한다.
- 다중 대입(a = b = c = 5) 은 가장 오른쪽이 먼저 실행되고, 오른쪽에서 왼쪽으로 계속 처리된다.
ㅇ 객체(object)
- 자바스크립트는 객체지향언어는 아니지만, 객체를 사용하기 때문에 객체(object) 기반 언어라고 한다.
객체는 속성(property)과 methods 를 가진다.
- 자바스크립트의 객체는 내장 객체, BOM(브라우저 객체 모델), DOM(문서 객체 모델)로 나눌 수 있다.
- 내장 객체를 생성할 때는 new 라는 키워드와 생성함수를 사용한다. (ex, var 참조변수=new Date();)
내장 객체인 경우는 자체 자바스크립트 문법에서 정의된 속성과 메소드를 알아야 한다.
- 객체 생성할 때 생성자 함수가 필요없는 객체 : Math Object, Number Object, String Object, RegExp Object
- parseInt("20.5px") + 30 = 50
- parseFloat("20.5px") + 30 = 50.5
- function으로 정의된 생성자 함수의 객체의 정의는 new를 이용한다.
- 생성자함수 안에는 this라는 용어를 이용해 정의한다.
ㅇ 객체배열은 http://link2me.tistory.com/1458 참조
ㅇ 윈도우 객체
window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.
window.속성
window.속성 = 값 // window.status="환영합니다."
window.메소드() // window.open();
window.메소드(인자 값)
--- window 객체의 속성 ---
- status : 상태 표시줄에 표시할 문자열 지정
- window : 창 자신을 가리킴
- frames : 창에 포함된 프레임을 배열 형태로 지정
- opener : open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴
- parent : 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴
- self : 현재 작업 중인 창, 즉 자기자신을 가리킴
- top : 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음
- screenX : 창의 x 좌표 반환
- screenY : 창의 y 좌표 반환
- closed : 창이 닫혀 있는지 확인한 후 true, false 반환
- name : 창 이름 반환
window 객체 메서드
- alert() : 경고용 대화상자를 띄워줍니다.
- confirm() : 확인, 취소를 선택할 수 있는 대화상자를 띄워줍니다.
- open() : 새로운 창을 오픈합니다.
- prompt() : 입력창이 있는 대화상자를 띄워줍니다.
- setTimeout() : 일정 간격으로 함수를 호출하여 수행합니다. (Millisecond 단위)
- clearTimeout() : setTimeout 메소드를 정지합니다.
- eval() : 문자열을 숫자로 변환합니다.
- toString() : 오브젝트를 문자열로 변환합니다.
- blur() : focus가 다른 객체로 이동합니다.
- focus() : focus를 지정합니다.
- scroll() : 창을 스크롤 합니다.
- valueOf() : 오브젝트 값을 반환합니다.
- back() : 한 단계 전 URL(이전화면)로 돌아갑니다. (IE 지원 불가)
- find() : 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false를 반홥합니다. (IE 지원 불가)
- forward() : 한 단계 뒤의 URL(다음화면)로 이동랍니다. (IE 지원 불가)
- home() : 초기화 홈페이지로 이동합니다. (IE 지원 불가)
- moveby() : 창을 상대적인 좌표로 이동합니다. 수평방향과 수직방향의 이동량을 픽셀로 지정합니다.
- moveto() : 창을 절대적인 좌표로 이동합니다 . 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정합니다.
- resizeby() : 창의 크기를 상대적인 좌표로 재설정합니다 . 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정합니다.
- resizeto() : 창의 크기를 절대적인 좌표로 재설정합니다 . 창 크기를 픽셀로 지정합니다.
- scrollby() : 창을 상대적인 좌표로 스크롤합니다. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정합니다.
- scrollto() : 창을 절대적인 좌표를 스크롤합니다. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정합니다.
- stop() : 불러오기를 중지합니다. (IE 지원 불가)
- captureEvents() : 모든 타입의 이벤트를 판단합니다.
- setInterval() : 일정시간마다 지정된 처리를 반복합니다.
- clearInterval() : setInterval 메소드의 정지합니다.
- print() : 화면에 있는 내용을 프린터로 출력합니다.
- handleEvent() : 이벤트 취급자를 정합니다.
- releaseEvent() : 다른 계층의 이벤트로 이벤트를 넘깁니다.
- routeEvent() : 판단한 이벤트와 같은 계층의 이벤트입니다.
- toSource() : 오브젝트값을 문자열로 반환합니다.
window 객체 이벤트 핸들러
- onLoad : 문서를 읽을 때 발생합니다.
- onUnload : 현재 문서를 지울려고 할 때 합니다.
- onBlur : 브라우저가 포커스를 잃을 때 발생합니다.
- onFocus : 브라우저에 포커스를 얻을 때 발생합니다.
- onDragDrop : 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생합니다. (IE 지원 불가)
- onError : 문서를 읽는 중에 에러가 생길 때 발생합니다.
- onMove : 브라우저의 위치를 변경했을 때 합니다. (IE 지원 불가)
- onResize : 창의 크기를 변경했을 때 합니다. (IE 지원 불가)
ㅇ Documents 객체
브라우저의 내장 객체 중 window객체의 바로 하위에 존재하는 객체.
- windows.document.~ 으로 표현하는 것이 정상이지만 보통은 window를 생략한다.
ㅇ history 객체
브라우저 기록에 대한 정보를 가지고 있는 객체이다.
- length : 히스토리에 있는 URL의 개수
- back() : 히스토리 리스트에서 한 단계 뒤로 이동
- forward() : 히스토리 리스트에서 한 단계 앞으로 이동
- go() : 히스토리 리스트에서 원하는 위치로 이동
<form>
<input TYPE="button" value="이전으로" onClick="history.back()">
<input TYPE="button" value="다음으로" onClick="history.forward()">
<input TYPE="button" value="두단계 전으로" onClick="history.go(-2)">
<input TYPE="button" value="두단계 앞으로" onClick="history.go(2)">
</form>
ㅇ location 객체
현재 문서에 대한 정보를 가지고 있다.
| 속성 |
href |
페이지의 URL주소 |
| host |
URL주소의 호스트이름과 포트번호 |
|
| hostname |
URL주소의 호스트이름 |
|
| protocol |
프로토콜 |
|
| pathname |
경로 |
|
| port |
포트번호 |
|
| hash |
레이블이름 |
|
| search |
호출시 사용하는 형식 |
|
| 메소드 |
reload() |
현재 페이지를 다시 읽음 |
| replace() |
현재 페이지를 원하는 페이지로 바꿈 |
| 자바스크립트 Select API (0) | 2015.04.10 |
|---|---|
| jQuery 개념 이해 ★★★★ (0) | 2015.04.01 |
| 이클립스를 사용하여 HTML5, JSP 코드 연습 (0) | 2015.03.27 |
| 자바스크립트 비교 연산자 및 논리연산자 (0) | 2015.03.25 |
| 자바스크립트 기초 1 (0) | 2015.01.19 |
Link2Me
[PHP] 파일 삭제
PHP에서 파일삭제하는 방법이다.
파일명을 적을 때 반드시 어떤 경로에 있는지를 포함해야 한다.
<?php
$filename = './datafile.csv'; // ./ 이란 것은 현재 디렉토리를 의미
if(is_file($filename)) {
if(is_writable($filename)) {
unlink($filename); //파일삭제(절대경로 "/" 불가능)
echo '파일 삭제됨.';
} else {
echo '파일에 대한 쓰기(삭제) 권한 없음.';
}
} else {
echo '파일이 없음.';
}
?>
| PHP 파일 읽어서 2중 배열 처리 (0) | 2016.03.27 |
|---|---|
| [PHP] while 문을 이용한 파일 읽기 (0) | 2015.04.29 |
| [PHP] 디렉토리내 특정 확장자를 가진 파일 전부 삭제 (0) | 2015.04.12 |
| [PHP응용] DB 내용을 화면에 출력(이중 for 문) (0) | 2014.12.02 |
| [PHP응용] MySQL DB 중복여부 검사하여 없는 것만 추가 (0) | 2014.09.09 |
Link2Me
구글 크롬 개발자 도구(F12)
구글 크롬 브라우저에서 F12 키를 누르면 브라우저 화면 디버깅 하기가 훨씬 용이하다.
F12 키를 누르면 브라우저 하단에 개발자 도구 환경이 나타난다.
모니터가 2개인 경우에는 분리가 되기도 한다.
또한, 아래처럼 누르면 스마트폰에서는 어떻게 보이는지 가상으로 확인할 수 있다.
네이버 사이트는 스마트폰으로 보기를 눌러도 보기좋게 변경되지는 않았다.
엊그제 HTML5 인터넷 자료보면서 서버에 파일 올리고 테스트해 본 화면을 구글 크롬브라우저에서 확인해봤다.
내 폰이 애플6 PLUS 라서 어떻게 보이는지 확인해봤다. 실제 스마트폰에서 보이는 거랑 완전 똑같다.
스마트폰을 보면서 코딩 연습하지 않아도 어떻게 동작되는지 화면상에서 확인할 수가 있어 편리할 거 같다.
http://caniuse.com 사이트 가서 기능을 지원하는지 검색하면 브라우저별로 지원여부를 알 수 있다.
canvas 기능은 익스플러로8 에서는 지원을 하지 않는다고 나온다.
| 개발 환경 구축을 위한 툴 설치 (이클립스 환경설정) - 2 (0) | 2015.03.24 |
|---|---|
| 개발 환경 구축을 위한 툴 설치 (JDK 와 이클립스) - 1 (0) | 2015.03.24 |
| Firefox 개발자를 위한 부가기능 설치 (0) | 2015.03.18 |
| EditPlus 기본설정 UTF-8 (0) | 2015.03.17 |
| [Editplus] 칼럼블럭 지정방법 (0) | 2015.03.12 |
Link2Me
Firefox 개발자를 위한 부가기능 설치
HTML5 등 스마트폰 기반 웹/앱이나 PC기반 웹 개발을 하는데 있어 도움이 되는 부가 기능을 설치해보자.
Web Developer 는 CSS 나 자바스크립트(Javascript) 가 차단된 환경에서 실행 등 다양한 웹 환경을 테스트할 수 있는 툴바다.
HTML Validator 는 HTML 의 문법 오류를 검사하여 체크해준다.
| 개발 환경 구축을 위한 툴 설치 (JDK 와 이클립스) - 1 (0) | 2015.03.24 |
|---|---|
| 구글 크롬 F12 (개발자 도구) (0) | 2015.03.20 |
| EditPlus 기본설정 UTF-8 (0) | 2015.03.17 |
| [Editplus] 칼럼블럭 지정방법 (0) | 2015.03.12 |
| SVN 개념과 Tortoise SVN (0) | 2014.10.12 |
Link2Me
EditPlus 인코딩 모드 기본설정을 UTF-8 로 설정하는 방법이다.
인코딩 모드를 변경하는 방법
| 구글 크롬 F12 (개발자 도구) (0) | 2015.03.20 |
|---|---|
| Firefox 개발자를 위한 부가기능 설치 (0) | 2015.03.18 |
| [Editplus] 칼럼블럭 지정방법 (0) | 2015.03.12 |
| SVN 개념과 Tortoise SVN (0) | 2014.10.12 |
| 레지스트리 등록 안될 때 (0) | 2014.09.25 |
Link2Me
CSS 기초
HTML은 운영체제나 사용하는 프로그램에 관계없이 누구나 같은 내용의 문서를 볼 수 있도록 하겠다는 취지에서 만들어졌다.
그러나, 이미지와 동영상등의 하이퍼미디어를 주 내용으로 하는 웹 문서가 다양하고 화려해짐에 따라,
HTML은 그 한계를 드러났고, 이를 보완하기 위해 등장한 새로운 문법으로 스타일 시트를 사용하면
TABLE이나 FRAME에 의존하던 문서의 레이아웃을 효과적으로 할 수 있고, 글자 크기나 글자체, 줄간격, 배경 색상 등도 자유롭게 선택할 수 있다.
CSS 는 HTML문서 내에서 어떤 요소에 CSS의 스타일을 적용시킬 것인가 결정하기 위한 것이다.
CSS 파일은 선택자(Selector)와 { }로 둘러쌓인 속성:속성값 들로 이루어져 있다.
CSS 의 장점
① 홈페이지에 통일감(일관성)을 줄 수 있다.
② 한 번만 정의하여 여러번 가져다 쓸 수 있으므로 업무효율성을 높일 수 있다.
③ 정의된 곳 한 곳만 수정하면 되므로 수정작업이 쉽다.
CSS의 정의하는방법
(1) <style>태그를 선언하여 사용하기
<style type=”text/css”>
<!--
이곳에 스타일을 정의한다.
-->
</style>
(2) 각 태그들의 style 속성에 설정하기
<태그 이름 style = ”스타일 ……..” >
(3) CSS(스타일)를 파일로 저장하기
<head> </head> 사이에 외부 스타일 시트를 불러올 수 있다.
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
Front End 디자인 무료 공개 소스(코드펜) https://codepen.io 에서 회원 가입하면 코드 미리 보기도 가능하고, 수많은 오픈 소스를 이용할 수 있다.
※ 글자색상, 배경색상을 RGB로 직접 지정하고 싶은 경우에는
http://www.color-hex.com/ 에서 확인 변경할 수가 있고
http://www.w3schools.com/css/css_colors.asp 참조하면 좋다.
https://www.cmsfactory.net/ 에 좋은 강좌 내용이 많다.
ㅇ ID 사용하기
스타일 시트 파일내에
#slist { font-style:italic; color:blue; }
라고 정의하면
HTML 본문에서
<div id="slist"> Welcome to Hello</div>
로 문장을 사용한다.
<style>
#para1 { text-align: left; color: blue; }
</style>
<p id="para1">Hello World!</p>
ㅇ 클래스 사용하기
ID에 사용되는 # 심볼 대신에 클래스 문장은 .(점)으로 시작한다.
스타일 시트 파일내에
.slist { font-style:italic; color:blue; }
라고 정의하고
HTML 본문에서는
<div class="slist"> Welcome to Hello</div>
<style>
p.center { text-align: center; color: red; }
p.large { font-size: 200%; }
p {text-align:justify;} // <p> ...</p> 태그 사이의 모든 텍스트가 양쪽 맞춤된다.
</style>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
p { margin-left : 10px; margin-right : 10px; background-color: yellow; }
ㅇ CSS 규칙
- CSS에서 세미콜론은 동일한 줄에 있는 여러 CSS 문장을 분리하는데 사용한다.
- 만일 값이 공백을 포함한 여러 단어일 경우 다음과 같이 quote(")로 묶어준다.
p {font-family: "sans serif"}
- 하나의 선택자에 하나 이상의 속성을 정의하고 싶을 경우에는 ";"(semicolon)으로 분리해 준다.
p {text-align:center;color:red}
ㅇ 외부 스타일 시트
외부 스타일 시트는 여러 웹 페이지에 스타일을 적용시킬 때 이상적이다. 외부 스타일 시트를 사용하면 하나의 CSS파일 만 수정하여 어려 웹 페이지(HTML문서)의 스타일을 변경시킬 수 있다. 그렇게 하기 위해서 각각 웹 페이지에는 <link> 태그를 사용하여 외부 스타일 시트 파일을 지정하는 문장에 <head>태그에 포함되어 있어야 한다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="default.css" />
</head>
<body>
ㅇ 주석처리
/* ... */ 로 하면 주석으로 인식한다.
ㅇ 내부스타일 시트
내부 스타일 시트는 하나의 문서에서만 사용하는 스타일을 정의할 때 사용한다. 내부 스타일은 <head>태그 안에 <style>태그를 이용하여 정의한다.
<head>
<title>문서의 제목</title>
<style type="text/css">
hr { color: sienna; }
p { margin-left: 20px; }
body {
background-image: url("images/back.gif")
}
</style>
</head>
<style type = "text/css">
p { color : blue; } /* p 태그 안의 글자들을 파란색으로 처리함. */
#ctxt { color : blue; } /* id명이 ctxt인 요소의 글자들을 파란색으로 처리함. */
.ctxt { color : blue; } /* class명이 ctxt인 요소의 글자들을 파란색으로 처리함. */
* { color : blue; } /* 페이지 내의 모든 요소의 글자들을 파란색으로 처리함. */
li > p { color : blue; } /* li 자식 p 태그의 글자들을 파란색으로 처리함. */
h1 + p { color : blue; } /* h1 속 바로 다음 p 태그의 글자들을 파란색으로 처리함. */
h1[class] { color : blue; } /* 두 hi 중 class 속성을 가진 '서울특별시'만 파란색으로 나타난다. */
a { color : #000; } /* 링크 걸린 글자는 모두 검은색 */
a:hover { color : #f00; } /* 마우스 닿으면 빨간색 */
.box:after { content : "항목을 선택해주세요." ; color : green ;} /* box의 마지막에 문장을 삽입한다. */
p:first-letter { font-size : 300% ; } /* p 태그 안의 첫 글자는 글자크기 세배로. */
p { border-bottom:1px dashed #000 ;} /* p 태그에 모두 밑줄 치고. */
p:last-child { borde : none ;} /* 마지막 p 태그에만 밑줄 빼기. */
p.more a { color : red ; } /* 클래스명이 more인 p 태그의 링크 (a)색상을 변경함. */
.box li { padding : 5px 0;} /* 클래스명이 box인 요소 내부의 li에 세로 여백을 준다. */
h1, p { border:1px solid #000; } /* h1과 p 요소에 1px짜리 검은 테두리를 준다. */
</style>
기본적으로 <div> 엘리먼트는 무한 너비를 가진다.
픽셀(px)의 크기는 사용자의 모니터의 면적과 픽셀 깊이에 따라 다르다.
포인트는 인치의 1/72 크기와 같다.
em 은 현재 글씨체와 같고, 상대적인 면적으로 나타내는 데 사용된다.
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; // 작은 이미지파일을 가로방향으로 큰 이미지처럼 보여준다
background-repeat: no-repeat;
background-position: left top; // 이미지 파일 위치 지정
margin-left: 220px; // 이미지와 글자가 겹쳐 보이지 않도록 글자의 여백 지정
}
</style>
If the margin property has four values:
margin: 20px 30px 40px 50px;
top margin is 20px
right margin is 30px
bottom margin is 40px
left margin is 50px
If the margin property has three values:
margin: 20px 30px 40px;
top margin is 20px
right and left margins are 30px
bottom margin is 40px
If the margin property has two values:
margin: 20px 30px;
top and bottom margins are 20px
right and left margins are 30px
If the margin property has one value:
margin: 20px;
all four margins are 20px
text-transform: uppercase; // 글자를 모두 대문자로 변환
text-transform: lowercase; // 글자를 모두 소문자로 변환
text-transform: capitalize; // 글자의 첫글자만 대문자로 변환
text-indent: 30px; // 텍스트 첫글자 들여쓰기
ㅇ 스마트폰 레이아웃 주의사항
- overflow 속성을 사용해서 스크롤을 넣을 수 없다.
- 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다.
- 동위 선택자에 제한이 있다.
- 선택자에 ~를 지원하지 않는 브라우저가 있다.
- iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다.
- 그래디언트를 적용할 수 없을 수 있다.
ㅇ viewport META
- meta 태그를 title 태그 위에 선언하여 브라우저에 특별한 정보를 제공할 수 있다.
- name 속성의 값이 viewport인 경우 content 속성의 값을 이용해 브라우저 화면 설정과 관련된 정보를 제공한다.
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
| [CSS] Table 꾸미기 (0) | 2018.05.13 |
|---|---|
| CSS 문법 (0) | 2015.03.26 |
Link2Me
EditPlus 로 편집작업을 하다보면 일정구간 블럭을 설정하여 작업을 해야 하는 경우가 있다.
그런데 메멘토적인 기억력인지라 도통 기억이 나지 않는 경우가 있어 난감하다.
그래서 적어둔다.
칼럼 블럭 설정방법
Alt + C 를 눌러서 화살표키를 우측과 아래로 누르면 블럭이 설정된다.
그런 다음에 마우스 좌클릭을 하면 블럭설정이 완료된다.
지우고 싶다면 Delete키를 누르면 설정된 블럭이 지워진다.
자동 줄바꿈 모드에서는 동작이 안된다.
| Firefox 개발자를 위한 부가기능 설치 (0) | 2015.03.18 |
|---|---|
| EditPlus 기본설정 UTF-8 (0) | 2015.03.17 |
| SVN 개념과 Tortoise SVN (0) | 2014.10.12 |
| 레지스트리 등록 안될 때 (0) | 2014.09.25 |
| [Total Commander] 텍스트 파일안의 내용 찾기 (0) | 2014.09.06 |
Link2Me
