8.05 AI SCHOOL css(27)-네이버 실습

✔ TODAY

오늘부터는 네이버 게임페이지를 카피을 한다.

네이버 게임 1

✔ 학습한 내용

  • 프론트엔드에 심화과정시 리액트 뷰등 사용하는 도구 라이브러리를 사용& 학습한다.

  • css in js
    js를 적용해서 css 활용, 하기 위해서는 위의 도구 사용이 필요
    사용하는 순간 랜덤으로 클래스 네임을 완성함.

    이전과 다르게 최신기술을 사용해서 작성한 사이트

  • box-shadow
    그림자를 만들때 사용한다.
    https://cssgenerator.org/box-shadow-css-generator.html
    사이트를 참조하여 사용하면 좋음

💖tip
디자인너에게 디자인소스를 받았고 그에 공통적인 디자인이 잇는 경우
지금처럼 클래스화.

💻참조 사이트
https://cssgenerator.org/box-shadow-css-generator.html

📚학습하기
버튼과 인풋등 에 대해 html/css 더 자세하게 알아보기

#game-header

#game-header nav .right .search-wrap {
	width: 300px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.28);
	overflow: hidden; 
    안하면 border-radius가 적용이 안된다
    / 아래의 인풋과 버튼 때문에 
}
#game-header nav .right .search-wrap input {
	width: calc(100% - 38px);
	height: 38px;
    background-color: transparent;
	padding: 10px  12px 9xp 14px;
	border: none;
    
    color: #ffffff;
	font-size: 15px;
}
#game-header nav .right .search-wrap input:focus{
	outline: none; 정확하게 이해하기
}
#game-header nav .right .search-wrap button {
	width: 38px;
	height: 38px;
	 background-color: transparent;
	border: none;
}
  • background-color: transparent; 색상을 없애고 싶을때

    📚학습하기
    outline: none; 정확하게 이해하기

#game-header nav .right .ticket-wrap .btn-ticket {
	display: block;
	width: 40px;
	height: 40px;
	border: solid 1px #ffffff;
}
  • .btn-ticket 는 a태그이기때문에 공간을 만들기 위해서는 display :block를 만들어야 한다.

.bubble-mse

#game-header nav .right .ticket-wrap .bubble-mse {
	position: absolute;
    width: 165px;
    background-color: #697183;
    border-radius: 8px;
    
    padding: 10px 12px;
    top: 50px; 인풋과 버튼과 겹쳐지기 때문에 위치를 내린다.
    left: 50%;
    transform: translateX(-50%);
  
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    
    z-index: 100;

}

  • .btn-ticket와 .btn-login 둘 다 block요소이기때문에 y축으로 생성이 된다.

  • ticket-wrap(부모)에 공간크기를 설정했기 때문에, 영향을 받아서 작게 정렬이 된다.
    - 부모영역의 안에서 자식의 위치를 설정할 수 있음을 사용.

  • 별도의 공간을 만들기 위해서 position: absolute; 사용
    이럴 경우에는 magin:0 auto;가 작용되지 않는다.!

  • left: 50%;
    transform: translateX(-50%); 으로 중앙 정렬을 한다.

💖tip 3차원 공간의 중앙 정렬
left: 50%; transform: translateX(-50%);
magin:0 auto;가 작용되지 않됨.

  • 다른 오버젝트보다 위에 있어야 되기 때문에
    z-index: 100; 를 설정하다.

진짜... 공간이 제대로 배치가 안되서 울뻔 했는데 ..ticket-wrap 쪽에 중복으로 선택자를 적용해서 해당선택자에 css가 적용이 안되서 그런거수ㅜㅜㅜ 

#game-header nav .right .btn-login {
	width: 60px;
	border: solid 1px hsla(0, 0%, 80%, .3);
	border-radius: 8px;

	padding: 7px 0 6px;
	margin-left: 10px;
	
	font-size: 12px;
	color: #ffffff;

	text-align: center;

}
  • padding 좌우 0이기때문에 텍스트 정렬이 되지 않았다.
    이럴 경우 text-align: center;사용하여 중앙정렬
<div class="item"> 
    position: relative;
    display: inline-block;
    cursor: pointer;  적용
	<div class"bg-contain">
    배경색의 크기 ,포지션 엡롤루트
    osition: absolute;
    width: 435px;
    height: 390px;
		<div class="bg"> 포지션 엡솔루트
        width: 407px;
    	height: 264px;
    	margin: 100px 0 0 14px;
    	border-radius: 40px;
        background-color: rgb(204, 225, 253);

        	<img> 
                width: 435px;
    		height: 390px;
		</div>
	</div>
    <div class="img-cotain">
    크기 ,포지션 엡롤루트
        width: 435px;
    	height: 364px;
        position: absolute;
    	overflow: hidden;
    	<img> 
        이미지 크기, 엡솔루트
        width: 435px;
    	height: 390px;
        position: absolute;
    </div>
    <div>
    	<span></span>
        <img class="text">
    </div>
</div>
  • 네이버의 game-event-wrap 는 3개의 이미지( 배경, 인물, 글자)를 겹쳐서 만든 경우
    z축을 다르게 사용해서?
    대략적으로 위의 구조와 같이 작성한 것을 확인 할수 가 있었음.z 인텍스를 작용을 안하면 나중에 작성한 것의 위에 올라간다는 점을 사용한 것 같음.

실제 적용하여 아래코드로 적용

<div class="game-event-wrap one">
	<div class="bg">
		<img src="https://lilleat.com/wp-content/uploads/2021/04/%EB%8D%B0%EC%8A%A4%ED%8B%B0%EB%8B%88-%EC%B0%A8%EC%9D%BC%EB%93%9C-1.png">
	</div>
	<div class="event-title-wrap">
		<span>HOT</span>
		<h2>디아블로 이모탈<br>
			알파 테스트 참가 이벤트</h2>
	</div>
</div>

#game-header .game-events-wrap .game-event-wrap{
	position: relative;
	width: 407px;
	height: 264px;
	border-radius: 40px;

	top: 0;
	transition: top linear 0.45s;
	overflow: hidden; 아래의 배경이미지에 볼더-레이우스를 적용하기 위해서 
}

#game-header .game-events-wrap .game-event-wrap .bg{
	position: absolute;
	width: 407px;
	height: 264px;
}
#game-header .game-events-wrap .game-event-wrap .bg img{
	position: absolute;
	width: 407px;
	height: 264px;
}
  • html에 이미지를 담을 div를 만들고,
    그안에 img태그를 넣어 이와 같은 css적용.

💦실제 네이버처럼 배경칸 밖으로 이미지를 나오게 하는 것은 아직 더 공부를 해야되는 듯

#game-header .game-events-wrap .game-event-wrap .event-title-wrap span {
	display: inline-block;
	
	border: solid 2px #ffffff;
	border-radius: 10px;
	padding: 4px 8px;

	font-size: 12px;
	font-weight: 600;

	text-align: center;
}

width값을 빼고 display: inline-block;를 사용해서 안의 내용으로 공간의 크기를 설정
(> 당연한 거였음...span인데 어떻게 width값이 적용이 되...😫)

#game-header .game-events-wrap .game-event-wrap{
	position: relative;
	width: 407px;
	height: 264px;
	border-radius: 40px;

	top: 0;
	transition: top linear 0.45s;
}
#game-header .game-events-wrap .game-event-wrap:hover {
	top: -20px;
}

📚학습하기자연스러운 애니매이션 효과
애니메이션 효과 추가 공부 필요

#game-main

게임메인의 좌우영역을 나눌때
네이버는 그리드를 사용.
css-그리드참조
여기에서는 배우지 않았기에, 실습에 사용하지 않는다.

📚학습하기
css 그리드 학습하기
css-그리드참조

game-main 영역을 좌우로 나누는 방법

#game-main .left{
	float: left;
	width: 900px;
	height: 2000px;
	background-color: yellow;
}
#game-main .right{
	float: right;
	width: 358px;
	height: 2000px;
	background-color: grey;
}

float를 사용한 첫 번째 방법

<div class="game-container game-flex-between">
	<div class="left">
				
	</div>
	<div class="right">
				
	</div>
</div>
#game-main .game-container {
	align-items: stretch;}

#game-main .left{	
	width: 900px;
	height: 2000px;
	background-color: yellow; }

#game-main .right{
	width: 358px;
	height: 2000px;
	background-color: grey; }

flex를 사용한 두 번째 방법

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 게임 메인의 game-event-wrap 부분을 최대한 실제 사이트와 동일하게 하는 효과 즉, 3개의 오버젝트를 겹쳐서 원하는 출력값을 얻는 것이 어려웠다.
  • 실제 사이트 코드를 보며 실습과 학습에는 아직은 배우지 않는 html태그와 css속성이 자주 보여서... 이대로 괜찮을까 란.. 고민
  • 네이버 실습만 자주해서 그런지 그전 실습에서 자주 사용했던 미디어쿼리와 애니메이션은 거의 잊고 있었는듯.. 분명 배운건데... 낮익이면서 낯설다....

✔ 해결방법작성

  • 첫 번때 실제 해당 코드리뷰를 보며, 최대한 비슷하게 구조를 가지고 와서 입력하였다.
  • 새로 보게된 태그나 속성들은 구글링을 통해 간단하게 역활을 이해했다.
  • 복습만이 살길이다...

✔ 학습소감

학습 초기에는 실제 사이트의 코드를 봐도 이해를 잘 못했는데, 이제는 70%이상은 이해가 되고, 어떻게 사용되는지 간단하게 라도 적용할 방법을 알게 된것 같아 뿌듯한 반면, 배웠지만 자주 사용하지 못했던 속성들이 아직도 낯설어 복습이 부족함을 다시 알게 되었다. ㅜ

정렬 - 사고방식 간략 분석 (一)
더미 로 top k 문제 해결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage