[220512 / Day 8] 재플린(Zeplin)을 활용한 페이지 제작 2

다른 이름으로 저장하기: 컨트롤 시프트 s

 

1. 이솝 페이지 메인 만들기

캐러셀(carousel) 회전목마? : 스크립트로 짜는 사람 거의 없음 99퍼 플러그인 씀

스와이프 슬라이더: 리액트 제이커? 많이 쓰는 플러그인, 자동으로 넘어가는 화면

플러그인 고유의 구조가 있음

이런 건 리액트 배울 때 제대로 배울거임

풀페이지도 플러그인도 많이 씀

플러그인 구조 갔다 쓰고 스타일 만들어야 함

naver modoo! : 무료로 모바일 웹페이지 만들어줌

 

center center / cover 축약하려면 / 꼭 붙이기

.header-bottom #allMenuBtn:hover ~ .allmenu-area{display: block;}

=> 형제 요소 뒤에 있는 걸 오버했을 때 나타나게 하고 싶으면 이렇게, 하지만 형제 요소는 앞에 있는 건 못 부르고 다음에 있는 것만 부를 수 있음

<div class="right"></div> 빈태그 넣어서 여백 만들어주기

z 축 : 위에 쌓인다는 뜻

 

2. 태그

z-index 346p 나중에 마크업 된 것을 위로 올리기 위해 씀(상단 고정), 기본값 오토, 단계 올라가면 12345~20만 이렇게 속성값, 포지션 값이 있어야 쓸 수 있음

섹션 안에 섹션 해도 됨

섹션 안에 h 태그 있기만 하면 에러 안뜸 하지만 그 섹션에 대한 제목은 아니기 때문에 시맨틱적으로 하려면 h 태그 따로 잡고 제목 만들고 안보이게 처리 그리고 안에 있던 h 는 단계를 작게

마크업 수정이 있을 수 있으니 태그로 부르는 것보다 클래스 부여해주는 게 나음

border spacing 359p

 

3. vertical-align ex2.html 파일 필기

- 인라인 요소, 텍스트의 경우 기본적인 베이스 라인(기본적인 선) 위에 배치, 아래를 디센더 위에를 뭔센더라고 부름, 베이스라인이 조금씩 틀림 그래서 검색창 아래가 조금 비어 있는 것(디센더 공간), 아무리 사이즈를 잘 맞춰도 애초에 디센터 공간이 있기 때문에 맞추기 힘듬 이 공간을 맞추는 태그가 버티컬 얼라인임 그래서 공간, 즉 블록에 위치를 주는 게 아니라 인라인 요소에 직접 위치를 잡아주는 것

탑 미들 바텀에 맞는데 인라인 요소끼리 상하단임 사이즈가 똑같으면 ??????? 뭔소린지?????

img,input,button{vertical-align: middle;} 리셋에 이렇게 넣기도 함

 

!!백퍼센트와 오토라는 값은 틀림, 넓이값을 안 적으면 오토, 근데 오토는 자기가 속한 공간의 오토, 백퍼는 넓이값의 백퍼센트, 그래서 마진 쓰면 밀려나감!!

 

4. 반응형 웹페이지 490p

모바일 웹 분리해서 사이트를 만듦, 도메인 두개.

절대 단위 말고 상대 단위.

절대값 : 단위는 px 

상대값 : 단위는 % em rem vw v vh vmin vmax 

calc 칼큘레이션 : 연산 함수가 돼서 연산이 됨 공간이 아무리 길어져도 콘텐츠의 너비는 유지되도록 할 때 쓰는 것 단위는 +-*/  0으로 값을 하면 에러 떠서 안됨 기호를 기준으로 앞뒤에 띄어쓰기 할 것 width: calc(50% - 25px) 전체 넓이 50%에서 -25px / 임의로 지정 넓이 퍼센트 맞추고 그 다음에 계산 / 1280(전체 넓이) 기준으로 221픽셀(콘텐츠)이면 221/1280*100 하면 됨 501p / 임의로 지정한다고 하지만 실무에서는 그렇게 하면 안됨 / 상위요소에서 하위요소로 계산 / 보통 글꼴에 많이 쓰고 패딩이나 마진도 사용

 

단위 504p

- em : equl to m 약자 / 폰트 사이즈 20 이면 20이 기준 사이즈가 되는 것 / 1em =16 / 상위 요소의 폰트 사이즈를 기준함

- rem : equl to root m 약자 / 가장 최상위 요소를 기준함 / html 태그 기준으로

- vw : 뷰포트위드 의 약자 / 화면 기준으로 무조건 계산해주는 것 /

-vh : 뷰포트하이

-vmin : 화면에서 위드, 하이 중 작은 걸 기준 /

-vmax : vmin 의 반대