✔TODAY

네이버 상단 ~메인 왼쪽을 실습

✔ 학습한 내용

웹사이트 제작시 유용한 크롬 어플

추천블로그

• Wappalyzer
  웹사이트에서 사용되는 기술스팩을 확인 할 수 있다.
• CSS Viewer
  css 속성을 쉽게 볼 수 있다.
• Lorem Ipsum Generator (Default Text)
  임의 문장을 만들때 도와준다.
  임의 텍스트정보가 필요할때 임의 의 문장을 만들수 가 있다.
• ColorZilla
  웹에 나와있는 색상의 코드를 확인 할 수 있다.

네이버실습HTML

Github의 잘 못된 사용으로 동일한 네임의 파일이 덮어쓰기 된걸 확인 했다...
💥💥💥제대로 된 사용방법을 익히도록 하자...ㅜㅜ!!

네이버 실습

css 초기화 작업

*{	margin: 0;
	padding: 0;
	box-sizing: border-box;}

ol, ul{	list-style: none;}

a{	text-decoration: none;
	color: #000000;}

img{vertical-align: middle;}

.clearix{clear: both;}

상단

html

• form테그를 사용해서 서버에 보낼 수 있게 해야되지만 여기서는 디자인만 할 예정으로 생략한다.
  사용시 버튼의 타입은 submit이다.

• 버튼은 태생적으로 볼더 값을 가지고 있기때문에 초기화 값에서 버튼의 볼더를 없앤다.

button{ border: none; }

• input과 button
  둘 다 인라인 요소
  인라인요소가 연달아 있으면, 태생적으로 사이에 빈공간이 생길 수 밖에 없다. search_wrap 안에서 100% -한 값을 넓이 값으로 하겠다.

width: calc()
width: calc(100% - 52px)

💥띄어쓰기 잘 쓰기!!!

이때 inline간의 공백도 영역으로 인식하기때문에, 버튼이 다른 열로 밀리게 된다.

search_wrap에 display: flex 넣어서 해결한다.

💥FLEX-WRAP 대해 다시 공부하기!

#main-header .search_area .search_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	position: relative;

• input에 텍스터를 작성시 테두리가 생기는데,
  가상선택자를 사용해서 해결한다.

#main-header .search_wrap input:focus{
	outline: none;
}

💥💥💥주의
띄어쓰기 주의......선택자와 가상선택자간의 띄어쓰기 하기말기.

• input과 textarea의 테두리 없애기

input ,textarea{
	outline: none;
}

위의 속성을 css초기화 작업때 넣는다.
는 디폴트값으로 넣기

-li의 x축 정렬
inline-block도 태생적 공백을 가지고 있다. 위의 방법으로 없앴을 수 있다.

#main-header #navbar ul li{
	display: inline-block;
	margin-right: 5px;}

?
search_wrap와 input이 브라우저 화면 비율에 따라 공백이 생기거나 없어진다.
완성본 문서를 참고하였으나, 완성본도 동일한 현상이 보임으로 코드에 따른 현상인 것으로 보인다.
추가 학습때 해결방법을 알아볼 것.

main

main {overflow: hidden;}

메인밑 자식값들이 부모값에 영향을 줄 수 있도록 (높이 ) 설정

• 버튼 타입은 타입을 설정을 정하지않으면 디폴트값으로 타입으로는 버튼이 들어가 있임

• 뉴스로고 이미지 중앙정렬
  -x축 정렬

main #news_wrap .news_lists .news_list {
position :relative
text-align: center}

-y축정렬

main #news_wrap .news_lists .news_list img{
top:50%;
transform: translatey(-50%);

• strong
  디폴트값으로 폰드의 굵기를 굵게 만든다.

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

• 가장 크고 위험한 적은 나 자신...날씨때문인지 컨디션의 문제인지 집중하는 데 너무 힘들었다.
• inline과 block요소의 개념을 잘 이해 못 한 것 같다.
• 서치랩과 버튼간의 원하는 출력이 안나와서... 화면 비율에 따라 공백이 생기는 것은 어떻게 해결하면 되는지 아직도 잘 모르겠다.
• github를 너무 대충 학습한 것 같다. 이번에 파일을 확인하면서 파일 관리가 엉망진창인 것을 확인 했다.

✔ 해결방법작성

• 컨디션의 문제는 환경의 변화로 해결해 보자고 한다.
• github관련으로는 파일이름바꿔서 수정파일을 올렸다...
• 서치랩과 버튼 비율문제는 아직도 해결하지 못 했다.

✔ 학습소감

오늘은...인강도 겨우 듣고 개발일지도 당일안에 해결하지 못 했다. 실습의 내용을 따라가고 있는 것 같지만, 해면서 놓쳤던 중요 개념들이 뭔지 알아가고 있는 중으로... 부족함을 많이 느낀다.