[CSS Battle로 CSS 공부] 02. #2 Carrom

기록용 포스팅이기에 간결히 적습니다.

하지만 질문 및 지적은 환영합니다.

---

 

CSS Battle을 통해 CSS를 학습한 내용을 다룹니다.
HTML, CSS 기초 보강프로젝트!

 

2022/08/02 #2 Carrom

<div id='a'></div>
<div id='b'></div>
<div id='c'></div>
<div id='d'></div>
<style>
  body {
    background: #62374e;
  }
  div {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
  #a {
	top: 50px;
    left: 50px;
  }
  #b {
	top: 50px;
    right: 50px;
  }
  #c {
	bottom: 50px;
    left: 50px;
  }
  #d {
	bottom: 50px;
    right: 50px;
  }
</style>

#2 Carrom

모범 답안 분석

모범 답안이라고 생각했는데, 분석 위해서 붙여넣기 했더니 일치율 꽤 떨어집니다. 그래도 접근 방식은 참조할 예정입니다.

 

1. inline-block

div의 display를 inline-block으로 설정했습니다.

inline-block은 inline 엘리먼트처럼 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width, height, margin, padding 등의 값을 지정할 수 있습니다. 즉 absolute로 각각 절대적인 위치를 부여한 제 답안과는

다르게 아래처럼 순서가 부여된 것이며, 서로 이전 요소와의 간격이 지정되어 있습니다.

 

#2 Carrom inline-block

 

#2 Carrom 답안 코드 일부

2. absolute 대신 fixed 사용.

absolute vs fixed

 

absolute는 부모 기준

부모의 position 속성이 absolute, relative, fixed일 때는 부모의 시작점이 기준입니다.

static일 때는 화면의 (0,0) 기준. -> 이 경우 fixed와 차이 없을까?

 

fixed는 부모 상관없이 항상 화면상 절대적인 곳에 위치합니다.

스크롤 내려도 고정되는 상단 appbar, 하단 내비게이션 같은 곳에 사용했습니다.

 

3. div: nth-of-type(even)

1과 마찬가지로 inline-block을 사용했지만, div에 id를 부여해서 각각 간격을 조절해줬던 것과는 다르게 구조 의사 클래스인 nth-of-type을 사용했습니다. nth-of-type(n)은 모든 자신 요소 중에서 n번째 등장하는 특정 타입의 요소를 모두 선택합니다. (odd는 홀수, even은 짝수 번째 요소 선택)

#2 Carrom 모범 답안 3

 

4.  가상 요소(Pseudo Elements) 사용

가상 요소는 해당 요소의 앞이나 뒤에 가상의 요소를 추가합니다. :before, :after 로 각각 요소의 앞, 뒤에 가상 요소를 추가할 수 있습니다. ::before, ::after로도 사용 가능합니다. 

#2 Carrom 모범 답안 4

 

모범 답안 참고 사이트

https://dev.to/pheeria/css-battle-1-simply-square-c19