포트폴리오 1

켄·2023년 8월 2일

portfolio

준비

전에 제작했던 포트폴리오..
기술적인 부분도 부족하고 디자인은 말 할 것도 없다.
한 번 잡숴보시고 피드백도 해주면 감사하겠습니다 ㅎㅎ.

학원에선 짧은 기간 안에 완성해야 했기 때문에,
거의 참고 자료의 복제품을 만들었다.🤧
새로운 포트폴리오(나의 색을 담은)를 제작하려고 한다!

오늘 블로그와 구글링을 해서

준비 단계를 모았다. 구 포폴도 참고했다.

index에 들어갈 내용

About - 간단한 자기소개
Skill - 툴, 언어 능력
Project - 작업물
- UX/UI - 2개 (완성. 더 추가하지 않을예정)
- 퍼블리싱 - 3개 이상 (현재 1개인데 구리다. 그냥 3개 추가 예정)
  - 클론코딩 해보기
Contact - 내 메일 주소, 번호?
깃허브, 벨로그 주소
Top 버튼

project 상세 페이지

index로 돌아가기(뒤로가기)
Top 버튼
Project Info - 기여도, 기간, 툴, 주요 기능
Overview - 프로젝트 간략 설명
Review - 결과
- 계획대로 기한 내에 완성 했는지
- 발표와 질의응답을 통한 청중들의 반응이 긍정적 이었는지
- 프로젝트의 잘 된 개선 방향 설명
- 보완할 점이 많은 것 같다는 피드백을 받았으면, 어떤 내용인지 구체적으로 작성
- 부족한 점과 잘 한 점을 구체적으로 작성
- 개인 리뷰의 경우 소통이 잘 되지 않는 부분은 비중을 줄이고, 그 점을 극복하기 위해 팀장으로서 어떤 역할을 수행했는지? 그로 인해 어려운 부분이 있었지만 기한 내에 결과물을 만들었고, 이런저런 부분은 마음대로 되지 않는 부분들이지만 다음엔 어떤식으로 해결해 볼건지에 대한 긍적적인 내용
  
  리뷰의 윗부분은 리스트 형태나 짧은 문장으로 객관적 사실을 작성하고
  아래 내용은 에피소드를 활용하여 스토리를 풀어나가듯 작성. 문단을 나눠 읽기 좋게 작성한다.
- 문제 해결 방법, 주요 기능 도입했다.

Mobile First

반응형으로 만들건데, 모바일 화면부터 제작.
디자인은 꼼꼼하게 해두기! 화면에 따른 컨텐츠 배치를 고려한다.

모든 디바이스의 해상도에서 적용될 공통 CSS 작성
모바일 CSS 작성 (768px 미만)
태블릿 CSS 작성(768px ~ 1024px)
데스크탑 CSS 작성(1025px 이상)

서체 크기

🖥️ PC

서체 최소 11px 이상 권장
12단 그리드 사용해 디자인

📱 Mobile

진짜진짜 작은 최소 폰트 12px(내비게이션 아이콘 등)
최소 16px.
20px이 읽기 편한 듯 하다(현대자동차 사이트 참고했음) 14는 좀 작다.

상대 크기 사용

width, height, 서체 등 되도록 상대 크기를 사용하자(%, rem 등)
px는 절댓값이므로 크로스 브라우징(웹 호환성)이 떨어진다.

img

background와 img의 사용

단순 배경, 디자인 용도면 background 사용
사용자에게 정보를 제공하는 경우 img 태그를 사용

img 태그를 사용할 때

container로 img 태그를 한 번 감싸주자.
container 크기를 정하고 width: 100%; height: auto;를 주면
컨테이너에 꽉 차게 + 가로 세로 비율을 유지할 수 있다.
max-width: 100%; 를 사용하면 container width에 맞게 줄어들며 비율을 유지한다.

반응형 img를 만들려면?

상대적 단위값(%, vw 등)을 가지는 width를 img에 선언하여 max-width와 함께 활용할 수 있다.

예시)

<style>
.containing-block {
  width: 50%;
  height: 100vh;
}

.containing-block img {
  max-width: 300px;
  max-height: 300px;
  width: 40%;
}
</style>

참고 블로그

mediaQuery와 viewPort

미디어 쿼리를 사용할 땐 뷰포트 값을 필수로 작성해야 합니다.

<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>

ex) 가로값이 768px 이상일 때 적용되는 스타일. 태블릿 css를 따로 작성한 경우

<head>
<link rel="stylesheet" media="(min-width:768px)" href="tablet.css">
</head>

(min-width) 작성 시, 즉 모바일 우선 작성 시 작은 값을 먼저 연결.

<head>
<link rel="stylesheet" href="mobile.css">
<link rel="stylesheet" media="(min-width:768px)" href="tablet.css">
<link rel="stylesheet" media="(min-width:1280px)" href="pc.css">
<head>