HTML, CSS 팁

this

id,class,css 단순화

가급적 class를 사용하고 id는 최대한 안쓰는게 좋음. 그렇다고 class도 많이 쓰지 않는것도 좋음

.outer {
				margin-top: 10px;
			}
.my_class {
				width: 200px;
				height: 200px;
				background-color: yellow;
				display: inline-block;
				padding: 10px 0px 0px 10px;
				padding-left: 10px;
				padding-top: 10px;
				margin-right: 10px;
				vertical-align: top;
			}

<div class="outer">
			<div id="cal_1" class="my_class">
				<div class="date">1일</div>
			</div>

			<div id="cal_2" class="my_class">
				<div class="date">2일</div>
			</div>

			<div id="cal_3" class="my_class">
				<div class="date">3일</div>
			</div>
		</div>

이렇게 하는 것보다

.outer {
				margin-top: 10px;
			}
.outer > div {
				width: 200px;
				height: 200px;
				background-color: yellow;
				display: inline-block;
				padding: 10px 0px 0px 10px;
				padding-left: 10px;
				padding-top: 10px;
				margin-right: 10px;
				vertical-align: top;
			}

<div class="outer">
			<div>
				<div class="date">1일</div>
			</div>

			<div>
				<div class="date">2일</div>
			</div>

			<div>
				<div class="date">3일</div>
			</div>
		</div>

이거와 같이 자식을 가르키는 게 훨씬 낫다.
핵심은 관계를 최대한 표현해 주는 것

jQuery

.parent() //선택자의 부모 태그를 반환한다.
function checkthisout(obj){
	console.log($($(obj).parent()).html());
}

.children() //선택자의 자식 태그들을 배열로 반환한다. 그래서 배열 indexing이 가능하다.
function checkchildren(obj){
	console.log($(obj).children()[1]);

	//좀 더 응용해서 이런것도 가능하다
	$($(".outer").children()[$("#my_date").val()-1]).append( "<div class='content'>" +  $( "#my_input" ).val() + "</div>" );
}

BootStrap

p : padding
m : margin
l,r,t,b : left, right, top, bottom
-숫지 : 크기

섹션과 쿠키

섹션과 쿠기 모두 웹브라우저단에서 기억하고 있다.
쿠키 : 서버가 웹브라우저를 기억할 수 있게 해주는 정보, 웨브라우저에 개인의 정보가 저장된 형태

예를 들어 네이버와 같은 경우 쿠키가 위와 같이 NID_SES에 암호화되어서 저장된다.

그래서 쿠키를 지운다는 것은 이렇게 저장해 놓은 것들을 모두 지워버리는 것을 이야기 한다.

섹션 : 정보가 서버에 저장이 된다.
쿠키를 로컬에 저장하는 것이 아니라 서버가 가지고 있는 것이 섹션이다. 사이트에 저장하면 서버와 웹브라우저가 연결되어서 서버가 정보를 갖게 된다.
섹션에 따라 제한시간을 두어서 시간이 지나면 재로그인을 요구하기도 한다.