Icednut's Note

웹페이지 실습 강의 노트

2017-06-16

HTML 마크업하기

시작하기 전에..

  • html 문서 맨 첫줄에는 DTD가 위치
  • DTD는 Document Type Definition을 의미
  • <!DOCTYPE html>를 입력하면 hmtl5로 인식함
  • DTD는 대소문자를 구분하지 않는데 DTDTYPE만 대문자로 쓰고 나머지는 소문자 (대문자로 써도 되는데 관례상 소문자)
  • html5에서는 header, footer, aside 같은 division 태그들이 더 추가됨
  • 웹브라우저는 DTD가 없으면 예전 문서라고 인식함 -> 브라우저가 렌더링할 때 예전 문서 렌더링 방식으로 진행 (쿽스 모드로 렌더링) -> 브라우저마다 다르게 렌더링하는 이슈가 발생함
  • TIP: zen-coding, emmet을 사용하면 html 태그 작성이 편해짐

HTML Elements

html

  • html은 반드시 필요하며, html 엘리먼트는 html 파일 당 하나만 등장해야됨
  • 엘리먼트에는 속성을 가질 수 있음
  • 장애인차별금지법을 위해서 웹접근성 규칙을 지켜야됨 -> html에는 lang 속성을 선언하자. -> 이걸 선언하면 뭐가 좋을까? 구글에서 한국어 웹페이지만 검색할 때 참조할 수도 있을 것 같다. 웹페이지 화면 낭독기가 이 속성을 참조해서 낭독을 함 (lang=”ko”를 하면 한국어로 낭독)
  • head와 body 앨리먼트도 페이지 당 각각 하나씩만 위치할 수 있음
  • body 안쪽에 있는 코드만 뷰포트에 보이게 되며, head 앨리먼트 아래에는 meta, title이 위치할 수 있음
  • meta 태그 첫 번쨰는 인코딩이 들어감
    • <meta charset="euc-kr"> 이렇게 하면 한국어만 다룸 -> 이렇게 작성하면 최신 크롬에서는 깨짐. 크롬은 utf-8로 강제로 인코딩함
    • <meta charset="utf-8"> 이렇게 하면 전세계 모든 문자를 표현할 수 있음
    • <meta name="viewport" content="initial-scale=1,minimum-scale=1,user-scalable=no"> 모바일 브라우저에서 줌인, 줌아웃을 못하게 함. 이걸 셋팅 안하면 데스크탑 페이지 같은 뷰포트보다 큰 페이지는 강제로 줌아웃을 함. -> 모바일에서 보기에 불편함 -> 해당 메타 태그를 추가하여 실제 크기로 뷰포트에 표시
    • <meta name="viewport" content="initial-scale=1,width=device-width"> 이 태그도 위와 같은 의미
    • 한 가지 염두해둘 것이 있는데, iOS에서는 더 이상 위 메타태그를 지원하지 않음 (써도 소용없음, 그러므로 iOS는 줌인/줌아웃이 되며 막을 방법이 없음). 단 안드로이드는 그대로 위 태그가 유효하다고 함.
    • meta 태그는 종료 태그가 없음
  • title 태그에는 문서의 제목이 위치함
    • 검색엔진이 여기에 적힌 키워드를 가지고 검색 노출을 함
    • 여길 잘 작성해야 웹 크롤링에 유리.
    • <title>공지사항</title> 모든 페이지가 이렇게 작성되어 있으면 검색엔진 수집에 이점이 없겠지?
    • <title>공지사항 - 게시물 제목</title> 이렇게 유니크하고 구체적으로 작성하자
    • 웹페이지 낭독기가 제일 먼저 읽는게 이 title 태그 -> 웹접근성을 위해서라도 꼭 작성해야 하며, 유니크하고 구체적으로 작성해야됨
  • meta 태그, title 태그 위치는 상관없으나 관례상 meta 태그를 먼저 쓴다
  • title 다음 쓰는게 link 태그
    • <link href="default.css" rel="stylesheet"> 이 방식을 external stylesheet라고 부름. 일반적으로 가장 많이 쓰이며, 다른 페이지에서도 쓸 때 사용
    • <style></style> 이렇게 쓰는게 embedded stylesheet라고 부름. 적용 범위가 이 페이지에 한정될 때 이 방식을 사용.
    • 태그 안에 style 속성을 써서 CSS를 선언하는 방식을 inline style이라고 부름. 이 방식은 해당 엘리먼트에만 적용이 됨. (재사용이 불가)
    • link 태그를 여러개 하면 http 요청이 많아져서 성능이 떨어짐. 최대 2개만 유지하자. css 빌드 기능을 써도 좋음.
    • user agent stylesheet는 브라우저에 설정된 기본적인 스타일시트
    • 아래 코드는 IE9 이하의 브라우저에서 html5 태그를 쓸 수 있게하는 polyfill js임
      1
      2
      3
      4
      <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  • 그 다음 script 태그가 위치하는데 이 태그는 head 혹은 body 엘리먼트 안에 위치해야 한다. (다른데 위치하면 안됨)
    • pollfill.js를 입력하면 IE7, IE8에서 section 태그를 사용할 수 있음. 이 js는 head 안에 선언해야 됨.

body

  • div, span는 뭔가 표현할 때 블록 혹은 마크업하는데 딱히 떠오르는게 없을 때 사용.
  • <a href="#main" class="skip">메뉴 건너뛰기</a> 이 태그가 있으면 웹페이지 낭독기에서 tab으로 선택 시 메뉴들을 건너뛰고 본문으로 갈 수 있도록 한다. (웹접근성 때문)
  • header와 footer를 사용하여 사이트 상단 하단을 표현

h1

  • h1으로 사이트 로고를 표현 (h는 heading을 의미, heading contents라고 부름)
  • 웹접근성 낭독기로 heading만 먼저 Sorting한 뒤 그걸 먼저 듣고 중요한지 판단하기 때문에 중요한 태그라 생각
  • block 레벨 엘리먼트는 flow contents, inline 레벨 엘리먼트는 phrasing contents라고 부르기도 함
  • <span><h1>타이틀</h1></span> span과 같은 프레이징 컨텐츠가 플로우 컨텐츠를 감쌀 수 없다.
  • firefow > html validator를 쓰면 현재 페이지의 html 문법 오류를 체크할 수 있음
  • html 문법을 좀 더 자세히 알고 싶으면 https://www.w3.org/TR/html5/Overview.html#contents를 참조하여 앨리먼트를 찾아서 쓰자
    • ex) p element 안쪽에 div를 쓸 수 있을지 검색해 볼 수 있다. (Content Model인 자식으로 올 수 있는 모델을 참조) -> p 태그 안 쪽에는 div를 쓸 수 없다.

button

  • button 앨리먼트의 타입 속성이 button은 별 다른 기능을 하지 않는 버튼이 된다.
  • type을 생략하면 기본적으로 submit으로 결정
  • 사이트의 네비게이션을 담당
  • 그 사이트의 주된 탐색 섹션만 nav로 마크업 하자. 아무거나 다 링크들을 nav로 선언하면 안된다.
  • nav는 sectioning contents라고 부름
  • sectioning contents는 section, article, nav, aside가 있다.
  • sectioning contents를 쓸 경우에는 h 태그를 쓸 것을 강력히 권장한다.

ul (unordered element)

  • 순서가 없는 반복되는 목록을 표현할 때 ul 앨리먼트를 사용
  • 반대는 ol (ordered element)

input

  • input 앨리먼트의 타입은 레퍼런스를 참조하자.
  • required 속성은 value를 생략할 수 있다. (disabled, readonly도 마찬가지)
  • disabled와 readonly의 차이: readonly는 값을 수정할 수 없지만 form을 통해 값 전송이 가능. 반면 disabled는 서버측으로 전송이 안됨
  • pattern이라는 속성도 있음. 여기에는 정규식을 넣을 수 있다.
    • ex) pattern="[0-9]" 숫자만 입력 가능

hr

  • horizontal rule
  • 내용과 내용 사이를 구분하고 싶을 때 사용

main

  • 해당 페이지의 중요한 컨텐츠를 여기에 위치시키자. (ex: 뉴스기사 본분, 블로그 컨텐츠 본문)
  • 화면을 수직으로 분할하고 싶을 때는 div로 한 번 wrapping해서 쓰자
    1
    2
    3
    4
    <div>
    <main>...</main>
    <aside>...</aside>
    </div>

section

  • 하나의 주제를 가진 블록
  • article과 비슷
  • article는 따로 떼서 다른 곳에 배포했을 때 그 내용이 이해가 되면 article, 아니면 section

aside

  • 주된 컨텐츠를 다 작성하고 나서 없어도 되는 컨텐츠를 여기에 표현
  • 배너, 광고, 쇼핑몰에서 오른쪽에 따라 다니는 내가 본 컨텐츠 등을 여기에 표현
  • 저작권, 이 사이트의 주소를 여기에 표현
  • body 맨 마지막에는 자바스크립트 로딩 부분을 표현

그 밖에..

CSS 코딩해보기

  • class 속성으로 선언된 클래스에 styling 해보기
  • *은 공용 셀렉터로 html, body 등 모든 것을 다 선택한다.
  • width 값에 border값과 padding값이 포함된 값으로 셋팅할 수는 없을까?
    • box-sizing: content-box; 때문에 저렇게 동작하는 것인데 이 값을 border-box로 변경하면 원하는 대로 동작한다. box-sizing: border-box;
    • 모든 DOM을 border-box로 하고 싶을 때는?
      1
      2
      3
      4
      5
      *,
      :before,
      :after {
      box-sizing: border-box;
      } /* 셀럭터에서 쉼표(,)는 and를 의미한다. */
  • body:before {} 여기서 :before는 가상 선택자라고 하며, 실제로 DOM이 존재하지 않지만 브라우저가 DOM을 생성하게 해주는 것을 칭한다. :after도 있음

    • before와 after는 화면 낭독기가 읽어주지 않기 때문에 컨텐츠를 담으면 웹접근성 위반.
    • 보통 before와 after에는 아이콘을 위치시킨다.
    • body 앞에 가상 DOM을 생성해서 그 안에 hello world라고 출력하고 싶을때는?
      1
      2
      3
      body:before {
      content: 'hello world';
      }
  • 모바일용, 태블릿용, 데스크탑용 페이지 CSS를 어떻게 작성할까?

    • 일단 하기 전에 global 스타일을 먼저 선언하고 local 스타일은 나중에 선언한다. (local 스타일이 덮어씌워지기 때문)
    • 또, aside나 main 등 안변하는 앨리먼트의 스타일을 먼저 작성한다.
    • 디바이스별 CSS는 media query를 사용한다. (http://naradesign.net/wp/2012/05/30/1823/ 여기를 참조)
    • @media screen and (조건) 이렇게 쓰면 디바이스에서만 작동하는 미디어쿼리 이다. 화면 낭독기에서는 작동 안함
    • @media print and (조건) 프린트할 때 적용되는 스타일시트
    • @media all and (조건) all은 생략 가능

CSS 속성 - display, margin, position, float

display

  • block과 inline의 차이점은?
  • block는 한 줄을 다 차지
  • inline은 표현된 영역만 차지
  • none은 화면에 표시 안됨 (javascript로 컨트롤 가능, 화면 낭독기는 읽지 않고 pass)
  • inline-block은? inline과 비슷하지만, block 처럼 쓸 수도 있음. 이것의 장점은 height값이 적용이 됨 (inline으로 할 때는 height 값이 적용이 안됨)
    • 왜? inline으로 선언했을 경우에는 브라우저가 텍스트로 인식하기 때문. 그래서 텍스트의 영역에는 height, width 값 설정이 안됨
    • 이게 언제 필요할까? 네비게이션 메뉴를 행으로 위치할 때 수직 구분을 inline-block을 줘서 width 값을 준다.
    • inline은 특징이 대략 4px 정도의 공백이 생김 (자간을 의미, 그래서 inline을 이용해서 행 구분을 하진 않음) (공백은 font-size에 따라 달라짐)
      • 자간을 없애려면? inline을 랩핑한 앨리먼트를 선언해서 font-size: 0으로 적용
    • 행 배치의 현존하는 가장 흔한 방법은 float를 사용 (ex: float: left)
      • 이를 대체하기 위해 나온 것이 flex (Readme에 기고가 되어 있으며 궁금하면 읽어보자)
        • flex-container, flex-item

margin

  • 박스 바깥 쪽을 나타내는 영역
  • block에 width를 주면 나머지 영역은 auto margin이 적용된다.
  • auto margin 언제 필요할까? 중앙 정렬할 때 필요 (ex: margin: 0 auto;)
  • 아래와 같은 경우 b 앨리먼트는 margin이 어떻게 동작할까?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .a {
    background: red;
    color: #FFF;
    margin-bottom: 100px;
    }
    .b {
    background: blue;
    color: #FFF;
    margin-top: 100px;
    }
    • a와 b의 마진이 겹친다. 이를 수직 마진 중첩이라고 부른다.
  • 그럼 b의 margin-top을 200px로 하면 a와 b 사이는 300px이 될까?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .a {
    background: red;
    color: #FFF;
    margin-bottom: 100px;
    }
    .b {
    background: blue;
    color: #FFF;
    margin-top: 200px;
    }
    • 절대값이 작은 margin 값은 무시된다.
  • 그럼 b의 margin-top을 -100px로 하면 어떻게 될까?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .a {
    background: red;
    color: #FFF;
    margin-bottom: 100px;
    }
    .b {
    background: blue;
    color: #FFF;
    margin-top: -100px;
    }
    • 이 때는 margin 값이 사라지게 된다.
  • 그럼 a의 margin을 지우면 어떻게 될까?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .a {
    background: red;
    color: #FFF;
    }
    .b {
    background: blue;
    color: #FFF;
    margin-top: -100px;
    }
    • 이 때는 b가 a 위에 겹치게 된다.
  • 아래와 같은 엘리먼트가 있을 때 margin은 어떻게 동작하게 될까?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="c">
    <div class="a">.a</div>
    <div class="b">.b</div>
    </div>
    .a {
    background: red;
    color: #FFF;
    margin-top: 100px;
    }
    .b {
    background: blue;
    color: #FFF;
    }
    .c {
    background: silver;
    color: #FFF;
    }
    • c의 margin-top은 0 이므로 무시가 되고 a의 margin-top 값이 적용이 된다.
    • c 박스 안에서 margin을 주고 싶을 떄는? overflow: hidden or padding: 1px or border: 1px solid #000 셋 중에 하나만 줘도 원하는대로 동작한다.
  • inline 요소는 수직 마진이 적용되지 않는다. 단 수평 마진은 적용된다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .a,
    .b {
    width: 100px;
    height: 100px;
    display: inline;
    margin: 100px;
    }
    .a {
    background: red;
    color: #FFF;
    }
    .b {
    background: blue;
    color: #FFF;
    }
    .c {
    background: silver;
    color: #FFF;
    }

position

  • 위치를 제어하는 속성
  • absolute: 자기 위치를 결정할 때 보통 형제 노드들의 위치에 따라 결정이 되는데, 이 속성은 위치를 독립적으로 설정 가능 (top, bottom, left, right 사용)
    • absolute로 하면 auto margin이 사라진다.
    • absolute를 주면 z-index가 활성화 된다.
  • fixed: 스크롤 해도 특정 위치에 계속 띄우고 싶을 때 사용
    • dim 레이어 띄울 때 쓰는데 이 때 스크롤이 먹힌다. 스크롤이 안먹히게 하려면 body에 overflow: hidden을 준다.
    • 화면 중간에 띄우고 싶을 때는 아래와 같이 주면 된다.
1
2
3
4
5
6
7
position: fixed;
right: 0;
bottom: 0;
top: 0;
left: 0;
opacity: .5;
margin: auto;
  • relative: 이 속성을 줘도 z-index가 활성화 된다.

float

  • float를 주면 position: absolute를 준 것과 같이 비슷한 효과를 볼 수 있다. (z-index가 활성화 되고 width, height가 수축된다.)
  • width, height 수축되는 것을 막으려면 overflow: hidden을 주면 된다.
  • overflow: hidden을 주었을 때 box 바깥으로 넘칠 때 표시가 안되는 이슈가 있다.
  • 결과적으로 float를 주면서 수축이 안되게 하려면 clear: both라는 스타일을 갖는 앨리먼트를 추가하면 된다. (:after를 사용해서)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <div class="c">
    <div class="a">.a</div>
    <div class="b">.b</div>
    </div>
    .a,
    .b {
    width: 100px;
    height: 100px;
    float: right;
    }
    .a {
    background: red;
    color: #FFF;
    }
    .b {
    background: black;
    color: #FFF;
    }
    .c {
    background: silver;
    color: #FFF;
    }
    .c:after {
    display: block;
    content: "";
    clear: both;
    }

그 밖에…

Tags: html5 css3