네이버 메인 예제 1일차

---

개발에 유용한 크롬 확장 프로그램

개발자를 위한 28가지 크롬 확장 프로그램 에서

CSSViewer : 검사 기능을 쓰지 않고 css 구성 속성을 바로 띄우는 프로그램.
Lorem Ipsum Generator : 더미 텍스트를 만드는 프로그램.(큰 효용은 잘 모르겠다)
Wappalyzer : 페이지 구성 요소, 위젯 등을 알아보는 프로그램.
ColorPick Eyedropper : 그림판 스포이트 처럼 색상(코드)을 뽑는 프로그램.
을 추천 받았다.

---

새로운/유념할 내용

• css 속성 초기화

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ol, ul{
	list-style: none;
}
a{
	text-decoration: none;
	color: #000000;
}
img{
	vertical-align: middle;
}
button {
	border: none;
}
input, textarea {
	outline: none;
}
.clearfix{
	clear: both;
}

이 코드를 통해 다른 css 코드로 정의된 속성을 초기화할 수 있다.
일종의 세트 코드라고 보면 될 듯.

• rgb(0 0 0 / 12%)

rgba 코드로 red, green, blue / alpha 인데 alpha는 0~1(혹은 0~100%) 이며 낮을수록 투명도가 높다. 불투명도라고 생각하면 될 듯.

<div id="navbar">
	<li><a href="#">메일</a></li><br>
</div>
#navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

<div id="navbar">
	<li><a href="#">메일</a></li><br>
</div>
#navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 100%);
}

• focus 속성을 줬지만 코드 내에서는 outline: none으로 크게 변화가 없었다. 실제로는 다음처럼 클릭시 속성이 바뀌는 효과를 줄 수 있다.
  

(html)
<input class="red-input" value="red-focus"><br>
<input class="blue-input" value="blue-focus">
(css)
.red-input:focus {
  background: yellow;
  color: red;
}
.blue-input:focus {
  background: yellow;
  color: blue;
}

---

학습 소감

조금씩 아는 내용을 묶어서 세트가 되는 코드가 늘어나는 듯하다. 이런 세트 코드가 많아지면 시안을 보고 척척 만들 수 있지 않을까 기대가 된다.

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.