210302 HTML/CSS TIL - 레이아웃 구성 순서, 태그 배치도를 그릴때는 태그의 특성이 보이게 그리기, 요소배치는 최대한 논리적 순서를 유지한 상태에서 하기, figure 태그, anchor 태그의 대체 텍스트, :root{}를 활용한 스타일 속성의 변수선언(재사용성), CSS 전처리기의 종류 및 장/단점, 실무에서의 스타일링 방법, positioning에 따른 element의 성격 변화, rgba()와 hsla()의 사용법, 1px보다 얇은 디자인, 스프라이트 기법 (CSS Sprites), aria-label과 IR 기법

HTML/CSS

HTML/CSS 여섯 번째 수업

오늘은 HTML/CSS 여섯 번째 수업날이었다. 오늘도 많은 유익한 내용들을 배울 수 있던 날이었다. 이 모든 것들을 내 것으로 만들기 위해 끊임없이 노력하자.

레이아웃 구성할 때는 콘텐츠의 논리적 순서 흐름을 파악하고 나서 구체적인 태그의 배치(시맨틱 마크업)를 고려한다.

이 내용에 대해서는 HTML/CSS 수업 초반에 강사님께서 강조해주셨던 내용이다. 지금은 개인적으로 레이아웃 설계 연습을 할 때도 항상 되뇌이면서 연습을 하고 있다. 오늘 이 부분에 대해서 강사께서 어쩌면 실무에서 일을 하면서 이러한 콘텐츠의 논리적 순서를 고려하지 않고 레이아웃을 단순 디자인적 관점에서 보게 될 수도 있고, 상황에 따라서는 타협을 해야 될 때가 온다고 하셨다. 이럴때에는 최소한의 접근성을 고려해야 되는 요소만은 지켜서 레이아웃을 설계하면 된다고 하셨다.

콘텐츠의 논리적 순서 → 시맨틱 마크업 → Class 네이밍

Read more