[9월 1일 금요일 ~ 9월 4일 월요일까지 과제]
여태까지 배운 기술 (반응형, 레이아웃, css, position, flex) 등을 활용하여 선생님 웹페이지 각자 클론 코딩 과제 진행 중~
작업 순서는 다음과 같다.
[웹사이트를 Figma로 전환하기!!]
- 나의 계정 Figma로 들어가서
- resource button – Plugin 누르기
- html to design 플러그인 설치
주의 사항 한 달에 10번만 사용 가능 하다.
추후 포트폴리오에 이러한 것을 사용하면 된다.
하고 싶은 웹사이트 영어 버전으로 생각해보기 🙂
command or cntrl 누르고 figma 찍으면 클릭 여러 번 하지 않고 바로 양식 확인 가능~!
[초기셋업]
1. 파일과 리셋
2. 상속시킬 서체, 글씨크기, 줄간격 : 글뭉치 것을 사용하면 됨
3. 디자이너들이 쓰는 색을 변수로 등록
1. layout : html마크업
position fixed 로 광고 및 헤더 띄우기
상단부 position 잠시 연습 및 코드
중요!!
position :fixed 사용시 (항상 부모한테 position : relative 주고 그런거 아님)
left, right : 0 에 맞춰 늘려주고 top도 0 줘서 위로 붙여주기~!
위에 띄워진 영역의 height 에 맞춰 magin-top의 영역을 준다.
.main-title {
font-size: 32px;
font-weight: 700;
}
/* 3. 버튼 셋업 */
.btn {
border: none;
border-radius: 2px;
padding: 15px;
/* 상하에 15px */
min-width: 150px;
font-weight: 14px;
font-weight: 700;
letter-spacing: 2px;
cursor: pointer;
text-transform: uppercase;
}
.btn.dark {
background-color: var(–primary-black);
color: var(–primary-white);
/* line-height: 20px; */
height: 50px;
}
.btn.dark:hover {
background-color: var(–primary-white);
color: var(–primary-black);
box-sizing: border-box;
border: 2px solid var(–primary-black);
}
반응형 사이즈
***애초에 반응형 사이즈를 넣어서 마크업을 시작한다.
/* 반응형 */
/* header */
/* main */
/* aside */
/* footer */ 이 섹션별로 나누어서
1. 스마트 폰의 영역 먼저 작성
720 aside footer
990 이상 3단
1200 이상 desktop menu
2. 변경되는 사이즈 작성
@media screen and (min-size : 1200px) {
안에 우선순위 동일하게 적용하여서 변경한다~!
}
헷갈렸던 부분!
header 쪽에 opacity를 줘놓고 카트랑 햄버거 이미지가 검정색이여야 하는데 회색이라서 chatGPT 그 분에게 검색해서 SVG filter 색 변경하는거 검색하고 시간을 썻다ㅋㅋㅋ
알고보니 opacity 아놔…
자꾸 flex order 1 , 2, 3 가 듣지 않는 것이다.
그래서 알고보니 덩어리별로 먼저 flex order을 주고 난 뒤, 사이즈별로 보이지 않아야 할 것을 display : none 했어야 했는데
반대로 하다보니 듣지 않았던것 같다.
아니, 이전에는 그냥 일단 다 때려부어서 하고 @media screen 반응형 만들다가 포기했었는데,
애초부터 제대로 삽을 들고 파니까 마크업도 반응형을 고려해서 시작하고 CSS도 바로 @media screen 넣어서 하니까 자꾸 화장실이 가고 싶다. ㅋㅋㅋ
마크업 부터 잘해야함의 중요성을 느끼는 중!
특히 중앙에 위치해야 하는 로고인 h1을 중앙이 아닌 첫 순위에 두는 것도 인상적이였다.
모든 버튼이나 a 태그에도 시각 장애인이나 오디오로 들을 시 읽힐 수 있도록
단어를 넣어주고 font-size : 0 하는 것도 신기하고.
이것은 마치.. 운전면허만 따고 카타르 가서 막 운전하고 사고내면서 다니다가, 한국에 와서 제대로 다시 배우는 운전과 같은 느낌이랄까..
잡스럽게 막하던 것을 순서대로 맞춰서 하니까 어설프면서도 신기하면서도 뭔가 불편하다.ㅎ
이렇게 만드는 반응형은 솔직히 처음인듯…!
스마트폰 사이즈
웹사이즈
이런 식으로 이미지랑 position으로 반응형 해본적은 실제로 처음인 듯..!
- 우선 nav 우측 장바구니와 span 태그
header .util-menu .cart {
/* border: 1px solid red; */
width: 24px;
height: 24px;
font-size: 0;
display: block;
background: url(‘../images/cart.svg’) no-repeat;
cursor: pointer;
position: relative;
}
header .util-menu .cart a span {
font-size: 11px;
position: absolute;
font-weight: bold;
/* background-color: yellow green; */
transform: translate(60%, 0);
letter-spacing: 0;
}
2. Main 바디의 이미지 마크업 : CSS로 조정하는거지 JS로 하는거 절대 아니라고 하심
<divclass=”visual”>
<picture>
<source srcset=”./images/temp_visual_desktop.avif”media=”(min-width:720px)”>
<imgsrc=”./images/temp_visual_mobile.avif”alt=”모바일”>
</picture>
</div>
.visual {
height: calc(100vh-95px);
background-color: green;
position: relative;
}
.visual picture {
height: 100%;
width: 100%;
}
.visual picture img {
object-fit: cover;
height: 100%;
width: 100%;
}
참고로 ad와 광고 부분 z-index: 1000 주기 무조건 이기게 하도록
[9월 6일]
하단의 aside, footer 작업을 마무리하며 반응형 웹페이지 클론 코딩이 끝이 났다.
강사님께서 이제 내가 구현하고픈 웹을 선정하라고 하셨다.
나는 물론 나의 전공과 이전 이력에 맞춰 다음의 두 개 홈페이지를 선택했다.
1. 한국 관광 공사 페이지
2. 카타르 항공 페이지
아마 카타르 항공 페이지를 선택할 것 같다.
한국 관광공사 페이지도 한국적이고 좋긴한데, 현재 반응형이 나의 컴퓨터 맥 13인치 사이즈에서는 무너져있다..
노트북으로 코딩을 해야하는데 이 부분은 조금 어려울것 같다는 판단을 하기도 하는데.. 그래도 내가 반응형으로 고쳐서 만든다면 나름 추후 면접에 뽑히려나..?ㅋㅋㅋ
카타르 항공은 바뀌는 이미지도 많고 재미있는 요소가 나름 많다
asia를 선택하면 해당 지도 색이 바뀌면서 취항지를 보여주는 요소도 재미있고… 힘들겠지…?
구글 웹 에서 imageye 라는 것을 다운 받았다.
홈페이지의 이미지를 긁어 오는 것이라고 했다.
그런데 내가 그때 컴퓨터 환경 설정을 하고 있어서 차마 수업 중에 물어보지 못했다 ㅠㅠ 이미지 다운 받기만 했음..
다음 시간에 맥은 어떻게 사용하는 건지 물어 보던지 검색을 해봐야 겠다.
검색해서 찾음. 매우 쉬움. 마우스 우측 클릭 ‘Batch Download’하면 사용된 로고와 이미지 모두 다운 받아짐.
참고로 쇼핑몰 이미지와 아주 작은 이미지같은 경우 마크업과 css의 차이점이라면
큰 쇼핑몰 이미지는 a 링크도 걸어야 하지만 작은 이미지 같은 경우는 백그라운드로 들어가며 패딩을 만들어서 즉 공간을 만들어서 알맞게 이미지를 집어 넣어 주면 된다는 것이다.
[숨은 문제들 찾기]
어디어디 숨었니~
1. 갑자기 했던 반응형 웹의 모든 이미지가 뜨지 않기 시작했다.
쇼핑몰은 이미지가 핵심인데…..!!!!!
오늘 안에 고쳐 봐야겠다 ㅠㅠ =>
footer 부분의 img display: none 했는데 앞에 footer 적어야했는데 적지 않아서 전체 적용 됬었음.. 비슷한 사례가 잘 됬던 헤더 부분도 무너 진점.. 동일한 클래스 이름을 가지고 있는 부분의 부모이름을 적지 않아서 적용 됨… 규칙을 지켜줍시다.
2. 첫 product 클래스에 추가 클래스를 부여한 부분의 이미지 여백이 남는다.
=> 조정 필요!
3. 하단의 푸터 figma랑 다르게 웹페이지 것을 적용하여 구현해야 한다.
즉 나라별 flag 등이 나와야함..
면접 준비도 해야하고 할 거 참 많네…..!
