1.학습한 내용
오늘은 네이버 뉴스 상단영역 제작을 진행하였다.
(1) 페이지 실습
네이버 뉴스 상단 영역
△ 헤드라인 뉴스 부분과 언론사별 가장 많이 본 뉴스 영역은
float: left;
float: right; 처리가 되어 정돈이 되어 있지 않다. (바로 다음 강좌에서 진행될 부분)
(2) 학습한 내용
flex의 class화
여태껏 진행해오던 실습에서는 쉽고 빠르고 정확한 layout 배치를 위해 계속적으로 https://flexbox.help/ 의 기능을 활용하였다.
여기에 좀더 css code를 간소화 시키기 위해서 flex의 class화를 진행하였다.
HTML code
<header id="news-header">
<div class="news-container">
<div class="news-flex-between">
<nav class="news-header-left">
<ul class="news-flex-start">
<li class="on"><a href="#">뉴스</a></li>
<li><a href="#">TV연예</a></li>
<li><a href="#">스포츠</a></li>
<li><a href="#">뉴스스탠드</a></li>
<li><a href="#">날씨</a></li>
<li><a href="#">프리미엄</a></li>
<li class="tokyo"><a href="#">TOKYO 2020</a></li>
</ul>
</nav>
<div class="news-header-right news-flex-end">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>div class="news-flex-between" 이라고 div tag안에 class로 news-flex-between이라고 지정을 해주고 css code에는
CSS code
news-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}이렇게 지정을 해주었다. 부모 요소로 div class 하위에 있는 것들은 따로 일일이 flex를 지정해줄 필요가 없어서 css code 자체가 간략하게 할 수 있다.
font weight : bold;
(굵은 굵기로 숫자 700과 동일하다.)
article tag의 특성
article tag 안에는
제목을 정의하는
<h1> ~ <h6>중 하나를 무조건 넣어야 한다.
chrome 브라우저에서 javascript의 움직임 기능을 멈추는 방법
1. 개발자 도구로 들어가기
2. 톱니바퀴 클릭
3. Settings에서 Preferences에서 Debugger에서 Disable javascipt를 check
→ 작업중에 javascipt로 구동하는 구역에 일시정지를 할 수 있다.
Input tag에서 placeholder
HTML code
<div class="news-search-wrap news-flex-between">
<input type="text" placeholder="뉴스 검색">
<button type="button" class="btn-search"></button>
</div>place holder를 넣어주면 사용자에게 어떤 정보를 주면 좋을지 hint를 주는 역할을 한다.
Box-sizing: border box; 의 explorer 지원 여부
△ can i use site를 통해 확인한 결과 explorer 6-7 버전에서는 사용 불가능 하다. 그래서 하단에 나오는 headline list 배치에서는 box-sizing을 활용하지 않은 것으로 보인다.
( reference : https://www.codingfactory.net/10630 )
Z-index를 활용한 headline list 배치
HTML code
<ul class="news-headline-lists news-flex-between">
<li>
<a href="#">
<article>
<h3>TV조선 뉴스9</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>css code
#news-headline .news-headline-lists li a article {
position: relative;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article h3 {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
}
#news-headline .news-headline-lists li a article .image-wrap {
position: relative;
width: 100%;
height: 132px;
background-color: pink;
}
#news-headline .news-headline-lists li a article .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article .image-wrap .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
영역안에 3차원적인 요소인 position: absolute;값을 통해 overlay 되는 검은색 불투명 이미지와 이미지 150x150를 넣어주었다.
복습차원에서 정리하지만, position 속석 중에서 absolute값을 사용할때는 주의해야 하는데, position: absolute;라고 한후 위칫값을 지정하면 요소 중에서 position: relative;를 사용한 요소를 기준으로 위치를 결정하게 된다. postition: absolute;를 사용하려면 부모 요소에는 position: relative;라고 지정해야 원하는 대로 배치가 가능하여 위와같이 적용된 것이다.
복습 - Position 속성 5가지
- static (2차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( O )
- top, left, right, bottom 속성 사용 가능 여부** ( X )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( O )
- relative (2차원, 3차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( O )
- top, left, right, bottom 속성 사용 가능 여부 ( O )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( O )
- 부모가 absolute라면, 부모의 top, left, right, bottom 값에 따라 위치가 설정된다
- (위에서 조정된 다음) 원래 static 이었을 때의 자리를 기준으로 자신의 위치를 찾는다
- absolute (3차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( X )
- top, left, right, bottom 속성 사용 가능 여부 ( O )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( X )
- 브라우저 화면을 기준으로 위치가 설정될 수도, relative한 부모를 기준으로 위치가 설정될 수도 있다
(fixed와의 차이점!)
- fixed (3차원 속성)
- 부모 자식 간 마진 병합 발생 여부 ( X )
- top, left, right, bottom 속성 사용 가능 여부 ( O )
- 자식의 높이값이 부모의 높이값(0일 때)에 영향을 주는지 여부 ( X )
- 브라우저 화면을 기준으로 위치가 설정된다 (기준점: 브라우저 왼쪽 위 꼭지점)
- sticky (3차원 속성)
- 기준점까지는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작한다
그리고 특정 범위를 벗어나면 마지막 모습으로 해당 자리에 정지한다
** 참고: top, left, right, bottom은 정해진 기준(브라우저나 부모요소)으로부터
얼마만큼 떨어졌나를 나타낸 것이다.
( refrence : https://bky373.tistory.com/226 )
2. 실습
깃허브 소스코드:
naver 뉴스 -1 ( 상단영역 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/41
naver 뉴스 -1 ( 상단영역 ) 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/42
3. 어려웠던 내용 & 해결방법
점점 요령이 생기고 반복되는 부분이라 이번에는 크게 어려운 부분은 없었다.
4.소감
위와같이 박스모델을 적용하는 방식으로 학습했던 부분인데 완벽하게 숙지가 되지 않은 듯하여 정리 해보았고 7월 2일부터 7월 6일까지 학습하였던 부분이여서 한번 더 정확하게 정리 후 작성되어 있는 velog를 다시 수정할 예정이다.
box model과 div tag 영역들을 적절하게 감싸는 부분에 대한 연습은 계속 끝까지 부지런하게 하여야 할 것 같다. javascript 보다도 왜 이 부분들이 커리큘럼상 실습들로 중요하게 다루어 지고 있는지 알 수 있는 부분이다.
그리고 반복학습을 통해 머릿속에 숙지가 되니 재미가 붙어서 이것저것 찾으면서 알아가는 기쁨을 느끼고 있다. 학부때 생명공학 전공자로서 웹 개발쪽은 처음이지만 대학원때 담대하게 coding에 대해 잠시나마 경험하였던 마인드로 이번 교육과정을 통해 꼭 실무에서 쓰일 수 있도록 사력을 다해 공부해야겠다.
심화과정 수강생들은 teams로 전혀 교류가 없지만, 현재 AI 관련된 교육과정들과 실무 프로젝트를 이수중일텐데 정확히 어떠한 교육과정을 거치는 지는 알수가 없지만, AI에 대해서도 향후 꼭 학습을 할 예정이다. 머신러닝과 딥러닝도 교육과정 초반에 2주 동안 배웠었지만, 많은 기억들이 소실되어 버렸는데 웹프로그래밍 과정이 끝나고 웹 프로그래밍으로 일을 할수 있는 능력이 갖춰진 후 시간이 남으면 꼭 복습을 하고 인터넷에 좋은 무료강의들과 자료들로 살을 붙여 나가고 싶다.
