Skip to content

Latest commit

 

History

History
177 lines (158 loc) · 16.2 KB

20210223.md

File metadata and controls

177 lines (158 loc) · 16.2 KB
Raw

HTML5 and CSS3

지난 시간 되돌아보기

HTML(구조를 만드는 언어) + CSS(디자인 언어) + JavaScript(동작 언어) 중 우리는 HTML과 CSS를 배우고 있다. Js가 물론 굉장히 중요하고 파워풀해졌지만 여전히 HTML과 CSS를 잘 짜는 것은 중요하다.

HTML 구조(structure) 설계 시 고민해야 하는 부분

  1. 논리성: (디자인 배제) 컨텐츠 전달구조는 근거가 있어야 한다.
  2. Semantic Mark-up: div를 남발하지 말고 기능에 맞는 태그를 사용하라.
  3. 적절한 naming: class 이름을 적절하게 부여하라

CSS 디자인 시 고민해야 하는 부분

  1. 레이아웃 설계: 하위호환성을 고려하여 (cross browsing issues) 어떤 속성을 쓸 것인지 (e.g. IE를 안고 갈것인지 버릴것인지에 따라 IE호환이 안되는 flex를 쓰거나 float를 쓰는 것을 결정)
  2. 공용 스타일: 중복되는 스타일을 유지보수 시 편리하게 관리하기 위해 어떻게 공용스타일을 설정할지 고민
  3. 성능: 렌더링 시 너무 느리거나 과도하게 중복되어 입혀지지 않도록 CSS에도 성능 고민이 필요

float로 잃어버린 높이 찾는 방법들

  1. 부모 요소에 overflow: hidden;을 주는 방법
  • 이 때 부모 요소는 그 안에 만들어진 모든 요소를 포함하는 BFC(Block Formatting Context)가 된다는 이슈가 있다.
  1. float 요소들 뒤에 빈 div를 만들고 clear: both;을 해주는 방법
  • 매번 굳이 빈 요소를 mark-up에 넣는건 비합리적이고 지저분한 코드라는 단점.
  1. pseudo element selector(가상요소선택자)를 만들어 clear해주는 방법
  • .main::after { content:""; display:block ; clear:both;}
  • 부모요소에 .{부모요소클래스}::after라는 selector을 넣어주면 빈 가상요소가 생기는데, 이는 <span>을 넣어준 것과 동일한 역할이나, 스크린 상에서는 보이지 않는다.
  • <span>이기 때문에 inline요소이며 비어있으면 clear가 안된다. clear를 가능하게 하기 위해 display:block;으로 성격을 바꿔주고, content: ""으로 공백내용을 넣어준다.
  1. 부모요소를 float시켜주는 방법
  • 부모요소가 float하면서 떠오르기 때문에 상위 요소들과 또 교통정리가 필요하다는 단점이 있다.
  • 하지만 이중 float를 통해 요소들의 순서 배치를 마구 사용자화 하는 경우 등 유용한 활용도 가능하다.

여백 할당

지난 시간에는 body에 기본으로 들어간 agent(=browser) margin 8px을 제거해주었다.

  • margin은 collapse하기 때문에 자식요소에 margin을 넣어도 부모요소에게 별도의 border을 깔아주지 않으면 부모요소 밖의 요소와 사이가 뜰 뿐 부모요소와의 사이에 margin이 들어가지 않는다. 부모요소에게 안쪽 여백인 padding을 주어야 부모요소와 자식요소 사이 여백이 할당된다.
  • 현 상태에서 부모요소인 main에 padding을 주었더니 좌우로 상자너비가 삐져나오면서 width가 940+패딩너비가 되어버린다. 어떻게 해결할 수 있을까?
    • wrap div 만드는 방법: main의 자식이자 group의 부모요소로 div.wrap을 추가해주고 width를 auto로 하면 부모의 너비인 940이 되며, 이 wrap div에 padding을 주면 부모 요소인 main의 940 width값을 넘어가지 않는 채로 안쪽 여백이 들어간다. (그래서 사이즈가 줄어들수밖에 없는 모바일에서는 보통 최상위 wrap div와 그 밑의 wrap div를 만들고 안쪽 wrap에 padding을 주는 방식 많이 사용) 그러나 div를 2개씩 만드는 건 너무 피곤한 일이다.
    • BOX SIZING이라는 CSS 속성을 이용하는 방법: border-box라는 속성을 부여하여 박스너비가 margin을 포�함하지 않도록 한다.
      • content-box (total box size = width+padding+border): 따로 선언하지 않으면 box-sizing 속성의 디폴트 값으로 설정되어 있으며 부여한 width는content만 기준으로 하기때문에 padding이나 border, margin을 주면 그 이상으로 box-size가 늘어난다.
      • border-box (total box size = width(including padding+border)+margin): box width는 부여한 값으로 고정되며 여기서 border나 padding을 주면 width의 안쪽으로 경계선과 여백이 들어간다.
      • border box는 모바일에 굉장히 유용하지만 특정 요소만 사용하는 경우 유지보수에 굉장히 귀찮아지므로, 모두 선택하여 border-box로 해주거나(body *{box-sizing: border-box;} 또는 [class] {box-sizing: border-box;}) 아예 안쓰거나.

flex 기법

modern layout으로 불리는 유연한 박스모델. flex container의 역할과 flex items의 역할만 구분하면 어렵지 않다.

  • flex container: 배치를 하고자 하는 요소들의 부모요소에게 지정.

    • display: flex를 하면 일반 블록이 아닌 flex container로 바뀌고, 자식요소는 알아서 flex item이 된다.
    • 배치하려는 각 요소를 float 설정해줘야 했던 이전 방식관 달리 부모 요소를 건드려야 한다.
    • flex-direction: flex items의 정렬기준과 흘러가는 방향 설정
      • row(default): x축 좌-우 (순방향)
      • row-reverse: x축 우-좌 (역방향)
      • column: y축 상-하 (순방향)
      • column-reverse: y축 하-상 (역방향)
    • justify-content: flex items를 본 축 기준 정렬방식 및 여백 설정
      • flex-start(default): 축의 맨 앞쪽부터 정렬
      • flex-end: 축의 맨 뒤쪽부터 정렬
      • center: 축의 가운데로 정렬
      • space-between: 요소들 사이에 동일한 간격의 여백, 겉여백은 0
      • space-around: 요소들의 겉에 동일한 간격의 여백(겉여백 padding은 요소들의 사이 여백 gutter의 절반을 차지한다)
      • space-evenly: 모든 여백이 다 같은 값으로 설정(그러나 IE7 이후부터만 호환)
    • align-items: flex items가 한줄일 때 교차축 기준 정렬방식 설정
      • flex-start(default): 축의 맨 앞쪽부터 정렬
      • flex-end: 축의 맨 뒤쪽부터 정렬
      • center: 축의 가운데로 정렬
      • baseline: items의 text 첫 줄이 동일한 baseline을 갖도록 정렬
      • stretch: 축의 길이만큼 늘림
    • flex-wrap: 요소가 많아서 넘칠 때 처리하는 방식
      • nowrap(default): 요소들의 크기를 container에 맞게 줄이기
      • wrap: 요소들을 다음 줄로 넘기기
      • wrap-reverse: 다음 줄로 넘기되 역방향.
    • align-content: flex items이 여러 줄일 때 교차축 기준 정렬방식 설정.
      • flex-start(default): 교차축의 앞부터 정렬
      • flex-end: 교차축의 뒤부터 정렬
      • center: 교차축의 가운데로 정렬
      • stretch: 교차축 길이만큼 늘려주기
      • space-between: 줄사이에 동일한 간격의 여백, 겉여백은 0
      • space-around: 줄 사이와 겉에 동일한 간격의 여백(겉여백 padding은 줄사이 여백 gutter의 절반)
    • flex-flow: flex-direction과 flex-wrap 두가지를 한번에 지정하는 shorthand

  • flex items: flex container로 지정된 요소의 자식요소들

    • order: default인 0보다 작은 값이면 앞쪽, 큰 값이면 뒤쪽이며 숫자 크기대로 순서가 매겨진다
    • flex-grow: default인 1보다 크면 다른 요소들보다 그 배수만큼 더 큰 값을 갖는다.
    • align-self: container의 align-items 속성값에 상관없이 혼자 교차축 기준으로 자신의 정렬을 바꿀 수 있다.

  • 참고할 사이트

Header Mark-up

  • 논리적인 순서 잡기
    • 로고(브랜딩) 영역과 멤버를 위한 안내링크 영역(홈, 로그인, 회원가입, ..., english), 그리고 메인 메뉴링크 영역(HTML에 대해, ..., 자료실)으로 나눌 수 있다.
      • 마치 보고서에 제목이 가장 먼저 큰 글자로 들어가듯 사이트의 이름인 로고 영역을 우선하는 것이 좋다.
      • 요즘에는 로고를 heading으로 보지 않는 경향도 있지만 로고를 heading으로 두는 경우 접근성을 확보하는 것에도 도움이 된다.

Header 코드 짜기

  1. 브랜딩영역
  • <h1>로 만들고 logo라는 이름을 붙인다.
  • 로고 이미지를 mark-up에 넣을지 CSS에서 배경이미지로 넣을지 결정.
    • mark-up에 넣는 경우 : 그래도 사이트에는 로고가 mark-up으로 있어야지! (우리는 이걸로 실습하자)
    • css 배경이미지로 넣는 경우 : viewport에 따라 로고가 바뀌는 responsive logo를 넣고 싶은 경우 markup에 넣으면 4번이나 서버에 요청해서 img소스값을 받아와야 한다. 배경을 이용하면 viewport에 따라 달라질 이미지를 미리 다 넣어두고 viewport 변화시 배경체계만 바꿔주면 되기 때문에 성능 상 이점이 있다.
  1. 안내 링크 영역
  • 각각 링크가 있는 li 태그로 만들어주기 위해 ul을 깔아준다.
    • div가 아닌 li로 하는 이유: div는 몇개인지 기계가 신경쓰지 않지만 ul은 li의 개수를 파악하며 신경써준다.
  • ul은 member라는 클래스명을 부여한다.
  1. 메인 메뉴링크 영역
  • nav 태그를 사용하며 mark-up 구조상 명기하는 것이 좋으므로 h2로 메인메뉴라고 써주고 숨김처리를 해주자.
    • 숨김처리는 클래스명을 'a11y-hidden(accessibility)'로 해주고 나중에 한꺼번에 처리해주기
# h1.logo>a>img		a태그 링크는 #로 해주고 img태그에 들어갈 이미지소스는 준비된 logo.png, alt는 'web cafe'
# ul>li*5>a[href="#"]

<header class="header">
  <h1 class="logo"><a href="#"><img src="./images/logo.png" alt="web cafe"></a></h1>
  <ul class="member">
    <li><a href="#">홈</a></li>
    <li><a href="#">로그인</a></li>
    <li><a href="#">회원가입</a></li>
    <li><a href="#">사이트맵</a></li>
    <li><a href="#">english</a></li>
  </ul>
</header>

브랜딩 영역

  • 로고 position default값은 static인데, absolute로 바꾸어 로고의 위치를 설정
    • 그전에 h1의 background-color을 넣어 불필요한 margin이 없는지 확인
      • 불필요하게 기본값으로 주어진 여백 등의 요소를 없애기 위해 과거에는 reset을 많이 사용했지만, 그러면 각 요소에 값을 부여할 때 reset 후 부여되는 만큼 성능이 떨어진다는 단점
      • 원래 있는 값을 유지하는 normalize 방식이 근래에는 많이 쓰이며, 원래 있던 여백 사이즈 등을 유지해주고 브라우저마다 다른 것들을 정규화해주어 적어도 비슷한 결과물을 기대할 수 있다.
    • 로고에 absolute로 position 값을 주니 float한 것과 같이 layer가 된다. float와 다른 점은 다른 요소의 content를 밀어내지 않고 그냥 덮는다는 것.
      • layer가 되면서 높이는 content의 높이인 이미지 높이만큼만 갖게 된다.
      • 위치는 top, bottom, right, left 를 써서 움직이는데, 이는 부모요소가 아니라 static이 아닌 position을 가진 가장 가까운 상위요소를 offset parent로 삼아 그 요소의 border를 기준으로 움직인다.
      • 우리는 여기서 부모요소인 header의 position을 relative로 고쳐서 absolute로 처리한 logo의 offset parent로 만들어준다.
    • 로고에 여전히 불필요한 margin이 밑에 있어서 보니 폰트사이즈 이슈!
      • h1이 agent(=browswer)이 부여한 폰트사이즈 2em을 갖고 있기 때문
      • em은 부모 요소의 fontsize의 배수이므로, 2em의 경우 별도의 세팅을 해주지 않으면 상위요소의 개수만큼 16px(최상위 요소의 default 폰트사이즈)*2^n배수의 폰트사이즈를 갖는다. 그러니 이를 부모 요소에 맞게 100%으로 해주자
      • 또다른 이유로는 line height가 있을 수 있다. line-height는 1로 두자.
    • .logo a, .logo img의 display값을 block으로 해준다...? (왜?...기억안남)

안내 링크 영역 위치 설정

  • 우상단으로 위치를 옮겨주기
    • flex로도 할 수 있지만 그건 각자 해보자.
    • 먼저 member li 선택하여 display: inline-block;으로 바꿔준다.
      • li의 원래 성격인 block은 한 줄을 다 차지하며 위에서 아래로 쌓이기 때문
      • 그렇다고 inline으로 주면 width, height, padding, margin을 줄 수 없다.
      • 그러니까 한 줄로 쌓이면서 w,h,p,m 줄 수 있는 block성격까지 가질 수 있도록 inline-block으로 설정!
    • member라는 ul에게 text-align: right;을 줘서 우측 정렬을 해주면 끝!
  • 이제 ul에 부여된 bullet points와 왼쪽 padding값을 없애준다.
    • member에list-style: none; padding-left:0;
  • 링크마다 파란색, 밑줄있는 것들을 제거해주자
    • 맨 위에 링크 스타일 주석 달고 a{text-decoration: none; font-color: inherit; 해주면 밑줄은 사라지고 부모요소의 폰트색깔 상속
  • member li를 inline block으로 처리한 후 보니까 각 li 태그 사이의 줄바꿈이 공백으로 인식되어 홈과 로그인 사이 공백이 생긴다.
    • 그렇다고 줄바꿈 없이 한 줄로 코딩할 수도 없는 노릇이고 이걸 어쩐다?
    • member의 font-size를 0으로 주고, li의 font-size를 16px로 주면 해결
    • 지정값이 싫다면 html{font-size:10px;}로 최상단에 폰트크기를 새로 지정 후 body{font-size: 1.2em}, .member li{font-size: 1.2rem}

안내 링크 마무리 처리

  • 텍스트 사이의 구분기호 : 넣어주기
    • .member li::before{content:":"}: li의 자식요소의 <a> 앞마다 스크린에는 보이지만 select에는 잡히지 않는 기호가 생긴다. 하지만 스크린리더는 읽어낸다.
    • mark-up에서 li 뒤마다 <span class="divider" aria-hidden="true">:</span>을 넣어주면 aria-hidden 때문에 스크린에는 보여도 스크린리더에는 읽히지 않는다.
      • c.f. alt="blah"를 넣어주면 스크린엔 안보여도 스크린리더엔 읽힌다.
  • 링크 영역 늘려주기
    • li보다는 a에 padding을 줘야 클릭할 수 있는 영역이 늘어나 UX에 좋다. 좌우패딩을 10px로 늘려주자.
    • a는 현재 inline 요소이기 때문에 상하 padding을 줘도 height가 늘어나지 않는다. 그러므로 .member a{display:inline-block; padding:5px 10px;}을 준다.
    • 링크 사이사이와 상하가 너무 붙어있으면 키보드로 focus 할 때 border가 잘 드러나지 않는다.
      • divider에도 margin을 좌우 3px 주고, member에도 padding을 상하 5px씩 준다.
  • header와의 간격과 메인 메뉴 바 확보를 위해 header{padding: 0 30px 35px;}로 내부 여백을 확보해준다.
    • 이렇게 하니까 English가 너무 왼쪽으로 치우쳐버렸다.
      • .member{position: relative; right: -10px;}로 해결
  • 마지막으로 English 모두 대문자로 만들어주기 위해 .member a{text-transform: uppercase;}를 넣어주며 안내 링크 영역을 마무리해준다.

웹표준과 접근성

  • 웹표준을 준수한다 = W3C가 공시한 표준 문법으로 코드를 짠다.
    • 웹표준만 잘 준수해도 접근성은 알아서 확보되는 경우가 많다.
  • 웹접근성(Accessibility): 표준보다도 더 중요하다고 볼 수도 있는, UX 차원의 문제
    • 환경 접근성: Cross Browser 이슈로, 다양한 브라우저에서 문제없이 사용할 수 있는 것을 말하며, 호환성이라고도 불린다.
    • 사용자 접근성: 비장애인과 장애인, 노인과 어린이 모두 정보차별을 겪지 않도록 하는 것으로, 예를 들어 img 태그에 alt(대체텍스트)를 넣어주지 않으면 무슨 이미지인지 시각장애인은 비장애인을 의존하지 않고는 알 수가 없는데, 이는 접근성 이슈를 무시한 것이다.

느낀 점

  • 웹표준과 접근성을 준수하는 것은 비단 모든 이들에게 편리한 UI/UX를 제공한다는 측면에서도 중요하지만 스스로에게도 정확한 기준으로 코드를 짤 수 있게 하며 이는 나중에 내 코드의 근거가 탄탄해지도록 한다. 다소 번거롭고 느리더라도 처음부터 웹표준과 접근성을 중요하게 생각하며 지켜나가도록 노력해야겠다.