[배운내용]

HTML, CSS, JavaScript를 배우고 난 후, 프론트엔드 개발자로서 더 깊이있는 공부를 하기 위해서, 리액트(React), 앵귤러(Angular), 뷰(Vue) 등과 같은 도구들을 공부할 수 있다. 이때, 이 도구들에서 사용하는 css작성 방법이 있는데, 이를 css-in-js라고 한다.
이 도구들을 사용하여 css를 적용하면 도구들에서 css클래스명을 랜덤하게 생성하는데, 네이버의 '게임'페이지에서는 이 도구들을 사용한 흔적이 많이 보인다.

Box-shadow넣기

Box Shadow CSS Generator
에 접속해서 좌우, 상하, 블러, 색상, 퍼짐정도 등을 설정한 후 코드를 사용할 수 있다.

라운드형태의 검색창 만들기

<div class="search_wrap game_flex_start">
	<input type="text" placeholder="라운지, 게시물 검색">
	<button type="button" class="btn_search"></button>
</div>

#game_header nav .right .search_wrap{
	width: 300px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, .28);

	overflow: hidden;
}

#game_header nav .right .search_wrap input{
	width: calc(100% - 38px);
	height: 38px;
	padding: 10px 12px 9px 14px;
	border: none;
	background-color: transparent;

	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;
}

• input과 button을 감싸는 div에 border-radius를 넣었을 때 아무변화가 없는데, 이는 둥근모서리를 넘는 자식부분이 보이는 것이다. overflow:hidden;값을 주어 자식부분이 보이지 않도록 설정해준다.
• 검색창 부분은 검정색에 투명도를 적용해 준 값으로, 기본 배경값이 흰색이므로 자식태그인 input과 button에 배경색을 transparent로 지정해준다.

[어려웠던 점]

특별히 없었다.

[학습소감]

오늘은 지금까지 실습 중에서도 조금 새로운 레이아웃을 체험 할 수 있어 좋았다. transition도 사용해 볼 수 있어서 좋았다. 오늘 수업에서 자바까지 학습한 후 활용할 수 있는 도구도 살짝 언급되었는데, 개발분야가 공부를 계속 해야하는 부담감도 있지만 그래서 더 재미있는 분야같다.