21.08.17

학습 내용

네이버 모바일 메인화면을 제작했다. pc버전으로 하던걸 모바일 버전으로 하는 것 뿐인데 좀 까다로웠다.

www.naver.com이 아닌 m.naver.com처럼(서로 다른 url 주소) 앞에 www 대신 m이 붙은 사이트는 모바일 페이지를 따로 만든 것이다.
helbak.com 같은 경우는 브라우저 크기 줄이면 모바일 버전으로 나타났고 도메인 주소도 변경되지 않았다.

모바일 버전 화면으로 보는 법

크롬 개발자 도구에서 모바일 아이콘을 누르면 모바일 화면으로 확인 가능하다.

모바일에만 들어가는 코드를 반드시 입력해야한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

ol, ul {
	list-style: none;
}

img {
	vertical-align: middle;
}

a {
	text-decoration: none;
}

button {
	border: none;
	background-color: transparent;
}

input {
	border: none;
	background-color: transparent;
}

input:focus {
	outline: none;
}

기본적인 css 초기화 작업을 진행한다.

그리고 모바일 화면에서 가장 뼈대가 되는 큰 틀에 대해 css를 적용한다. 모바일 화면은 정중앙에 위치한다.

.wrapper {
	overflow-x: hidden;
	overflow-y: auto;
	width: 375px;
	height: 100vh;
	background: blue;

	margin: 0 auto;
}

overflow-x: hidden; : x축을 벗어나는 항목은 숨긴다.
overflow-y: auto; : 평상시엔 스크롤이 없지만 영역을 벗어나는 순간 스크롤이 생기게 한다.
height: 100vh; : 유동적인 수치. 여기서 vh는 viewport height의 약자다. 어떤 기기의 화면의 높이값을 말하며 기기의 높이값으로 100%를 맞추겠단 말이다. 즉 파란색 큰 영역이 브라우저를 줄이든 키우든 내가 보는 기기의 높이값 혹은 브라우저 높이값과 동일하게 한다.

상단부

메뉴바
가로 정렬이라 flex를 사용하지만 wrap은 사용하지 않는다.
nowrap은 공간을 벗어났을 때 줄 바꿈 현상이 일어나지 않게 한다. wrap은 줄 바꿈을 한다. 모바일 nav는 눈에 보이는 영역 바깥으로도 나열되어있기 때문에 nowrap이다.

글자가 어그러지는 현상 해결법

#main-nav {
	◆overflow: hidden; 
	background-color: rgb(7, 189, 120);
}

#main-nav ul {
	◆overflow-x: auto;
	display: flex;
	align-items: center;

	◆white-space: nowrap;
}

#main-nav ul li {
	height: 54px;
	text-align: center;
}

#main-nav ul li a {
	height: 100%;
	line-height: 54px;
	
	color: rgb(141, 223, 183);
	padding: 0 10px;	
}

- ◆표시를 해둔 코드들 때문에 글자의 어그러짐이 사라진다. white-space nowrap은 글자의 줄바꿈에 영향을 주는 속성이다.

각각의 a태그 크기는 내부 컨텐츠 크기에 따라 다르다.

모바일에서 클릭하고 드래그하면 옆으로 이동되는 효과는 js로 구현하기 때문에 당장은 생략한다. 만약 이 페이지를 서버에 올려서 모바일 페이지로 접속한다면 손가락으로 이동하는 효과가 가능하지만 pc로 작업할 땐 편의를 위해 일단 스크롤로 한다.

mac이라서 트랙패드로 좌우 슬라이드가 가능할 때 스크롤을 없애고 싶다면

#main-nav ul {
	-ms-overflow-style: none;
	scroll-width: none;
}

#main-nav ul::-webkit-scrollbar {
	display: none;
}

-ms-overflow-style: none; : 익플, 엣지 브라우저에 영향을 주는 프리픽스
scroll-width: none; : 파이어폭스에서 사용 가능한 css
main-nav ul::-webkit-scrollbar : webkit이라는 프리픽스를 가상선택자로 지정해서 scrollbar라는 선택자를 지정한 후에, display를 써준다. 해당 webkit은 크롬, 사파리, 오페라에서 사용되는 가상선택자

이 3가지가 스크롤바에 영향을 주는 css 속성이다.

검색창 아래쪽 뉴스판 쇼핑판 등의 메뉴

#header .header-nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	width: 100%;
}

#header .header-nav li {
	width: 25%;
}

#header .header-nav a {
	display: block;
	width: 100%;
}

flex 적용법이 살짝 헷갈렸다. align-content를 center로 하는가 했으나 flex-start라는 걸 알았다. 더 공부가 필요한 것 같다.
그리고 ul li a 일 때 공간 영역 지정하는 게 은근 헷갈리던데 잘 알아두자. li 태그가 동일한 공간 크기를 갖고 그 안에서 a 태그도 그 안에서 크기를 가진다.

글자들이 이상하게된 걸 바꾸기위해 글자에 css를 적용한다.

#header .header-nav span {
	display: block;
	
	font-size: 11px;
	color: #1e1e23;
	margin-top: 5px;
}

display: block;으로 공간을 만들고 icon 밑으로 오게 한다.

그리고 a 태그 공간 안쪽에서 아이콘과 글자를 text-align: center;로 중앙에 배치한다.

#header .header-nav a {
	display: block;
	width: 100%;

	text-align: center;
}

i태그를 inline-block요소로 바꿨는데 그래서 아이콘과 글자 사이에 공백이 생겼다. 더군다가 글자에다가 margin-top: 5px;을 적용해 공백이 더욱 커졌으므로 margin-top을 제거했다.

아래 영역

아래 영역 중 모바일 버전이라 독특했던 now영역에 대해 더 길게 설명한다.

before는 float을 사용해서 3차원 특징 일부를 갖게 된다.

#now .btn-wrap .btn-shopping:before {
	content: "";
	display: block;
	width: 1px;
	height: 14px;

	margin-top: 15px;
	background-color: rgba(125, 127, 133, 0.2);

	vertical-align: top;

	float: left;
}

여기부분의 ul태그에 flex와 옆으로 넘길 수 있게 overflow-y를 쓴다.

#now ul {
	overflow-y: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
    
    margin-left: 20px;
}

flex-wrap: nowrap;이 포인트다.

실제 페이지에선 컨텐츠 사진과 제목을 슬라이드할 때 양 옆의 여백없이 넘어간다. 하지만 현재까지 만든 내 결과물은 여백이 남아있다.

now글자의 왼쪽면쪽으로 정렬된 걸 넘어서 밖으로 슬라이드 되어야 하지만 그렇게 되지 않는 상태다.

margin-left를 padding-left로 변경한다.

margin-left를 쓸지 padding-left를 쓸지도 디자인에 따라 달라질 수밖에 없다.

배너 영역

now 아래 영역은 배너들이 많아서 비슷하게 처리했다.
그렇지만 배너 중에서 이미지 가로길이가 긴 영역(1250x370)이 있었다.

#banner-4 {
	overflow: hidden;
	background-color: #fff;
	margin-top: 10px;
}

#banner-4 .banner-wrap {
	width: 100%;
	height: 155px;
}

#banner-4 .banner-wrap img {
	position: relative;
    
    height: 100%;

	left: 50%;
	transform: translateX(-50%);
}

화면 길이는 훨씬 작았고 이미지 가로는 크니까 overflow: hidden; 처리를 했다.

talk 영역

임의로 talk라고 이름 지은 영역이다.

ul li 태그로 이뤄져있다.
y축 정렬이라 별도의 flex 작업을 하진 않았다.

카피캣 작업 때 전체 크기를 잡기 힘들다면 일단 내부부터 잡아나가자.

이미지 크기와 radius는 공통적으로 주고 위의 2개 아래의 2개는 각각 오른쪽, 왼쪽에 이미지가 몰려있다. 일단 도면을 이용해 이미지나 텍스트를 반대 위치로 바꿔주고 적용된 css 차이점은 다른 클래스를 적어서 적용한다.

#talk ul li img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
}

#talk ul .left-list .content-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

#talk ul .left-list .content-wrap img {
	margin-left: 8px;
}

#talk ul .right-list .content-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

#talk ul .right-list .content-wrap img {
	margin-right: 8px;
}

위 2개 아래 2개 li는 float으로 설정했다.
부모가 가진 공간 크기보다 float을 사용한 자식들의 공간 크기 합이 더 크다면 레이어가 어긋난다는 특징을 활용했다.

li태그마다 전부 float을 사용했다. 그래서 부모 ul태그가 높이값을 인식을 못하고 있어서 overflow: hidden;을 적용한다.

#talk ul {
	overflow: hidden;
}

이렇게 하면 이제 해당 영역의 가장 바깥인 talk 부분도 정상적으로 높이값을 갖는다.

footer 영역

쭉 a태그로 잘 작성하다가 중간에 br태그나 p태그 등 뭔가 삐끗하게 연속성이 깨지는 태그가 등장한다면 nth-child에 대한 규칙이 무시된다.

▲br 태그로 인해서 a태그에 nth-child(1), nth-child(4)를 쓰면 1에는 적용이 되지만 4에는 적용이 되지 않는다.

해결 방법은 전부 같은 영역으로 감싸려고 하지말고 연속성을 깨지게 하는 태그 앞뒤를 각각 다른 영역으로 감싸주면 된다.

도면을 변경했다.

#footer {
	padding: 35px 0 80px;
}

#footer .txt-wrap {
	text-align: center;
}

#footer .txt-wrap a {
	position: relative;
	display: inline-block;
	padding: 3px 9px;
	color: #929294;
	font-size: 13px;
	font-weight: 400;

	letter-spacing: -0.5px;
}

#footer .txt-wrap a:before {
	content: "";
	display: block;
	position: absolute;

	top: 7px;
	left: 0;

	width: 1px;
	height: 10px;
	background-color: #d7dfe7;
}

#footer .txt-wrap .link a:first-child:before {
	content: none;
}

#footer .txt-wrap a:nth-child(4):before {
	content: none;
}

#footer h1 {
	text-align: center;
}

#footer h1 img {
	width: 74px;
}

어려운 내용

거의 항상 pc버전을 만들다가 모바일 버전을 만드는데 공간이 작으니까 컨텐츠도 그만큼 정교하게 배치를 해야 하는 게 어려웠다. 모바일용 메뉴를 옆으로 넘길 수 있게 스크롤을 만드는 방법과 now 영역에서 그림과 텍스트가 h태그를 튀어나가서 슬라이드 되는 법, talk 영역을 float으로 배치하는 작업은 이번에 배웠기 때문에 했지 혼자서 해보라고 하면 생각을 못했을 것 같다. overflow기능과 flex에서 nowrap기능, float이 상당히 중요했다. 모바일 버전에선 이 기능을 거의 필수로 쓰일지도 모른다..
오늘 다른 수강생의 질문이 마침 내가 궁금해하던 질문이라서 질문과 답변을 가져와봤다. 트위치 검색 부분을 예쁘게 완성했는데 완성한 직후에는 검색창이 잘 작동하더니 이후로 창을 열면 작동을 하지 않아서 고민이던 부분이었다. 주말에 이걸 들여다보면서 어떻게 고치나 고민하다가 덮어놓은 부분이었다...

position: fixed가 적용된 nav영역의 경우, 그 안에 a태그로 처리된 요소를 hover했을 때 커서의 모양이 바뀌지 않고 클릭이 가능하지도 않은 경우가 있습니다. 왜 이런 현상이 발생하는 건가요?

플러스로 내부 컨텐츠 크기에 맞게 a태그 크기를 다르게 하는 법.. a태그 내부 글자들이 어그러지는 거 해결하는 방법을 오늘 배웠다. 이건 css를 처음 배울 때 궁금했던 점인데 오늘 내가 해결했던 것과 다른 방법이 나왔길래 기록한다. 나는 일일이 width height를 다 지정해줬던 걸로 기억한다.

해결 방법

강의를 반복해서 들어 이해했다. float같은 경우는 이전에 적었던 일지를 보고 다시 머리에 집어넣었다.
멘토님의 답변이다. 답변이 아직은 잘 이해되지 않지만 선택자를 살짝 바꿔서 해보면 어쩌면 되지 않을까하는 생각이 든다. 이따 밥먹고 트위치 페이지를 다시 고쳐봐야겠다.

hover가 작동되지 않는 경우는 hover시 발생된 이벤트가 a가 아닌 다른 곳으로 전달되기 때문입니다. 그런 경우가 발생할 때는 요소들의 겹쳐진 상태, 배치된 구조에 따라 달라질 것으로 보입니다. 보이는 것과 실제 브라우저 렌더링 시, 겹침의 우선순위가 다를 것 같아요. 그런 경우가 발생하게 되면 개발자 도구로 디버깅 해가면서 풀어봐야 할 것 같습니다

기억해두자.

느낀 점

내가 진짜 모바일 버전 화면을 만든 것 같아서 재밌는 실습이었다. 처음 시작할 땐 pc버전과는 좀 다른 속성을 더 배우려나 했는데 생각보다 동일한 css속성을 많이 썼다. 속성값을 다르게 하고 배치를 다르게 했을 뿐인데 정말 내가 평소에 보던 모바일 버전이 되었다. 오늘이 모바일 버전 실습의 마지막이지만 코드를 반복해서 보고 어렵다고 느낀 부분을 잘 익혀둬야겠다.

Author And Source

이 문제에 관하여(21.08.17), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@soheeha/21.08.17

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)