[TIL-16] 노마드코더 코코아톡 클론코딩 #1.1~#1.6 / 연구소 홈페이지 만들기

• 준비하기
  • 브라우저 : 구글 크롬 다운. 브레이브도 광고 없어서 좋음.
  • Visual Studio Code 다운.
  • github desktop 다운.

 

• 웹사이트 = text
  • 개발자는 코드(텍스트)를 쓰고, 브라우저가 이해해서 웹사이트를 만듦.
  • 2~3 종류의 언어로 이뤄져있음.
    • HTML/CSS/Javascript

 

• HTML
  • 브라우저는 사람 언어 이해 못 함. contents가 뭔지 알려줘야 함.
    • html로 브라우저에 content 구조 설명

 

 

---

* 폰트 적용하기

https://velog.io/@kim-jaemin420/Web-font%EC%9B%B9-%ED%8F%B0%ED%8A%B8%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

http://webberstudy.com/html-css/css-1/font-style/

https://androidtest.tistory.com/74

• font-family : 속성
  • 방문자 PC에 있는 글꼴 적용
  • 우선 순위 설정
• @font-face : CSS
  • 원하는 글꼴 적용
  • @font-face {
      font-family:"NotoSans";
      src: url("NotoSansKR-Medium.otf");
    }
    • 이렇게 하는 거 맞나?

 

* 헤드라인 만들기

• 학교 로고 이미지 | 연구소
• 전체에 index.html 링크 걸기
• 그리드로 병렬
  • https://coryrylan.com/blog/how-to-center-in-css-with-css-grid#centering-vertically
  • https://heropy.blog/2019/08/17/css-grid/
  • "연구소" 글자 수직 중앙정렬 맞추기 : "align-items: center;"
    • [의문] 그리드 아이템과 콘텐츠의 차이?