깃허브 홈페이지 만들기1

깃허브 홈페이지 만들기1

목표

• 깃허브 홈페이지를 혼자 힘으로 만들 수 있는 것을 최종목표이다.
• 그 전에 모르는 부분과 디자인 적 부분을 참고한다
• 헤더를 완성한다.

 

정리

들어가기 전

• viewport
  • 뷰포트는 현재 보고 있는 컴퓨터 화면의 영역이다.
• 오픈그래프 / 트위터카드
  • 외부에 전달할 정보 정의
    • SNS에 정보 정의
  • 예시
    •  
    • <meta property="og:image" content="img/..." />
• 파비콘
  • 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
  • <link rel="icon" href="address" />
  • 스마트폰에도 적용
    • <link rel="apple-touch-icon" href="address" />
• 구글 폰트
• 브라우저 스타일 초기화
  • reset.css
• BEM
  • __ : 상위 태그의 일부분이다.
  • btn--success : btn + 성공이라는 상태
  • toggle-btn: 일반적인 작명
• 전역 스타일 버튼 ( 반복 )
  • 얘들은 리액트 컴포넌트로 구성한다.
  • css
    • background : #eee linear-gradient(to bottom, color1, color2)
    • border, border-radius
    • display:inline-flex
      • 그냥 flex면 block요소라서 inline요소를 사용해 컨텐츠의 너비만큼만 사용하기 위함.
    • align-items:center
    • padding 0 12px; //
    • font-size, font-weight, line-height
    • cursor
    • box-sizing
      • border-box
        • 콘텐츠 부분의 전체 길이가 늘어나지 않으며 해당 부분에 padding이나 border px값에 의해 크기가 줄어듬.
      • content-box
        • 콘텐츠 부분의 전체 길이가 늘어나며 해당 부분에 padding이나 border px값에 의해 콘텐츠 부분의 크기가 줄어들지 않으며 일정함 대신 padding,border의 크기에 의해 전체 길이가 늘어남.
    • hover::before
      • content:"", position:absolute
      • 이 부분은 잘 모르겠삼!
• 텍스트 전역 스타일 ( 반복 )
  • css
    • outline:none;
    • height
    • padding
    • border, border-radius
    • box-sizing
    • font-size
    • box-shawdox
      • inset (내부에..)
      • 추가적인 것은 구글링
      • 쉼표를 통해 다중 그림자 설정 가능
    • :focus
• 입력 양식 전역 스타일 ( 반복 )
  • 기술은 없는데 가상요소 선택자를 추가한다
    • input-placeholder
  • vend-prefix
    • 브라우저 업체별 접두사
    • 실험적 제공 기능 명시
    • 크롬은 ::-webkit-{input-placeholder},
    • 기타 다른 브라우저는::-ms, ::-moz- 를 사용한다.

Header

• 중앙에 content를 넣을 때 container 나 inner라는 이름으로 사용한다.
  • section, inner라는 클래스 이름을 통해 공용으로 설정할 것이다.
• 헤더 역시 정의를 해놓는다.
• inner 부분에 height를 하면 부모 역시 inner의 height를 가진다.
• margin 0 auto
  • 이것을 쓰기 위해선 너비가 지정되어야 함.
• align-items:center
  • 세로 정렬
• a 태그
  • 인라인이므로 padding 값이 안먹음.
  • 그러므로 display :block 처리.
• background
  • value에 url(주소)를 넣을 수 있음
• text-indent 속성
  • -9999px 대체 텍스트에 존재 명시
• display:flex
• float:left, float:right
  • clearfix::atfer { content :"", clear:both, display:block}
  • float 해제.
• order를 통해 순서를 명시한다.
• 식별자 + [type='submit']
  • 해당 부분을 통해 type이 submit이라는 형제를 갖고온다.