각각의 요소들은 기본적인 속성을 가지고 있는데 기본적인 스타일을 제거하고 본인이 직접 모든스타일을 작업할떄 불필요한 스타일을 처음에 지우고 시작하기 위해서
결합자란?
여러가지 선택자를 연결해서 스타일을 적용
p {
color: red;
}
css
div a {display : none};
div > a {display : none};
div p {} 자손 결합자
.a .b {} 자손 결합자
div > p 직계 자식 결합자
p + div 인접 결합자
p ~ div 형제 결합자
input[id="box"] 속성 선택자
div:after 의사 요소 : html을 작성할 때 요소를 작성하지 않았지만 가상의 요소를 선택할 떄 사용한다.
div:hover 의사 클래스 : 요소의 위로 마우스를 올렸을떄
html
div>
<ul>
<li>
<a></a>
<a></a>
<a></a>
</li>
</ul>
</div>
p + div 인접 결합자
div + a {
display : none;
}
어휘적으로 인접한 요소는 스타일을 적용 시킨다.
<div>
<p></p>
<a></a>
<h1></h1>
</div>
p~ div 형제 결합자
같은 부모를 가지고 있는 요소를 형제의 요소들은 스타일을 적용시킨다.
p~div {
display : none;
}
<div>
<p></p>
<a></a>
<h1></h1>
</div>
포지션이란?
-요소의 위치를 정의할 때 위치의 정보를 직접 정의한다.
-기준점으로 부터 부모의 요소가 될 수 있다.
-요소의 위치에 영향을 주지 않게된다. 영역의 영향을 주지 않게된다.
-요소간의 위치가 겹치게 스타일을 적용할수 있다.
top , left , right , bottom 네속성을 가지고 위치를 이동시킬수 있다. ( 대신 포지션 속성이 있어야 사용할 수 있는 스타일 속성)
position: relative : 위치의 기준점은 본인의 요소의 위치로 부터 이동
position: absolute : 부모의 요소중 relative의 속성을 가지고 있는 요소로부터 기준점
스타일의 속성값
.box {
display : block; - 블록 요소 한줄을 모두 차지 않다 요소가 나열될수 없다. 본인의 요소의 크기를 지정할 수 있다
}
display : inline; - 내용의 크기만큼만 영역을 차지하고 요소가 나열될 수 있다. 요소의 크기를 지정할 수 있다
display : inline-block; - 요소의 크기를 지정할 수 있고 요소가 나열될 수 있다.
display : none - 화면에서 요소가 보이지않게 지워버린다.
display : inherit; - 부모의 속성을 가져와서 값을 적용한다.
display : initial; - 태그의 속성값을 초기화
display : flex; - 자식 요소에게 영향을 준다 자식요소의 정렬 방법을 정의한다.
font-size : 12px; - text의 크기를 지정한다.
text-decoration : none; - text의 꾸미기 요소를 정의한다 , 밑줄 , 삭제선 ,상단선 등
text-decoration : underline;
text-decoration : overline;
text-align : ------; - text 정렬할떄 사용한다 . (center , start , end )
margin : 1px; - 외부 간격을 정의하는 속성 시계 방향 순서로
padding : 1px; - 내부 간격을 정의하는 속성
color : red; - text 내용의 색을 정의하는 속성
overflow : hidden; - hidden은 부모의 요소의 밖으로 나온 부분을 제거하는 속성
overflow : scroll; - scroll은 부모의 요소의 상하 좌우 모두다 자식의 요소가 부모보다 커지게 되면 스크롤 되는 속성
