패스트캠퍼스/패캠 오프라인

html,css 2주차

모든지 신나게 2020. 3. 28. 22:34

2주차에 배운 내용

  1. 반응형 프레임워크를 사용해 프로토타이핑을 제작해보면 설계하는데 많은 시간을 절약 할 수 있습니다. 하지만 프로토타입에서만 사용해야하고 실제 만들 제품은 사용하지 않는것이 좋다.

  2. html6 : 다양한 태그들이 추가된다.

  3. required

    1. input 태그에 사용되는 속성으로 유효성을 체크한다.
    2. 유효성체크는 예전에는 자바스크립트로만 가능했지만 html에서 가능해졌다.

  4. time

    1. required와 비슷하게 예전에는 자바스크립트로 설정한 시간들을 태그를 사용하여 설정 할 수 있다.

  5. 정렬방법

    1. text-align(black요소)
    2. vertical-align(inline요소)

  6. 웹 접근성에 대해

    1. input 태그

      1. html 사용성 관점에서 input 태그는 label의 속성 for과 같이 써야한다.

      2. <!-- 명시적 -->
<label for"id">아이디</label><input type="button" id="id">
<!-- 묵시적 -->
<labe>비밀번호 <input type="password" id="pass"></labe>

      3. 라벨 테그 안에 텍스트 아이디를 누르면 연결한 input태그를 클릭이나 포커스를 하게 된다.

    2. 키보드 포커스

      1. 키보드 포커스 이벤트를 기본속성으로 가지고있는 가장 대표적인 태그는 input태그이다.
      2. 하지만 키보드 태그를 받지 못하는 태그라도 textindex 속성을 사용하면 받을 수 있다.
      3. 관련 사이트
        1. 정보화진흥원 웹 접근성에 대해
        2. 웹접근성 연구소

    3. IR기법

      1. Image Replacement의 약자로 img태그의 alt같이 이미지에 의미가 표시되는 텍스트를 넣는 방법을 나타낸다.
      2. 방법으로 display: none, text-indent:-9999px등이 있지만 각각의 단점들이 있다.
      3. 위의 방법보다 좋은 기법으로는 z-index방법이나 text-indent와 overflow조합등이 있다.
      4. IR기법을 사용할 수 없는 상황이면 title이나 ARIA-label를 사용하여 스크린리더 사용자들도 생각해야 한다.

  7. css 전처리기

    1. 가장 유명한 전처리기는 SASS이다.
    2. css전처리기를 사용하는 이유는 css에서 반복사용을 줄이기 위함이다.

  8. css spriter 기법

    1. 보통 이미지를 사용할 때는 이미지를 하나하나 잘라서 사용하는게 아니라 커다란 이미지를 잘라서 사용한다.
    2. 잘라서 사용하는 이유는 성능이 좋아지고 네이밍 처리하기가 편하고 유지보수가 편하다.

  9. 사용자 정의 속성

    1. data-[원하는 이름]을 사용하여서 추가 정보를 사용하여 자바스크립트 css로 접근하여서 읽을 수 있다.
    2. 단 보안에 취약하기 때문에 중요한 정보는 넣지 말자

  10. grid기법

    1. 그리드 기법은 최근에 추가된 레이아웃 구성방법으로 예전
    2. grid게임
    3. gird ebook

image

고정형 레이아웃의 완성

반응형 레이아웃 1일차

  1. 반응형 웹 vs 적응형 웹

    1. 반응형은 모든기기 적용
    2. 적응형은 각각 기기마다 만들어야함
    3. 단 적응형은 리소스가 적어서 빠름
    4. 반응형은 각 기기의 모든 리소스를 가져와서 느림

  2. 모바일 퍼스트 전략

    1. 모바일화면을 만들과 데스크탑을 만드는게 좋다.
    2. 하지만 현업에서는 이미 만들어진 데스크탑 화면에서 모바일 화면을 만드는 경우가 많다.
    3. 구글은 모바일사이트가 있으면 SEO점수가 더 높다.
    4. Google 모바일 친화성 테스트 도구

  3. 반응형 웹 디자인 사례

    1. koreawebdesign.com
    2. https://mediaqueri.es/

  4. 미디어 쿼리

    1. @media screen and (max-width: 768px) { 
    body { background-color: lightgreen; } 
}

    2. 미디어 쿼리를 사용하여 그 화면에서 사용할 css를 넣는다.

    3. 미디어 쿼리를 사용할 떄 다양한 크기를 정할 수 있지만 최소한으로 많은 기기를 호환시켜야 하기 때문에 중단점을 잘 설정해야한다.

      1. 미디어 쿼리 중단점, 부트스트랩 기준

  5. 개발 버전과 배포버전은 나눠진다.

    1. 왜냐하면 미디어 쿼리를 사용하면 css의 코드량이 늘어나서 가독성이 떨어진다.
    2. 그렇기 때문에 보통 파일을 나누고 코딩하여 @import로 파일을 합치는 경우가 있지만 이럴 경우는 성능이슈가 발생한다.
    3. 또는 직접 하나하나 자기가 코드를 합치는 경우도 있다.
      1. 자동으로 합쳐주는 도구인 파셀, 웹팩, 바벨등이 있다.
    4. src는 개발버전, dist는 배포버전

  6. 반응형 웹 구현 방법

    1. 사용자 모바일 경험 고려
      1. 반응형 웹에서도 사용자 경험을 생각해야함
        1. 예를 들어 작은 모바일 화면에서도 쉽게 원하는 곳을 클릭해야하고 타이포그래픽 최적화 등을 해야함.
    2. 완성된 비주얼보다 프로토타입 테스트 우선
      1. 하나하나의 디자인을 신경쓰지말고 간단하게 선형으로 만들어진 레이아웃이 반응형으로 잘 동작하는지 확인
      2. 만들어진 디자인을 다양한 기기에서 확인해보기
        1. 반응형 웹디자인 테스트
    3. 효율적인 네이게이션 제공 방법 고민
      1. 햄버거바 같은 디자인
    4. 이미지 최적화
      1. 이미지 배율조정
        1. <img srcset 등이 있다.
    5. 모바일 기기 우선
    6. 미디어쿼리 사용법