CSS정리 - 2019.04.18

CSS의 클래스 명명규칙

- bluetext, lightborder와 같은 클래스명은 최악이다. 왜냐하면 이런 이름은 언제든지 바뀔수 있기 때문이다.(블루가 아니라 레드텍스트인경우?)

반면에 warning, important, downloadimage와 같은 클래스명은 좋은 명명법이다. 왜냐하면 주의, 중요함, 다운로드 이미지라는 이름의 태그 안에 어떤것이 들어가던지 이름을 바꿀 필요가 없기 때문이다.

 

• 웹 표준은 웹에 관한 표준 규격임.
• 과거에는 표준에 대한 정의가 부족했고, 절대적인 점유율을 가진 IE가 표준을 준수하지 않아 표준에 대한 인식이 낮았음.
• 현재 나오고 있는 최신 브라우저들은 대부분 웹 표준을 준수.
• 때문에 웹 표준을 준수하는 것은 소스의 지속성을 길게하고, 보다 견고하고 쉬운 유지보수를 제공.
• 웹 표준의 기본은 내용(HTML)과 외형(CSS), 동작(JS)의 분리.
• HTML의 표준은 인라인 요소와 블럭 요소를 잘 구분하여 사용하면 대부분 준수. 여기에 몇 가지 태그(p, ul, ol, dl 등)만 주의하면 웹 표준은 거의 준수.
• HTML 마크 업의 표준 검증은 W3C 마크업 검증 서비스를 이용하면 편리.

각 브라우저별 렌더링 엔진

a태그 가상 선택자 선언 순서

':link > :visited > :hover > :active' 순으로 위치하는 것이 제일 효율적입니다.(큰 범위에서 작은 범위로, 여러개의 a태그가 있을때 선택 안된 링크 > 선택 된 링크 > 마우스 올린 링크 > 클릭된 링크 개수대로 범위가 좁아지므로)

 

- 형제, 자식, 형제 일반 선택자등은 IE6에선 지원되지 않는 CSS이다.(IE6,IE7 호환을 위해 최대한 일반적인 선택자를 사용해야 한다.)

- :first-child, 

- focus 가상 선택자는 키보드 탭키로 요소를 이동할때 포커스가 걸리면 선택되는 선택자이다.(a태그나 form에서 input에 키보드 tab키로 이동 가능하다)

 

- @import나 link태그로 css를 분리해서 관리할수 있지만 @import는 거의 사용되지 않는다. 왜냐면, @import로 중첩된 css는 유지보수 하기가 더 어렵기 때문이다.

- 또한 link태그는 웹사이트 로딩시 병렬로 다운로드 되지만, @import태그는 차례대로 직렬로 다운받기 때문에 페이지 로딩시간을 길게 만든다.

- 그렇다고 css파일을 무조건 여러개로 분리하는게 좋은것만은 아니다(물론 나누면 관리하기는 편해진다). 왜냐면 웹페이지 로딩시 여러개의 css파일을 서버에 요청-응답 해야 하기 때문이다.

 

- css간의 우선순위는 다음과 같다.(중요도 높은순)

1. 사용자가 브라우저에 입력한 css 중 !important가 붙은 속성

2. 개발자가 만든 css

3. 기본 브라우저의 css(a태그 색상, h1의 진하게 등..)

 

important속성을 css에 남발하기 보다는 css를 잘 구조화 시켜서 최대한 사용을 금지해야 한다. (응급 상황에서만 사용)

개발자가 작성한 css내에서의 우선순위는 해당 선택자가 커버하는 범위가 좁을수록 높은 우선순위를 갖는다.

예를들어 a태그에 style을 직접 때려 넣는 방법이 우선순위가 가장 높다 .왜냐하면 그 style은 해당 태그에만(매우 좁은 범위) 커버하기 때문이다.

 

- 국내 웹 접근성 연구소 지침에서는 스크린 리더를 위해 display:none보다는 visibility:hidden를 권장하고 있습니다.

- float라는 속성은 전에 살펴봤지만, 기본적으로 요소가 띄워지게(floating) 만드는 속성을 가지고 있습니다. 그렇기 때문에 요소가 띄어진 상태에서는 그의 부모 요소가 해당 요소를 인식하지 못합니다. 오로지 float되지 않은 요소들만 인식하여 포함합니다.

 

<div class="float-frame">

  <div class="float-unit">A</div>

  <div class="float-unit">B</div>

  <div class="float-unit">C</div>

  <div class="float-unit">D</div>

  <div class="clear"> </div>

</div>

 

임의의 요소를 추가하여 부모 block이 자식 float들을 인식 시키게 하는 방법

여기서 우리는 이 div.clear요소를 떠있는 요소 아래로 위치시킬 수 있는 속성을 하나 배웠습니다. 네, 바로 clear 속성입니다. 이 속성은 float를 해제하여 새롭게 줄 바꿈을 시작해 줍니다. div.clear에 clear:both 속성을 넣어주도록 합니다. 그리고 아까 임의로 넣은 높이 값과, 배경 색을 없애보면, 정확히 의도하는 대로 보여지는 것을 확인할 수 있습니다. (참고로 만약 span같은 인라인 요소를 사용했다면, display:block 속성을 추가하여, 블록 요소처럼 만들어 주셔야 합니다. 또는, span대신 br 요소를 사용할 수도 있습니다.)

overflow를 이용하는 방법(IE7 이하 불가)

부모 컨테이너 안에 자식 여러개가 float으로 들어가있다고 해보자. 이 상황에서 부모에 overflow:hidden을 적용한 뒤 자식들이 각각 마진 10씩 갖는다고 하면, 그 마진이 부모 내부에서 갖게 되면서 마치 부모에 패딩을 넣은 효과가 난다.

부모에 이 overflow:hidden을 적용하면 float속성을 가지게 되면서 부모를 벗어나게된 자식들을 부모가 다시 인식할 수 있다.

테두리1px, overflow:hidden인 경우에는 자식의 마진이 마치 부모의 패딩처럼 동작하지만, overflow:visible인 경우는 그냥 자식의 마진이 부모의 마진인것 처럼 동작함.

float된 요소는 자기 내부에 있는 float을 인식 할 수 있다. 그렇기 때문에 또 한번 상위 float에 overflow:hidden을 줄 필요가 없다!!

 

float스타일을 줄 때, (clear:both또는 overflow:hidden을 통해서) 스타일을 준 요소의 상위 요소가 해당 요소를 온전히 감쌀 수 있도록 하는 습관을 들인다면, 레이아웃을 잡는 일은 전혀 어려운 일이 아닐 것입니다.