4. wrap box / 가상선택자 / 특수문자

wrap box

• 홈페이지 양 옆에 여백을 주기위해 사용하는 box.
• 너비값은 고정값으로 지정하고 좌우 여백을 auto값으로 지정해주어 고정값외에는 여백처리가 되도록 처리해준다.
• 시멘틱 태그 내부에 사용

<header>
	<div class="wrap">
		<!-- 콘텐츠 -->
 	</div>
</header>

<section>
	<div class="wrap">
		<!-- 콘텐츠 -->
 	</div>
</section>

<footer>
	<div class="wrap">
		<!-- 콘텐츠 -->
 	</div>
</footer>


<style>
	.wrap{
		width:1200px;
		margin:0 auto;
	}
</style>

 

---

 

가상선택자

선택자뒤에 가상선택자를 부여하여 특정한 이벤트마다 지정한 속성을 부여한다.

 

• selector:first-child() : 해당 요소의 첫번째 요소
• selector:last-child() : 해당 요소의 마지막번째 요소
• selector:nth-child(n) : 해당 요소의 모든 요소중 n번째 요소 (n번째 자리에 selector요소가 있어야만 적용됨)
• selector:nth-of-type(n) : 해당 요소의 type중 n번째 요소 (selector요소만 카운트하며 n번째 selector요소에 적용됨)
• selector:hover : 해당 요소에 마우스를 올렸을때 일어나는 이벤트
• selector::before/ selector::after : 요소의 시작, 끝지점에 가상의 css를 적용 (float해제, list-mark등 사용됨 / content속성 필수)

*가상선택자를 사용하려면 기존 selector에 가상선택자를 붙여 추가로 기재해줘야한다.

 

https://firerope.tistory.com/5 

nth-child와 nth-of-type의 차이

---

HTML 특수문자

 

HTML에서는 공백은 1번까지만 적용됨. 그 외에는 특수문자를 사용해야한다.

지시어로 사용되는 <,>,&,ⓒ등과같은 특수문자는 해당되는 기호를 사용하여 표현해야한다.

 

 

---

CSS

- transition : 지정할속성 / 시간 / 타이밍함수 -> hover를 할 selector에 지정.

- overflow : hidden / scroll / visible / auto

- cursor : 커서타입 (pointer .. 등등)

- transform : translate / translateX / translateY / translate3d / scale / rotate