본문 바로가기

전체 글41

모작(1): picogram [ 1차: 5/2  5:53~6:35 ]1단계: 그림판으로 레이아웃 잡기  2단계: top-section, banner-section 구현하기  top-section > top-bar-section > top-con banner-section > banner-img + banner-bg 1차 결과 -> 배경이미지 실패.[ 2차: 5/5 ]1. 그림판으로 레이아웃 다시 잡기 2. 탑바, 배경(안 나오던 부분 수정) 구현하기 5/5 - 성공 [배경 나오지 않던 이유]: 너비 높이를 주지 않음. 참고로 height는 100vh;로 주었음. 2024. 5. 2.
반응형 사이트[2가지의 구조:데스크탑,모바일] [구조가 데스크탑과 모바일로 나뉘는 이유]- 660px이상(데스크탑 버전)에서 1차 탑바에 있는 네비바가 구현되어 있어야 하고, 660px이하(모바일 버전)에서 2차 탑바에 있는 네비가 구현되어 있어야 하기 때문에 2가지로 구분이 되어 있다. (1920px)데스크탑 - 1차 네비바 구현- 2차 네비바 구현(x) (660px)조금 큰 모바일 사이즈- 1차 네비바 구현(x)- 2차 네비바 구현  [모바일버전 네비바에 container가 필요하지 않은 이유]- 모바일 버전에 들어가는 네비바나 탑바는 화면 너비를 전부 사용하는 레이아웃이 많기 때문에 화면이 작은 사용자를 위한 그리드(container)를 만들지 않아도 괜찮은 경우가 있다.[원하지 않는 코드(형식)]1. 네비바 너비2. 네비바 높이[vscode폴.. 2024. 4. 30.
vscode-wrap: position/순서 (섹션) > (이미지 opacity) (3) (섹션) > (배경색 opacity) (2) (섹션) > (그리드) > (컨텐츠) (1) (그리드) (배경색) (이미지) -> 형제 * 겹칠 수 없다. * position을 활용해야 한다. * relative는 일반적인 태그로 사용이 가능한 동시에 z-index로 absolute 형제들과 순서를 바꿔서 배치 가능하다. * absolute, relative끼리는 동생엘리먼트 일수록 위에 나온다. [가상요소] -> 적용한 태그에 자식으로 생성된다. wrap-section::after{} -> wrap-section의 막내동생 html에 작성된 태그들(둘째부터 막내전까지) wrap-section::before{} -> wrap-section의 첫째 2024. 4. 19.
반응형 이미지 [반응형 이미지] - 이미지는 촬영 -> 편집 -> URL주소 생성이 된 상태이기 때문에 고유 사이즈를 가지고 있다. 그래서 반응형 이미지로 만들어 주기 위해서는 특정 코드(%값)를 적용 해주어야 한다. - 이미지는 display: inline이기 때문에 하단에 알 수 없는 여백이 생긴다. ㄴ vertical-align: bottom; or (display: black;) or flex-item - 반응형이미지에는 width: 100%; display: block;코드가 들어있는 경우가 많다. ㄴ display: block; -> width: auto = 100%이기 때문에 width: 100%;활용해도 문제가 없다. [반응형] 코드펜 - 반응형 사이트를 구현하려면 모든 태그가 %로 되어있어야 한다. (.. 2024. 4. 16.

티스토리툴바