[대구AI스쿨] 210719 개발일지_16

권민경·2021년 7월 19일
0

대구AI스쿨

목록 보기
16/44

[배운내용]

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

  1. Wapplyzer : 웹사이트가 어떠한 기술스펙으로 확인을 하고 싶을 때 사용하는 프로그램.

  2. CSS Viewer : 크롬의 검사기능으로 css코드를 일일이 확인하지 않고, 한번에 확인할 수 있도록 하는 프로그램. 프로그램을 활성화하고 웹사이트의 요소에 커서를 올리면 그 요소의 css코드를 확인 할 수 있다.

  3. Whatfont : 어떤 폰트를 사용했는지 보여주는 프로그램.

  4. Lorem Ipsum Generate : 임의의 문장을 만들 때 활용하는 프로그램. 어떤 사이트를 카피캣할때 사이트의 모든 내용을 옮겨적기 번거롭기 때문에 이때 임의의 글을 만들어주어 해당 공간에 채워넣을 수 있게 한다.

  5. ColorZilla : 웹페이지에 사용된 색상값을 표시해주는 프로그램.

2. 네이버 메인페이지 실습1

<메인페이지 구성>
① 상단 - 검색, 네비게이션
② 중앙 - 컨텐츠
메인 왼쪽 영역 / 메인 오른쪽 영역
③ 하단 - 회사소개 등 아래라인

1) 디폴트값 설정

기본 css 설정

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

  • box-sizing: border-box : 공간 크기를 설정하고 psdding과 margin값을 설정하면 두 요소들이 공간 안에서 자리를 차지하도록 하는 코드.
    그렇지 않으면 공간크기+psdding값+margin값= 이 최종공간 크기가 된다.

  • vertical-align: middle : img에는 기본적으로 아래에 미세한 여백이 있는데 이것을 없애준다.

  • input, textarea:focus {outline: none;} : input, 여기서는 검색창에 커서가 올라갔을 때 아웃라인이 생기는 것이 기본값인데, 이것을 없애주기 위한 설정값이다.
    focus : 포커스를 받은 요소를 나타댄다. 사용자가 클릭했거나 탭 했을 때를 말한다.

  • .container : 요소의 width값을 맞추고 중앙정렬하기 위한 코드이다.이런식으로 자주사용될 법한 스타일코드는 css에 먼저 적용해주고 필요한 곳의 html 파일에 class를 작성하면 된다.

2) 상단

(1) 상단 html

네이버메인의 상단부분은 검색창 과 네이버 내의 여러 페이지로 이동하는 네비게이션 영역 으로 구성한다.

검색창은 텍스트를 입력하는 부분과 버튼으로 구성되어있는데 이 두가지를 포함하는 div태그를 만들고 그 안에 두 요소를 넣는다.
오늘 실습은 디자인 작업을 하기 위한 것이므로 아래와 같이 html설계도면을 작성한다. 

		<div class="search_area">
			
			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>
			
		</div>

※ 실제 사이트에 적용하기위해서는 form태그를 사용해야한다. input에 들어가는 검색어가 서버에 전송되어 결과값을 내야하기 때문이다. 이때 button의 type값은 submit이 된다.

네비게이션 영역은 width를 100%차지하는 div와 그 안에 네비게이션목록들을 포함하는 div태그를 만들고 그안에 ul-li-a태그 순서대로 구성한다.

(2) 상단 css

상단을 모두 감싸고있는 #main-header에는 position:relative를 지정한다.
검색영역은 중앙정렬을 위해서 flex를 지정해준다.

** flext설정 사이트: https://flexbox.help/

검색창을 만들기 위해서 input과 button의 너비를 지정해주어야하는데, button의 크기가 52*52로 정해져 있어 input에는 calc()코드로 너비를 부여한다.

calc(100% - 52px) : calc는 'calculate'의 약어로 100%값에서 52px을 뺀 값의 px로 설정한다는 뜻이다.
(부호 앞뒤 띄어쓰기 매우 중요)

여기서 input에 위와같은 calc값을 주어도 두 요소가 칸안에 정렬되지 않는다. 그 이유는 input과 button은 inline-block방식의 요소이며, inline요소 사이에는 미세한 공백이 들어가는 특징 때문이다. 이때 flex를 지정해주면 inline의 특징인 미세한 공백이 사라진다.

▒TIP▒
강사님의 경우,
영역의 차원을 결정짓거나(display,position), html태그의 성격을 결정짓는 코드를 먼저 작성 - 다음으로 공간에 관련된 코드(width,height) 작성 - 마지막으로 텍스트와 관련된 코드를 작성하는 방식으로 css코드를 구성한다.
이와 같이 개발자는 본인만의 순서대로 코드를 작성해야한다. 요소마다 속성의 순서가 제각각이면 유지보수작업시 매우 어려워지므로 통일성을 유지하는것이 중요하다.

아래 네비게이션 영역을 구성하기에 앞서 네비게이션 위아래에 있는 선을 위해 box-shadow를 지정해 준다.

Box-shadow : 요소에 그림자를 적용하기위한 것이다.아래와 같이 구성된다.
box-xhadow: [수평오프셋][수직오프셋] [흐림반경][확산반경-선택사항] [색상-필수사항]

#main-header #navbar {<br>
	box-shadow:  0 1px 3px 0 rgb(0 0 0 / 12%);
}</div>

** box-shadow 설정 사이트
https://html-css-js.com/css/generator/box-shadow/

그 다음 네비게이션의 리스트 요소들은 block성질을 가지고 있으므로 x축 정렬을 위해 inline-block으로 바꾸어준다.
항목들 간에 여백을 주기위해 margin-right를 지정해주며, 마지막에 굳이 공백을 없애주지 않아도 되기 때문에 last-child를 따로 수정해주지 않아도 된다.

3) 메인 왼쪽

네이버 메인은 기사 등이 있는 왼쪽 영역과 로그인,광고 등이 있는 오른쪽 영역으로 나뉜다.

(1) 왼쪽 상단 html

첫번째 div는 배너광고 영역.
두번째 div는 뉴스스탠드 영역으로 윗부분은 제목과 정렬방법 아이콘이, 아래쪽에는 언론사를 나열되어 있다. 이 때 언론사가 나열된 부분은 ul-li의 리스트 코드를 사용한다.

(2) 왼쪽 상단 css

  • main{
    overflow: hidden;}값을 준다.
  • main #main-left영역의 공간을 지정한다.
  • main #main-right영역의 공간을 지정한다.
  • main #banner_wrap 영역 공간을 지정한다.
main #news_wrap .news_header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0 16px 0;
}

  • '뉴스스탠드'라는 제목과 정렬 아이콘을 space-between으로 정렬되도록 flex를 지정한다.

  • 그 외 영역들을 지정해주고, 리스트요소는 아래와 같다.

main #news_wrap .news_lists .news_list{
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;
	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb;
	text-align: center;
}
  • 24개의 항목을 6X4로 나열하므로 6/100% = 16.6666%로 각 너비를 지정.
  • border-bottom과 border-right를 지정해준다. 이때 가장 오른쪽 열과 가장 아래 행은 겹치는 테두리값이 있으므로 없애주어야한다. 이때 nth-child(6n)과 같이 6번째 값을 모두 지정하는 수를 사용할 수도 있다.
main #news_wrap .news_lists .news_list:nth-child(6n){
	border-right: none;
}
  • 이미지 중앙정렬을 할때 공식은 다음과 같다.(한번 나온내용이니 외우기☆)
>main #news_wrap .news_lists .news_list img{
	position: relative;
    
	top: 50%;
	transform: translateY(-50%);
      }

(3) 왼쪽 중앙 html

  • 상단의 제목이 있는 부분을 left-header right-header로 나눈다.
  • 오른쪽의 '1,853 개의 글'에서 숫자부분이 볼드체로 되어있는데 이때 strong을 사용할 수 있다.

strong태그 : 텍스트에 강조 효과를 주는 코드. 기본적으로 굵게 효과를 준다.

  • 제목 아래 네비게이션(카테고리 버튼)은 리스트로 나열한다.
  • 그 아래 게시글은 img와 div로 나누어 div안에 각 span, h4, p를 포함시킨다.

(4) 왼쪽 중앙 css

  • flext와 위치 지정을 해준다.
  • 네비게이션에서 글자 뿐 아니라 칸 안에서 어디라도 클릭이 가능하도록 a태그 영역을 100%로 주고, 글을 y축 중앙정렬 한다. 공간에 높이값이 지정되어 있는 경우, line-height에 높이값을 입력하면 y축 중앙정렬이 가능하다.
main #blog_wrap .blog_nav ul li a{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 49px;
	text-align: center;
}

(5) 왼쪽 아래 html

  • img와 div로 공간을 나누어 사진과 글 영역을 설정한다.

(6) 왼쪽 아래 css

  • space-between의 flex값을 준다.
  • 그 외에 특별한 사항없이 배딩과 글자크기를 지정해준다.

[어려웠던 점]

  1. main부분에서 overflow: hidden을 사용하는 이유.

  2. search_area에서 button이 화면 확대, 축소 비율에 따라 미세한 공백이 보이는 현상이 있는데, 이는 네이버 메인에서 사용한 방법을 보고 비교해보아야겠다.

[해결방법]

  1. 자식이 3차원이라도 부모에게 높이값의 영향을 줄수 있기 때문에. → 이전 개발일지 참고하기

[학습소감]

코로나로 인한 비대면수업의 한계를 느끼고 있는 것 같다. 수업 진행하면서 사소하게 드는 의문점들을 팀즈에 일일이 묻고 하는 것도 싫고, 커뮤니케이션 하면서 수업하는 것이 얼마나 중요한지를 깨닫는 요즘이다. 그리고 여전히 배운 부분인데도 헷갈려하는 부분이 있어 다시 한 번 복습의 중요성을 깨달았다.ㅠ_ㅠ

profile
권민경
AI School 취준생 개린이
이전 포스트

[대구AI스쿨] 210716 개발일지_15

다음 포스트

[대구AI스쿨] 210720 개발일지_17

0개의 댓글

관련 채용 정보