[2023.03.06] 9. display 속성 / position / reset.css

 

 

display

[출처 : 위니브(Weniv)]

• 박스의 유형을 결정하며, 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정함.
• CSS 속성으로 시각적인 배치만 바뀌는 것이고, 태그 자체의 요소가 블록 레벨로 바뀌는 것이 아님.
  • block: 요소 전후에 줄 바꿈을 생성
  • inline: 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. width, height, margin, padding 적용 X
  • inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다.
  • flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정
  • grid: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정
  • none: 해당 속성은 접근성 트리에서 해당 요소가 제거, 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않는다.

 

 

position

• 문서 상에 요소를 배치하는 방법을 지정함.

 

static

• 기본값
• html을 작성한 순으로 정상적인 흐름에 따라 위치가 지정

 

relative

• 상대적 위치
• 다른 콘텐츠들의 위치에 영향을 주지 않음

 

absolute

• 절대적 위치
• 조상의 위치를 기준으로 자리를 잡음
• 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리를 잡음

 

fixed

• 뷰포트를 기준으로 위치 지정
• 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리를 잡음
• 스크롤을 내리거나 올리거나 상관없이 고정된 위치
• header , 하단 top 버튼에 사용

 

sticky

• 조상의 위치를 기준으로 자리를 잡음
  • static을 제외한 position 속성을 가진 가장 가까운 조상

[출처 : caniuse.com]

⚠️position 속성에 의해 다른 요소의 내용이 가려지지 않도록 주의!

 

 

 

reset.css

브라우저에는 기본적으로 제공하는 스타일이 있다. 그리고 각 브라우저마다 조금씩 다르다. (여백, 색상, 크기 등)

웹디자이너의 디자인을 모든 브라우저에 알맞게 구현하기 힘들기 때문에, CSS 속성을 초기화하는 작업이 필요하다.

이를 위해 필요한 것이 reset.css다.

 

CSS Tools: Reset CSS

Normalize.css: Make browsers render all elements more consistently.

다양한 reset.css 파일들이 있으며, 자신만의 reset.css를 만들 수도 있다.

 

💡 크로스 브라우징(Cross Browsing)

• 웹페이지의 상호 호환성
• 웹브라우저에 100% 똑같이 보이게 하는 것이 아닙니다! (사실상 불가능합니다)

Cross Browsing 이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 데스크톱 웹브라우저뿐만 아니라 모바일, 임베디드 기기, 홈네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애인, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다. - Cross Browsing 가이드

다양한 디바이스와 브라우저를 사용하는 다양한 사용자가 거의 비슷한 사용자경험을 할 수 있도록 하는 기술이라고 볼 수 있습니다!

[출처 : 위니브(Weniv)]