[CSS 스타일 속성 3] 위치 속성 position z-index

 

 

 

---

위치 속성

 

position

§  태그의 위치 설정 방법을 변경할 때 사용한다.

§ 즉, 레이아웃을 배치하거나, 객체를 위치시킬떄 사용한다.

 

 

position 속성의 종류

1. ☘️ static     : 정적의 고정 위치. 기본 설정값 / 위에서 아래로 순서대로 배치됨
2. ☘️ relative  : 상대적 기준 위치. 부모의 위치를 기준으로 위치를 잡는다 / 초기 위치 상태에서 상하좌우로 위치를 이동함
3. ☘️ absolute : 절대적 기준 위치
4. ☘️ fixed       : 고정 위치. 화면을 기준으로 특정 좌표에 고정되어 표현  
5. ☘️ sticky      : 처음엔 static 속성과 같이 동작하다가 스크롤시 지정 지점에서 fixed 처럼 고정됨
   1. sticky 엘리먼트는 어느 위치에 고정시키기 위해 < top, bottom, left, right > 속성 중 하나는 반드시 필요하다.

 

 

position 속성

position

원하는 위치에 맞게 속성값을 px로 지정해주면 된다.

 

 

---

 

z-index

§HTML 태그는 아래 입력한 태그가 위로 올라온다.

§이러한 순서를 변경할 때에 z-index 속성을 사용한다.

§큰 값을 입력할 수록 위로 올라온다.

§다음과 같은 방법으로 사용한다.

§가장 아래에 쓰인 파란색의 child(3)이 가장 위로 올라와야 하지만,
     z-index값이 가장 큰 빨간색 박스가 제일 위에 위에 위치해있는것이다.

 

z-index

 

 

 

 

 

SVG의 사용

드라이브에 저장 후 사용

• img 태그 사용

<img class="filter-orange size-m" src="image/svg_search.svg" />

• svg 파일 자체를 수정

사진 자체의 색상을 바꾸려면 (배경색X) ⇒ vscode에서 .svg에 들어가서

<svg xmlns="http://www.w3.org/2000/svg" fill="green" height="48"

fill = “색상” 을 따로 입력할 것

 

 

정렬을 하고자 할 때 __-text-align

<style> 에서 .{} 에 입력

text-align: center;

(left, center, right : 텍스트,이미지를 가로기준으로 가운데)

 

 

정렬을 하고자 할 때 __-line-height : 텍스트만 해당

.aaa{ line-height: 50px;} = height: 50px;

height 의 값과 동일하게 적용

• 여백을 지정 ___ padding

padding을 주면 여백만큼 늘어나게됨 (높이)

그래서 100 /100 이였던 가로세로가 100/110으로 출력 되었기에 90으로 수정한거임

 

 

:hover __ 마우스 포인트에 효과

.search : hover{ background-color: orange; }

CSS에 추가로 적용하는 속성코드

 

 

 

 

---

css 3.0

line-height: 100px;

텍스트만 적용