AI검색엔진 코딩 실무에서 활용함
구글 폰트, 네이버, 배민 등 포트폴리오에 활용하기
구글 웹폰트-search fonts-get font-get embed code-web 'import' 클릭-css파일에 import url 주소 복붙-예시에 있는 font-family 한 줄 복붙
import url 방을 예약하겠다.
font-family 이 폰트 쓰겠다.
구글 폰트 사이트에서 폰트 검색 후
one value 누르면 두께 조절한 후에 임베드(복붙) 가능
다운로드 방법: 압축파일 풀기 후에 글꼴파일 설치 클릭
/* 09_google_font.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap');
.head {
font-family: "Noto Sans KR", serif;
color: blueviolet;
}- html css 기본 숙지
- figma 디자인 설계 도구(시안)
디자이너가 시안 만들면 퍼블리셔가 웹으로 구현 - 팀 프로젝트 웹페이지 만들기(개인 포트폴리오) 일주일 동안
table태그 한 행만 width 설정 시
위 행과 아래 행 여백이 달라서
최대로 줄거나 늘어남에 있어서 한계가 있다.
표가 찌그러지면 안 되니까
표 크기는 css에서 조절하면 됨
디자이너, 퍼블리셔, 백엔드, 풀스택
팀으로 일하기 때문에 커뮤니케이션 중요함
nav=navigation bar=메뉴
선생님 벨로그 계정에서 피그마 내용 보기
vw,vh 단위
비율(%)이라서 반응형 웹페이지에 용이
viewport=디바이스(pc, 폰, 태블릿 등)에 따라 화면이 비율대로 조정되는 거
semantic 웹: 검색엔진 노출 잘 됨
<body>
<h1>html 문서:현재 작성법(시맨틱 웹)</h1>
<header>머리말</header>
<nav>메뉴</nav>
<section>
<article>소본문1</article>
<article>소본문2</article>
</section>
<footer>꼬리말</footer>
</body>css에서 태그 쓸 때 띄어쓰기 잘못하면 결과값 안 나옴
헥스 코드 #000000 컬러 번호
커서가 input태그 입력박스에서 깜빡깜빡 거리는 거=focus
css
마지막에 쓴 코드가 적용됨(덮어쓰기 개념)
웹퍼블리셔 수강 기록