개발길에서 살아남기

출처: 

https://codingbroker.tistory.com/127

css속성 overflow로 스크롤바 생성을 제어할 수 있습니다.

(가로축 overflow-x, 세로축 overflow-y, 모두: overflow)

overflow: visible

overflow를 설정하지 않을때 적용되는 default 값입니다.

하위 콘텐츠의 내용이 컨테이너를 벗어나도 그대로 출력합니다.

<div style="height: 300px"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

하위 콘텐츠의 총 길이(200+200+200=600px)가 컨테이너의 길이(300px)를 초과했지만

그대로 출력되었습니다.

눈에 보이지 않는 실제 컨테이너의 범위는 이렇습니다.

overflow: auto

하위 콘텐츠의 길이가 컨테이너의 길이를 초과했을 때 스크롤을 생성합니다.

(초과하지 않으면 생성하지 않음)

<!-- overflow: auto -->
<div style="height: 300px; overflow: auto"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

컨테이너에 스크롤이 생성되었습니다.

※컨테이너의 길이를 지정하지 않은 경우에는 초과해도 스크롤이 생성되지 않습니다.

=>하위 컨텐츠의 길이에 따라 컨테이너의 길이가 늘어나기 때문

<!-- overflow: auto / no height -->
<div style="overflow: auto"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

overflow: hidden

하위 콘텐츠의 길이가 컨테이너의 길이를 초과하면 초과한 부분을 숨깁니다.

<!-- overflow: hidden -->
<div style="height: 300px; overflow: hidden"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

※마찬가지로 컨테이너의 길이를 지정하지 않으면

컨테이너가 하위 콘텐츠의 길이에 따라 늘어나기 때문에 숨겨지지 않습니다.

<!-- overflow: hidden / no height -->
<div style="overflow: hidden"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

overflow: scroll

하위 컨텐츠의 길이에 상관없이 컨테이너에 스크롤바를 생성합니다.

하위컨텐츠의 길이가 컨테이너의 길이보다 작을때는 스크롤바가 작동하지 않고하위컨텐츠의 길이가 컨테이너의 길이를 초과했을 때부터 스크롤바가 작동합니다.

overflow: overlay

overflow: auto와 동일하게 동작하지만 스크롤바가 하위콘텐츠 위에 덮어쓰입니다.

1) overflow: auto 의 하위 콘텐츠 red

<!-- overflow: auto -->
<div style="height: 300px; overflow: auto"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

red 콘텐츠 가로길이가 962.4

2) overflow: overlay 의 하위 콘텐츠 red

<!-- overflow: overlay -->
<div style="height: 300px; overflow: overlay"> 
  <div style="height: 200px; background: red">red</div>
  <div style="height: 200px; background: orange">orange</div>
  <div style="height: 200px; background: yellow">yellow</div>
</div>

red 콘텐츠 가로길이가 979.2

스크롤바가 실제영역을 차지하지 않고 position: fixed와 비슷하게 red콘텐츠 위에 덮어씌워졌습니다.

		// sql 오류시 리다이렉트
		if (empty($data)) {
			redirect(base_url()."이동할 주소");
		}

전체선택 또는 전체선택 해제

	function resetAll (checkid) {
        if ($("#" + checkid).is(':checked')) {
            $("input[type=checkbox]").prop("checked", true);
        } else {
            $("input[type=checkbox]").prop("checked", false);
        }
    }​

초기화 버튼

	function resetAll (checkid) {
        if ($("#" + checkid).is(':checked')) {
            $("input[type=checkbox]").prop("checked", false);
        } 
    }

// 방법 1
"가나다라<? echo $변수명 ?>마바사" 

// 방법 2 
"가나다라".<? echo $변수명 ?>."마바사"

// 방법 3
"가나다라{$변수명}마바사"

오늘 :

WHERE t_date=CURDATE();

내일 :

WHERE t_date=CURDATE() + INTERVAL 1 DAY;

어제 :

WHERE t_date=CURDATE() - INTERVAL 1 DAY;

		<ul class="" style="">
			<li>
				<input type="checkbox" name="inAll" 
                onclick='checkSelectAll(event)' value="inAll" id="1">
				<label for="1">전체</label>
			</li>
			<li>
			<input type="checkbox" name="in[]" class="in" 
            onclick='selectAll1(this)' value="1" id="2">
			<label for="2">1</label>
			</li>
			<li>
				<input type="checkbox" name="in[]" class="in"
                onclick='selectAll1(this)' value="2" id="3">
				<label for="3">2</label>
			</li>
			<li>
				<input type="checkbox" name="in[]" class="in" 
                onclick='selectAll1(this)' value="3" id="4">
				<label for="4">3</label>
			</li>
			<li>
				<input type="checkbox" name="in[]" class="in" 
                onclick='selectAll1(this)' value="4" id="5">
				<label for="5">4</label>
			</li>
		</ul>

   // .in은 class 를 써주기
   function checkSelectAll(e)  {
		if(e.target.checked) {
			document.querySelectorAll(".in").forEach(function(v, i) {
				v.checked = false;
			});
		} else {
			document.querySelectorAll(".in").forEach(function(v, i) {
				v.checked = false;
			});
		}
	}
	function selectAll1(selectAll)  {
		let checkCount = 0;
		document.querySelectorAll(".in").forEach(function(v, i) {
			if(v.checked === false){
				checkCount++;
			}
		});
		if(checkCount>0) {
			document.getElementById("1").checked = false;
		} else if(checkCount === 0) {
			document.getElementById("1").checked = true;
            document.querySelectorAll("." + classname).forEach(function(v, i) {
				v.checked = false;
			});
		}
	}

html

		<ul class="" style="">
			<li>
				<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="0" id="1">
				<label for="1">전체</label>
			</li>
			<li>
			<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="1" id="2">
			<label for="2">선택1</label>
			</li>
			<li>
				<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="2" id="3">
				<label for="3">선택2</label>
			</li>
			<li>
				<input type="checkbox" name="nameval"onclick='checkOnlyOne1(this)'  value="3" id="4">
				<label for="4">선택3</label>
			</li>
			<li>
				<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="4" id="5">
				<label for="5">기타</label>
			</li>
		</ul>

스크립트

	function checkOnlyOne1(element) {
	  	const checkboxes1 = document.getElementsByName("nameval");
	  	checkboxes1.forEach((cb) => {
	  	  	cb.checked = false;
	  	});
	  	element.checked = true;
	};

		$data = $this->input->post("data");

		$data = explode(', ', $data);
		$datacount = count($data);
		$postData['data1'] = $data[$datacount - 1];

		if (!empty($data[2])) {
			unset($data[$datacount - 1]);
			$data[0] = implode(', ',$data);
		}
		$postData['data2'] = $data[0];

input, textarea 에서 사용할때

$('#copyTag').click(function() {

			const valOfCopy = document.getElementById("copyTagText").innerText;
			const textArea = document.createElement('textarea');
			document.body.appendChild(textArea);
			textArea.value = valOfCopy;
			textArea.select(); document.execCommand('copy');
			document.body.removeChild(textArea);
			const options = {
				settings: {
      				duration: 1500,
      			},
			   style : {
					main: {
						width: "12.5rem", // 200px
						fontSize: "0.75rem" // 12px
					}
			   }
			};
  			iqwerty.toast.toast('클립보드에 복사되었습니다.', options);
		});​

그외의 테그를 사용할 때

textarea를 만들어서 그안에 넣고 복사하고 다시 지우는 로직이다

	//복사
		$('#copyTag').click(function() {
			var copyText = document.getElementById("copyTagText");
  			copyText.select();
  			document.execCommand("Copy");
			const options = {
				settings: {
      				duration: 1500,
      			},
			   style : {
					main: {
						width: "12.5rem", // 200px
						fontSize: "0.75rem" // 12px
					}
			   }
			};
  			iqwerty.toast.toast('클립보드에 복사되었습니다.', options);
    	});

toast는 

https://www.cssscript.com/super-simple-javascript-message-toaster-toast-js/

이것을 사용했다

• 시간 형식: 

포맷설명예

• 시간 및 날짜 스탬프 형식: 

포맷설명예

• 일 형식: 

포맷설명예

• 주 형식 지정: 

포맷설명예

• 월 형식: 

포맷설명예

• 연도 형식: 

포맷설명예

• 기타 형식: 
   

포맷설명