HTML/CSS 두번째 수업
오늘은 HTML/CSS 두번째 수업날이었다. 역시 오늘은 어제보다 수업내용이 더 좋고 유익했다. 자 그럼 오늘 수업내용을 정리해보자.
float
이전 시간에 float를 활용해서 화면의 layout을 배치하는 방법에 대해서 배워보았다. float를 지정함으로써 발생하는 레이아웃의 무너짐 현상을 예방하는 float 해제방법에 대해서 여러 방법을 알아보았다.
관련내용은 아래의 포스팅에 정리를 해두었으니, 참고하면 좋을 것 같다.
https://leehyungi0622.github.io/2021/02/23/202102/210223-float_til/
flex
flex에 대한 내용은 별도의 포스팅에 정리를 할 예정이다. flex는 float를 사용해서 힘들게 했던 화면 레이아웃의 배치를 좀 더 간편하게 할 수 있도록 도와주는 CSS display 속성중에 하나이다.
웹 페이지 분석을 통한 Header의 구성
구체적인 Header 구성도는 아래에 첨부한 노트의 내용을 확인하고, header태그의 내부구조는 <h1>태그의 내부에 a(anchor) 태그를 넣고 그 내부에 img태그를 넣는 구조로 내부구성을 하였다. 이미지 태그의 로고 이미지 구성에 관한 내용은 아래에 작성한 퍼포먼스를 고려한 웹 개발 부분을 참고하자.
시맨틱 작성과 UX
시맨틱(semantic) 요소를 화면에 구성할때에는 사용자 경험(UX)을 고려해서 배치해야 한다. 예를들어, 네이버 로그인 페이지의 로그인 상태 유지하기 버튼은 아이디와 패스워드를 입력하고 Tab키를 눌렀을때에 자동으로 해당 section으로 이동을 하고, 선택된 후의 그 다음 이동은 로그인 버튼이 될 수 있도록 해야한다.
Reset style CSS
기본적으로 HTML 태그들은 default로 적용된 스타일이 있다. 이러한 기본 스타일 속성은 개발시에 번거롭기 때문에 이미 정의되어있는 CSS Reset 코드를 가져와서 HTML태그의 default 스타일들을 초기화한 상태로 개발을 시작한다.
Normalize CSS : https://necolas.github.io/normalize.css/
CSS 단위
- em (equal m) : 지정 사이즈를 상위 parent 태그의 사이즈를 기준으로 한다. 예를들어 2em은 상위 parent 태그 사이즈의 2배이다.
- rem (root equal m) : 지정 사이즈를 최상위 루트(body) 태그에 정의된 사이즈를 기준으로 한다. 예를들어 body 태그에서 10px을 지정했고, 하위의 다른 태그에서 2em을 지정한다면, 20px을 지정한 것과 동일한 효과를 낸다.
웹 접근성을 고려한 웹 개발
오늘 들었던 수업내용들 중에서 제일 인상깊었던 수업내용이 웹 접근성을 고려한 웹 개발이었다. 이전에 공부했을때 img 태그의 alt 속성이 스크린 리더를 사용하는 시각 장애인들을 위한 부분이라는 것은 익히 들어 알고 있었지만, 강사님을 통해 좀 더 심도있게 웹 접근성을 고려한 웹 개발에 대해서 배울 수 있었던 것 같다.
이 웹 접근성이라는 부분이 대단한 것이 아닌 표준을 지키면 접근성 높은 웹 개발은 자연스럽게 따라 올 수 있다는 것을 오늘 배울 수 있었다.
예를들어, 웹 페이지의 최상단에 있는 Logo img 태그의 alt(대체 텍스트)를 통해서 웹 접근성을 살펴보자.
HeadingsMap을 통해서 살펴보면 트리구조의 최상단 이름에서 heading이름을 확인할 수 있는데, 보통 사이트의 최상단에 위치되어있는 Logo의 img태그의 alt(대체 텍스트)를 통해 정의되어있음을 알 수 있다.
만약, Logo의 img태그의 alt(대체 텍스트)를 정의하지 않으면, 작성한 HTML 코드의 유효성 검사시에 warning이 발생한다. 이는 표준에 어긋나는 태그 사용으로인해 발생한 경고 메시지이다.
HTML 파일의 유효성 검사 사이트 : https://validator.w3.org/nu/#file
앞에서 살펴본 내용은 alt(대체 텍스트)가 설정되어 있지 않음을 HTML 태그의 표준화라는 시각으로 바라보았지만, 사실 이 부분은 스크린 리더를 사용하는 시각 장애인들에게 매우 중요한 부분이다. 스크린 리더를 사용해서 웹 페이지를 읽어보면 화면 구성에 있는 이미지는 이 alt(대체 텍스트)를 통해서 읽히고 설명된다.
하지만 대부분의 개발자들은 img태그에서 alt(대체 텍스트) 속성에 대한 정의하지 않고 있고, 이러한 문제로 인한 정보접근 차별에 대해 4년전에 소송되었다가 최근에 판결이 나왔다고 강사님으로부터 이야기를 들을 수 있었다.(기사 캡쳐첨부) 그러던 중에 문득 이전에 시간이 날때마다 봉사활동을 다녔었던 기억이 났다. 지금은 시간이 없다고 봉사활동을 따로 하지 않고 있다. 하지만 개발 일을 본격적으로 시작하게 된다면 항상 이러한 정보 접근성의 차별이라는 문제점을 인지하고, 웹 접근성을 고려한 웹 개발이 가능한 그런 개발자가 된다면 따로 시간을 내서 봉사를 하지 않아도 내가 개발한 웹 어플리케이션을 통해서 또 다른 의미에서 봉사활동을 할 수 있다고 생각한다.
접근성을 고려한 태그
페이지를 구성할때 h 태그를 사용해서 해당 부분에 대한 타이틀 텍스트를 넣어주게 되는데, 화면의 CSS를 제거하게 되면 화면에 보이지만, 웹 페이지상에서는 숨겨져서 보이지 않게 된다.
이는 accessibility에 따른 작성으로, 이렇게 작성을 해주는 부분의 class이름은 .a11y-hidden과 같이 지정을 해서 컨트롤한다. 클래스 이름은 각 회사/기관에 따라 다르게 지칭한다.
퍼포먼스를 고려한 웹 개발
퍼포먼스를 고려한 웹 개발의 예로 header에 위치한 Logo의 이미지 배치에 대해서 살펴보자.
이 Logo이미지를 단순 이미지로 처리할지, 배경 이미지로 처리할지 두 가지 측면에서 살펴볼 수 있는데, 각 각의 방법에 있어 다른 퍼포먼스를 보인다.
우선 화면크기에 따라 Logo를 다른 해상도 이미지로 화면에 출력하려면 다양한 해상도의 이미지 파일들을 준비해야 한다. 이렇게 되면, 문제점이 화면의 크기가 달라질때마다 매번 다른 해상도의 사진 파일을 서버에 요청을 하게 된다. 이렇게 서버로의 요청이 많아지면 퍼포먼스에 치명적인 문제를 야기한다.
Logo 이미지를 배경으로 처리하는 방법으로는 다양한 해상도의 이미지를 화면에 미리 표시하고 CSS로 visible/invisible을 컨트롤 하는 것이다. 이렇게 처리를 해주게 되면, 앞서 살펴본 방법보다 더 나은 퍼포먼스를 가진 웹 페이지를 개발할 수 있게 된다.
Positioning
static : position의 default 속성값은 static이다.
absolute : absolute로 지정한 태그 요소가 움직이는 기준을 position이 static이 아닌 parent 태그가 기준이 된다.
relative : normal flow의 특성을 유지하는 특성을 지닌다.
fixed : view port를 기준으로 움직인다.
sticky : relative와 fixed의 장점을 합친 position의 속성값이다.
remind를 위해 수업시간에 필기했던 노트를 첨부한다.
