Nyong's Blog
0%

201026_TIL(margin 병합 현상, Tab UI)

Posted on Edited on In

오늘 한 것

margin 병합 현상

  • margin은 외부 여백을 뜻한다.
  • margin 병합 현상은 block 속성을 가진 요소들이 상하로 쌓일 때, 마주보는 부분의 margin이 병합되는 현상을 뜻한다.
  • margin은 마주보는 블록 중 margin 값이 큰 블록의 margin만 적용되는 속성을 갖고있다.
  • 예를 들어 A 블록의 margin-bottom: 20px; B 블록의 margin-top: 10px;일 때 두 블록 사이는 20px + 10px로 30px 이어야하지만 실제로는 20px만 적용된다.
  • 이는 부모와 자식 요소 간의 margin에도 영향을 미친다.
  • margin 병합 현상은 원래 블록 요소가 상하로 쌓일 때, 간격을 일정하게 유지하기 위해 생긴 기능이지만 가끔 이런 현상으로 불편을 겪을 때도 있다.

margin 병합 현상 해제

  1. flex 속성을 부여하면 margin 병합 현상이 발생하지 않는다.
  2. 자식 요소에 inline-block 속성을 부여하면 발생하지 않는다.
  3. 부모요소에 overflow:hidden을 설정하면 발생하지 않는다. 이는 overflow에 의해 BFC를 부모요소가 생성하기 때문이다.

background: linear-gradient

1
2
background: #ccc linear-gradient(#ccc, #eee);
/*앞에 ccc를 또 붙이는 이유는 linear가 안될때를 상정해서 기본값을 정하기 위함이다.*/
  • 위와 같이 linear-gradient 속성값을 통해 배경 이미지를 지정하지만 그 앞에 fallback을 위해 배경 색상인 #ccc를 또 붙여놨다.
  • 그 이유는 브라우저마다 배경 이미지의 linear-gradient속성값을 지원하지 않거나 배경 이미지를 불러오지 못 하는 경우가 있는데, 이때 앞에 미리 붙여둔 배경 색상이 기본색상으로 지정되어 브라우저 호환성 문제를 부분적으로 해결할 수 있다.

Tab UI

  • 탭 인덱스를 만들 때는 <ul role=”tablist”> 다음과 같이 role="tablist 속성을 통해 만들 수 있다.
  • <li tabindex=”0”> tabindex를 통해 탭 포커스 가능하게 만들어주지만 논리적인 흐름을 방해하기 때문에 좋지 못 하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--그렇기 때문에 아래와 같이 aria=controls 속성값을 이용한다.-->
<ul role="tablist">
  <!--role="none" 이면 역할이 없다는 의미이다. -->
  <!--aria-controls와 tabpanel의 id가 연결된다. -->
  <li role="”none”">
    <a
      role="”tab”"
      id="tab01 aria-controls=”section01” id></a></li>

<!--- tab list 내부 하위 목록은 tab panel이다. -->
<!--- tab의 id 값과 본문의 aria-labelledby가 이어진다. -->
<section role=”tabpanel"
      id="section01"
      aria-labelledby="”tab01”"
    >
    </a>
  </li>
</ul>

ARIA 관련 gitHub
웹 접근성 연구소

기타

  • block 상자에 inline 상자가 배치될 때 배치 위치가 block 상자의 상단이기 때문에 하단에 gap이 발생한다.
  • 마크업 시 공간을 분리하고 세분화할 때는 암묵적 보다는 명시적으로 알려줄 필요가 있다. 예를 들어 form 안에서 label태그로 input태그를 묶는 암묵적 방식 보다는 따로 분리하는 것이 더 낫다. 또한 label태그로 input태그를 묶을 시 디자인 이슈도 존재한다.
1
2
3
4
5
6
/*암묵적*/
<label><input /></label>

/*명시적*/
<label for="nyong"></label>
<input id="nyong" />

  • <input required> 필수 입력 서식이라는 뜻이다. 값을 입력하지 않으면 form으로 전송되지 않는다.

  • border-bottom: 0;와 border-bottom-color: transparent;는 모두 동일하게 border의 밑변을 없앨 때 사용한다. 하지만 전자는 border의 굵기를 아예 없애버리는 반면 후자는 border의 밑변이 존재하지만 색상이 투명색이라 보이지 않을 뿐이다.

  • line height로 인해 옆 이미지와 높이가 평행하지 않을 때는 margin을 음수값을 줘서 맞출 수 있다.

오늘 느낀 것

  • margin 병합은 처음 의도는 편기함을 위한 기능이었을 텐데 지금은 나를 괴롭힌다..

  • 마크업은 쉽지만 CSS가 어렵다.. CSS는 할만하지만 마크업은 모르겠다.. 사실 둘 다 어렵다. 언제쯤 익숙해질까?

  • 포기하지말자 어렵고 이해 안되고 힘들더라도 일단 끝까지 해보자 분명 어느 순간 이해를 꿰뚫는 날이 올테니!

  • 새로 시작하는 한주도 ‘즐코’하자!!

Nyong’s GitHub