html, css 1주차

1주간 배운 내용

• Web Browser Extension
  1. Web Developer : 웹 브라우저 조작
  2. HeadingsMap : 헤더 확인
  3. OpenWAX : 웹 접근성 확인
  4. tota11y : wcag에서 몇가지 중요 개념 체크
  5. Gitzip For Github

html

구조파악

1. html은 구조, css는 레이아웃 및 디자인, javascript는 동작으로 구별하여서 구조를 짜야한다.
2. 
3. 

---

html에서의 id와 class의 네이밍 하기

1. css에서 사용할 class와 id의 값을 정해준다.
   1. 네이밍 방법론
2. class는 중복이 허용되고 id는 중복 되면 안된다.

html에서의 tip

1. 이모티콘의 경우는 아래 css에서 적용을 한다.
2. 특수기호의 경우는 일반 문자로 인식하기 떄문에 엔티티 기호를 사용해야 한다.
3. ui의 작업을 하기 위해 피그마라는 협업툴을 사용하면 좋다.

css

1. css3은 다양한 모듈들로 이루어져 있다.

   1. w3.org/css : 모듈 확인

      1. Rec : 표준으로 채택된 상태
      2. PR : 표준에 제안된 상태
      3. CR : 권고되는 표준 후보 스펙
      4. WD : 초안
      • tip 브라우저 별 css3 지원 test

2. 이모티콘의 경우 html에서 이미지를 넣지말고 css로 적용한다.

   1. 폰트어썸, 폰텔로같은 사이트에서 다운받아서 css로 적용한다.

3. Reflow와 Repaint

   1. css에서 사용하는 속성에 따라서 성능에 많이 차이가 있다.
   2. 교수님 추천 링크

4. css의 3대 요소

   1. 상속
   2. 겹침
   3. 우선순위

5. 그라디언트 예제 그라디언트 조합예제

css의 브라우저 초기화 작업

1. 브라우저에 따라 레이아웃의 기본값이 다르다.

   • css는 html과 다르게 기본적인 속성값을 가지고 있다.

2. 그로인해 똑같은 css를 적용하더라도 브라우저에 따라 다른 디자인이 만들어진다.

3. 위의 문제점을 해결하기 위해 2가지 방법이 있다.

   1. reset.css는 모든 브라우저에 기본적으로 적용되는 css를 초기화 시킨다.
   2. normalize.css은 기본 스타일을 다른 브라우저와 일관성을 가지게 유지한다.
   • 어떠한 방법을 사용해도 괜찮지만 reset은 편하지만 효율성이 떨어지고 normalize는 브라우저의 기본적인 레이아웃을 최대한 유지하고 있기때문에 좀 더 신경을 써야하지만 효율적이다.

---

css로 레이아웃 잡기

1. http://www.csszengarden.com/

   • 해당 사이트는 고정된 html의 구조를 가진다.
   • css만으로 다양한 디자인을 보여준다.

2. 가장 기본적인 레이아웃은 노멀플로우로 위에서 아래로 흐른다.

   1. block 요소
      1. 브라우저의 너비만큼을 가지는 직사각형 형태의 요소이다.
      2. 띄어쓰기 이후에 다음요소가 들어온다.
   2. inline 요소
      1. 기본적으로 컨텐츠의 크기만큼을 가지는 요소이다.
      2. 다음 요소는 띄어쓰기가 없고 우측에 이어서 바로 온다.
      3. height, width가 적용되지 않는다.

   • display로 요소를 변경 가능하다.

   • 이 외에도 inline-block, flex 등 다양한 요소가 있지만 위의 2가지는 가장 기본적인 요소이다.

3. 레이아웃을 잡는 css의 속성

   1. display

      1. block, inline, lnline-block과 같은 노멀플로우에서 요소가 동작하는 방식을 변경할 수 있다.
      2. 최근 나온 속성으로 grid속성과 flexbox등이 있다.
         1. flex
            1. 부모요소에 display: flex를 적용하여 직계 자식이 플렉스 아이템이 된다.
         2. grid
            1. display: grid로 적용하며 원하는 표를 만들어서 적용하게 된다.
            2. html에서 비슷한 태그로 table 태그가 있다.

   2. float

      1. 요소를 띄우는 속성으로 float가 적용된 요소는 노멀플로우에서 벗어나서 요소가 페이지의 왼쪽이나 오른쪽으로 이동한다.

      2. 플롯 속성을 사용할 요소는 다음에 나오는 position 속성의 absolute 값과 양립할 수 없습니다.

      3. 하지만 float을 적용한 요소는 레이아웃을 망치기 떄문에 float를 해제를 해줘야한다. float가 적용된 요소를 해제하는 것이 아니라 clear 속성을 이용하여 다른 요소에게 영향을 끼치지 않도록 만든다.

         • 많이 사용하는 방법은 float를 사용하는 요소의 부모요소에 clearfix를 적용하는 방법이다.

         • clearfix:after{
               content : '';
               clear: both;
               display:block
           }

         • 다른 방법으로는 display:inline-block를 사용하거나 overflow, 빈 엘리먼트에 clear를 적용하는 방법이 있다.

   3. position

      1. 다른 요소 내부에 들어가서 상자의 정확한 위치를 제어할 수 있게 한다.
      2. 자식 요소에 position: absolute를 적용하고 부모요소에 relative을 적용하면 자식 요소는 부모 요소안에서 원하는 위치에 배치할 수 있다.

   4. 테이블 레이아웃

      1. 이것은 HTML 테이블 구성원에 스타일을 지정하기 위해 마련된 기능이기는 하나 display: table와 관련 속성을 사용하여 비테이블 요소에서도 사용될 수 있다.
      2. CSS 테이블 예제에서 활용한 예제와 소스 코드 또한 볼 수 있다.

   5. 다단 레이아웃

      1. 다단 레이아웃 속성은 당신이 신문 지상에서 볼 수 있듯이 블록 콘텐츠를 단 형태로 배치되도록 만들 수 있다.

---

웹 접근성에 대해

1. 웹 접근성이란

   1. 웹 접근성(web accessibility)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.

2. 웹 접근성에 대한 사이트

   1. 웹 접근성 사이트
      1. 웹 콘텐츠 접근성 가이드
      2. 웹 접근성(널리)

3. 접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)

   1. 스크린리더를 사용하는 이용자들을 위해 사용하는 기술

4. 보이지 않는 요소를 만들 때

   1. display: none, visibility: hidden, hidden의 경우는 웹 접근성으로는 별로 좋은 선택이 아니다.

   2. .a11y-hidden{ 
      position: absolute !important;
          height: 1px; 
          width: 1px;
          overflow: hidden;
          clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
          clip: rect(1px, 1px, 1px, 1px);
          white-space: nowrap; /* added line */
      }

   3. 위의 css를 사용하여 하면 웹 접근성에 대해 좋은 선택이다.

git에 대해 간단한 설명

1. git은 많이 쓰이는 버전 관리 시스템중 하나이다.
   1. git은 로컬로 저장을 하게 되고 온라인으로 저장이 가능한 사이트들이 있는데 가장 유명한 것은 github
2. 간단한 git 명령어
   1. git init : 로컬에서 git 저장소를 만든다.
   2. git status : 파일의 상태를 확인한다.
   3. git add ('파일이름' or '.') : git 저장소에 특정 파일 또는 모든 파일을 추적한다.
   4. git commit -m "변경된 메시지 내용을 입력" : 변경사항을 저장한다.
   5. git remote add origin "원격 서버 주소" : 원격 저장소를 지정한다.
   6. git push -u origin master : github등 원격 저장소에 저장을 한다.
   7. git clone "원격 서버 주소" : 다른 사람의 원격 저장소를 로컬 저장소로 가져온다.
   8. git pull : clone or remote한 git 원격 저장소에 업데이트 된 내용을 가져온다.

1. 웹에 대한 발표 : 해당 사이트는 다양한 웹 기술 ppt가 있다.

2. 프론트엔드 페러다임

   1. 개발버전과 배포버전을 다르게한다.
      1. 개발
         1. pug, sass typescript를 사용하여 개발한다
         2. 하지만 브라우저는 이해하지 못하기 때문에 배포할때 바꾼다.
      2. 배포
         1. babel, webpack처럼 html, css javascrip로 바꿔주는 툴을 사용한다.
         2. 가벼운 pacel도 사용해보자

3. 자바스크립트 랜더링 방법