▶ display 속성
박스의 유형을 지정하고, 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정.
- block : 요소 전후에 줄 바꿈을 생성.
- inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. 정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있다.
- inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다.
- flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정.
- grid: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정.
- none: 해당 속성은 접근성 트리에서 해당 요소가 제거된다. 이렇게 되면 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않는다.
▶ 크로스 브라우징(Cross Browsing)
- 다양한 디바이스·브라우저를 사용하는 사용자들이 비슷한 사용자 경험을 할 수 있도록 하는 기술.
- 표준 웹 기술을 채용해 기종 및 플랫폼별로 다르게 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법.
- 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미한다.
- 이는 인터넷 환경 자체가 일반 데스크톱 웹브라우저뿐만 아니라 모바일, 임베디드 기기, 홈네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애인, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.
▶ img
- 예전에는 이미지를 보려면 링크를 클릭해 새 창에서 확인해야 했다. (이미지를 하나의 문서로 생각하던 시절)
- "거치는 단계 없이 글자와 이미지를 한 번에 보여주면 어떨까?"
→ 마크 로웰 앤드리슨(모자이크 웹 브라우저 및 넷스케이프 내비게이터 개발)에 의해 이미지 태그가 생성된다.
▷ 이미지 하단에 생기는 빈 공간
- img가 inline 요소라서 발생하는 현상. (img의 세로 정렬이 글자의 baseline을 따른다)
- 해당 현상을 해결하려면 아래와 같은 초깃값을 넣어준다.
img{
vertical-align:top;
}▷ figure(figcaption)
이미지에 캡션을 달 때 사용.
▶ 이미지 비율 유지하기
▷ aspect-ratio
기본 가로 / 세로 비율 설정
img{
width:300px;
aspect-ratio: 2 / 1;
object-fit:cover;
}▷ padding %값 이용
padding의 top과 bottom % 값은 부모의 가로 너비를 기준으로 삼는다.
▶ position
▷ static : 기본값.
▷ relative: 일반적 흐름에 따라 배치하되 top, bottom, left, right 적용 가능.
▷ absolute:
- position 속성값을 가진 가장 가까운 조상을 기준으로 자리 잡음.
- 문서 흐름을 벗어난 요소. 다른 요소를 방해하지 않는다.
▷ fixed
- 뷰포트 기준. 스크롤을 움직여도 같은 위치에 고정.
- header, 하단 top 버튼에 사용.
▷ sticky : 기본값과 차이가 없어 보이지만 스크롤 액션이 발생하면 같은 위치에 고정된다.
▶ z-index
- static 상태에서는 적용 불가. 값이 클수록 위로 배치된다.
- 부모가 z-index를 높여 자식 앞으로 나올 수 없지만, 자식은 z-index를 음수값으로 주고 부모 뒤로 갈 수 있다.
- 유지보수를 위해 100 단위로 작업하면 좋다.
생각 더하기
+ 협업 대상에 따라 모두가 이해할 수 있는 가독성 높은 코드가 좋다.
+ 어르신들이 많이 사용하는 사이트는 '회원가입 하러가기', '클릭하기'처럼 동작 작동이 표현되는 텍스트를 사용해야 한다 (영어 사용 X). 버튼을 누르고 싶게 디자인하는 것이 중요.
+ 누군가를 소외하지 않겠다는 사명감을 가진 개발자가 되자.
+ 하위 버전도 대응할 수 있는 다양한 기술을 보유해야 한다.
+ 컨텐츠의 변화 가능성을 고려하며 작업하기.
