웹의 두 기둥 HTML과 CSS [웹디자이너를 위한 HTML5], [새로운 CSS 레이아웃]
지금의 html과 css는 정말 많은 기능을 지원하고 있다.
하지만 태초의 html에서 지금의 html이 되기 까지는 정말 많은 사람들의 노력이 들어갔다.
그리고 css없는 안쓰럽던 html문서에서 css가 더해지면서 지금의 아름다운 웹페이지들이 만들어 졌다.
웹을 지탱하는 두 기둥인 HTML과 CSS에 대해 알아보자. (물론 JS도 빼 놓을 수 없다.)
먼저 html의 중요한 태그들을 알아보자!
a태그
a요소는 일반 텍스트를 하이퍼텍스트로 바꿔준다
HTML5에서는 a요소 안에 여러 요소를 넣을 수 있다.
a안에 a를 넣을 수는 없다
section태그
section요소는 연관된 컨텐츠를 묶을 때 사용한다.
블로그 포스트나 기사처럼 콘텐츠 영역을 독립적으로 배포할 수 있는 경우 article요소를 쓴다.
header태그
header는 사이트 설명이나 탐색에 도움이 되는 요소를 묶을 때 사용한다.
한 문서 안에서 여러 개의 header가질 수 있다.
header가 꼭 최상단에 있을 필요는 없고 요소 위치가 아닌 내용에 따라 header태그를 쓸 지가 결정된다.
footer태그
footer도 태그 위치가 아닌 페이지를 만든 사람, 저작권 정보, 연관된 컨텐츠에 대한 링크 등의 정보를 포함하는 내용을 표현할 때 사용한다.
그리고 한 문서에 footer가 여러 개일 수 있다.
aside태그
aside도 위치가 아니라 본문과 별 관련 없는 컨텐츠일 때 사용해야 한다.
aside 컨텐츠를 없애도 된다면 aside요소를 사용하면 된다.
nav태그
nav요소는 메뉴 바처럼 탐색 정보를 위한 요소다.
nav요소 안에는 페이지 전반에 걸친 중요한 탐색 정보를 넣어야 한다.
주로 header 안에서 볼 수 있다.
article태그
article은 블로그 게시글, 뉴스기사, 짧은 의견, 리뷰, 포럼 글 등에 적합하다.
article과 section 차이점은 독립적으로 쓰일 수 있는지이다.
section은 다른 어떤 것의 일부를 구성하고, article은 스스로 온전히 자신을 구성한다.
section안에 여러개 article쓸 수도 있고 article안에 여러개 section쓸 수도 있다.
canvas태그
canvas는 동적인 이미지를 만들 수 있다.
동적이라는 말은 브라우저에 의해 처리된 이후에도 바뀔 수 있다는 말이다.
아무 때나 업데이트 할 수 있고 사용자의 행동으로 새로운 내용을 만들어낼 수 있다.
canvas덕분에 플래시 등의 플러그인 없이 만들수 없던 게임 등을 플러그인 없이 만들 수 있게 되었다.
하지만 canvas는 DOM이 없는데 스크린 리더는 DOM을 이용하므로 canvas에 접근 불가하다.
따라서 웹접근성을 고려하여 컨텐츠를 canvas에만 넣지 않도록 해야한다.
canvas는 픽셀 단위로 이미지 정보를 처리한다.
svg태그
svg도 canvas와 동일한 모양을 만들 수 있는 xml파일 형식이다.
xml은 텍스트 기반 데이터 형식이므로 스크린 리더에서 접근 가능하다.
벡터방식을 기반으로 이미지 정보를 처리한다.
HTML5에 추가된 태그들로 의미를 드러내어 마크업을 하면
더 많은 사람들이 웹사이트를 더 잘 이용할 수 있으니 의미를 항상 생각하면서 마크업하자.
css의 자주 쓰는 속성들을 알아보자!
display
block으로 설정하면 컨테이너 너비만큼 넓어지고 매 요소가 새로운 줄에 표현된다.
inline 요소는 공간이 있다면 다른 요소 바로 뒤에 표시된다.
inline-block은 block처럼 width, height를 설정할 수 있는데,
공간이 있다면 요소가 새로운 줄에 표현되지 않고, 다른 요소 바로 뒤에 표시 된다.
position
요소에 position 속성이 적용되어 있지 않다면 기본적으로 static으로 설정된다.
static이라면 코드 순서대로 표시된다.
relative라면 static일때의 위치에서 offset만큼(top, bottom, left, right에 값을 준 만큼) 이동한다.
그리고 position relative를 하면 새로운 컨테이너 블록이 된다.
따라서 position absolute를 하고 싶을 때 기준이 될 요소에 position relative를 해주면 된다.
position을 absolute로 설정하면 자신이 포함된 컨테이너를 기준으로 오프셋만큼 이동한다.
position을 fixed로 설정하면 화면상에서 스크롤을 해도 고정된 위치에 존재한다.
Fixed는 뷰포트 기준으로 오프셋을 설정한다.
이 때 뷰포트는 기기화면에 표시되는 영역을 의미한다.
position을 sticky로 설정하면 스크롤 되기 전에는 정적요소처럼 동작하고 문서 스크롤이 일정위치에 도달하면 fixed처럼 동작한다.
margin
블록을 중앙에 배치할 때 좌우에 margin 을 auto로 주는 방법이 있다.
margin을 auto로 하면 margin이 사용가능한 공간을 최대한 차지한다.
자주 사용되는 레이아웃에 대해서도 알아보자.
flex layout
Flex는 1차원 레이아웃이어서 row나 column을 따라 배치할 수 있고,
row와 column을 동시에 제어하려면 2차원 레이아웃인 grid layout을 사용해야 한다.
flex item크기를 조절하려면 아이템 자체에 flex-grow, flex-shrink, flex-basis와 같은 속성을 사용해야 한다.
flex속성(https://developer.mozilla.org/en-US/docs/Web/CSS/flex)을 사용해서 플렉스 아이템 사이의 크기 비율을 정할 수 있다.
flex-basis값 만큼씩 일단 분배하고, 남는 공간을 flex값에 따라 비율에 맞게 분배한다.
grid layout
grid-template-areas를 사용하면 그리드 아이템을 css만으로 편리하게 옮길 수 있다.
따라서 프로토 타이핑 단계에서 grid-template-areas를 이용해 배치해보고,
결정되면 마크업으로 돌아가서 코드의 순서를 보이는 순서와 일치하게 다시 배치하는 방식으로 작업하면 좋다고 한다.
grid layout에서 너비가 허용하는 한 최대한 많은 컬럼을 채워넣으려면 repeat(auto-fill, 칼럼 너비)를 사용하면 된다.
grid-auto-flow는 기본값이 row다.
왼쪽에서 오른쪽으로 읽는 언어에서 그리드 컨테이너의 왼쪽 위에서 오른쪽으로 칸을 채워나가고한 줄이 다 차면 다음 줄을 채운다.
만약 grid-auto-flow를 column으로 설정하면 아이템들을 왼쪽에서 오른쪽 으로 읽는 언어에서는 왼쪽 위부터 아래로 줄을 채워나가고 한 줄이 다차면 다음 줄을 채운다.
grid-auto-flow 를 dense로 설정하면 아이템들이 빈 공간을 채우면서 소스코드 순서와 배치 순서가 일치하지 않을 수 있다.
갤러리처럼 논리적 순서가 필요치 않은 경우에 적합하고, 논리적 순서가 있는 경우 주의해야 한다.
칼럼 너비를 minmax함수를 이용해서 정해줄 수도 있는데, minmax('너비', 1fr)을 사용하면 한 아이템이 '너비' 이하로 줄어들지 않으면서 꽉차게 표현할 수 있다.
그리드에서는 fr을 사용해 공간 분배 비율을 정할 수 있다.
flex와 grid 공통적으로,
~items는 아이템들 자신의 영역 내에서 배치를 조절하고
~content는 컨테이너 내에서 아이템들의 배치를 어떻게 할지를 조절한다.
또한 둘 다 모두 시각적인 순서 재배열이 문서의 논리적 순서를 바꾸지 않는데, 키보드로 웹을 탐색할 때 시각적 표현 순서가 아닌 소스코드 순서를 따르기 때문에, 소스코드에 나타난 순서와 다른 순서로 요소를 표현할 때는 주의해야 한다.
order로 아이템의 순서를 결정할 수 있고, order의 기본값은 0이다.
order 또한 시각적 순서만 바꿀 뿐이므로 주의해야한다.
책을 통해 처음 알게 된 내용들을 소개합니다.
물리적 속성과 논리적 속성
offset에 사용하는 left, right, top, bottom은 화면의 물리적 위치를 나타내는 물리적 속성이다.
물리적 속성은 글쓰기 모드에 따라 바뀌지 않는다.
flex-start 와 같은 배치와 관련된 속성 값들(~start, ~end 등)은 글쓰기 모드에 따라 적절히 배치되는 논리적 속성에 해당한다.
논리적 속성은 언어 방향에 영향 받는다.
따라서 글쓰기 모드가 바뀔 때 논리적 속성은 알아서 반영이 되지만 물리적 속성은 반영되지 않으므로 주의해야 한다.
쿼리
미디어 쿼리
화면 크기나 종류의 지원을 확인할 수 있게 해준다.
피처 쿼리
css기능을 지원하는지 확인할 수 있게 해준다.
마치며.
결국 HTML, CSS를 잘 사용한다는 것은 모든 사용자를 고려하는 코드를 짠다는 말이다.
HTML문서는 각 요소의 의미를 드러내어 문서를 작성하도록 하고,
화면상 배치와 코드상 배치가 일치하게끔 작업해주는 것이 필요하다.
CSS는 글쓰기 모드에 따라 영향을 받지 않아야 한다면 논리적 속성을 주로 이용해 작성을 하는 것이 좋다.