05의 개발 계발

[TIL] 230315 [CSS] position을 이용한 겹치기 (+우선순위, display 속성) 본문

TIL

[TIL] 230315 [CSS] position을 이용한 겹치기 (+우선순위, display 속성)

생각하는 코댕이 2023. 3. 19. 00:21
728x90

TIL 학습목표

  • CSS 에서 우선순위에 대한 개념을 알고, 활용할 수 있다.
  • CSS display 속성이 적용되는 영역과 활용법을 이해한다.
  • CSS display 를 서로 겹치기 위해 position 속성을 활용할 수 있다.

1) 문제점

비디오를 뒷 배경으로 삼고, 그 위에 레이어처럼 글과 버튼을 위치 시키고자 하였다.

비디오는 background-image를 이용하여 넣을 수 없고, video 태그를 이용해야 함으로 CSS를 이용해 겹치고자 하였다.    

그러나 CSS에 대한 지식이 부족하여 어려움을 겪었다.

html css 기존코드        두 개를 겹치고 싶다!

2) 시도해본 것들

이번에는 CSS 지식이 부족해 일어난 일이므로, 학습을 진행했고 배운것을 정리해보자.

 

▶CSS가 적용되는 우선순위 (1>2>3>4>5>6)

1.속성 값 뒤에 !important 를 붙인 속성 

.compulsion{ color: black !important }

2. HTML에서 style을 직접 지정한 속성 (인라인으로 작성한 것)

<body>
	<div class="cover" id="box" style="color: red;">
</body>

3. #id 로 지정한 속성

#box{color: black;}

4. .클래스, :추상클래스 로 지정한 속성

.box :hover{color:blue}

5. 태그이름 으로 지정한 속성

div{color: blueviolet;}

6. 상위 객체에 의해 상속된 속성

body{color: beige;}
body div{position:inherit;}   /*div 는 body의 자식요소로 color속성을 상속받는다.*/
body .box{position:inherit;}  /*.box 는 body의 자식요소로 color속성을 상속받는다.*/

▶CSS display 속성 (주 사용 4가지)

  • none : 보이지 않음, 공간도 차지하지 않음
  • block : 블록 박스(공간 개념)
  • inline : 인라인 박스(글자 개념)
  • inline-block : block과 inline의 중간 형태(스스로는 block, 자식요소로선 inline)

이 때, display 속성은 해당요소 외에 부모나 자식요소 에게는 영향을 주지 않는다.

즉, 속성을 선언하는 해당요소의 display속성만을 바꿔준다.

여기서 block 과 inline 의 개념이 특히나 중요하고, 태그마다 Defalut값이 다르니 참고자료를 따라 따로 정리하도록 하자.
또 하나로 flex가 있는데, 아직 사용법이 어렵다. 참고자료를 따라 따로 정리하도록 하자.

▶CSS position 속성

  • static: defalut값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
  • absolute: 절대 좌표와 함께 위치를 지정해 준다. 다른 태그와의 공간적 관계를 무시한다. 
  • relative: 원래 있던 위치를 기준으로 좌표를 지정한다.
  • fixed: 스크롤과 상관없이 문서 최 좌측상단을 기준으로 좌표를 고정한다. 다른 태그와의 공간적 관계를 무시한다.
  • inherit: 부모 태그의 속성값을 상속받는다.

absolute와 fixed는 다른 태그와의 공간적 관계를 무시한다.

이 말은 즉, block 성질을 무시하고 겹치기가 가능하다는 의미이다.(온전한 겹치기)

여기서 주의할 점은 relative는 보여주는 위치를 변경할 뿐, 다른 태그와의 공간적 관계는 유지된다.(겉으로만 겹치기)

 

아래의 두 경우를 비교해 이해하도록 하자.

 

 

<relative 사용하여 겹치기>

video{    /* video라는 tag에 style적용 */
    width: 500px;
}


.cover{   /* cover라는 class에 style적용 */
    background-color: blue;
    width: 500px;
    height: 281.250px;
    position: relative; /* 상대적배치가 가능한 속성 */
    top: -285px;   /* 기존위치 top을 기준으로 285px 만큼 위로 이동 */
    opacity: 0.7; /* 불투명도 70% */
}

relative 와 absolute 의 차이

<absolute 사용하여 겹치기>
video{    /* video라는 tag에 style적용 */
    width: 500px;
    position: absolute;  /* 절대적배치가 가능한 속성 */
}


.cover{   /* cover라는 class에 style적용 */
    background-color: blue;
    width: 500px;
    height: 281.250px;
    opacity: 0.7; /* 불투명도 70% */
}

3) 해결

css 변경코드        겹쳐졌다!

4) 알게 된 점

CSS개념 중 우선순위 display  position 에 대해 알게되었다.

태그마다 속성마다 Defalut 값이 있는 만큼 제대로 된 이해가 필요하다.

(+) CSS 관련 태그&속성 별로 테마형식으로 따로 정리하도록 하자.

728x90

'TIL' 카테고리의 다른 글

[TIL] 230320 [Python] or 연산자의 bool타입 연산  (0) 2023.03.20
[TIL] 230317 협업을 위한 가상환경 설정법( venv 관리)  (0) 2023.03.19
[TIL] 230316 [JS] <a>태그가 아닌 다른 태그에 링크 걸기  (0) 2023.03.19
[TIL] 230314 VScode 설정 issue 및 초기화 방법  (0) 2023.03.19
[TIL] 230313 Git & Git hub 기초  (2) 2023.03.14
'TIL' Related Articles more