2023. 3. 23. 19:58ㆍ스터디/항해 99
네이버 뉴스 스탠드 분석
화면을 크게 구조적으로 나누어서 분석해보면 상단에 버티컬 슬라이드, 중간에 탭메뉴가 들어가있는 메뉴바 하단의 탭 화면은 좌측 카테고리 탭 메뉴랑 우측 메인 내용이 있으며 화살표로 이동시 메인 내용이 변경된다.
탭 안에 탭이 있는 중첩 탭 구조이다.
이중 탭구조 간단 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
.tab-link {
display: inline-block;
cursor: pointer;
}
.tab-link-2 {
display: inline-block;
cursor: pointer;
}
.tab-content {
display: none;
}
.tab-content.on {
display: block;
}
.tab-content-2 {
display: none;
}
.tab-content-2.on {
display: block;
}
</style>
</head>
<body>
<a class="tab-link on" data-type="tab-1">첫번째 탭</a>
<a class="tab-link" data-type="tab-2">두번째 탭</a>
<a class="tab-link" data-type="tab-3">세법째 탭</a>
<hr />
<div id="tab-1" class="tab-content on">첫번째 탭 내용</div>
<div id="tab-2" class="tab-content">두번째 탭 내용</div>
<div id="tab-3" class="tab-content">
세번째 탭 내용
<div>
<a class="tab-link-2 on" data-type="tab-3-1">3-1 탭</a>
<a class="tab-link-2" data-type="tab-3-2">3-2 탭</a>
<a class="tab-link-2" data-type="tab-3-3">3-3 탭</a>
</div>
<div id="tab-3-1" class="tab-content-2 on">첫번째 탭 내용</div>
<div id="tab-3-2" class="tab-content-2">두번째 탭 내용</div>
<div id="tab-3-3" class="tab-content-2">세번째 탭 내용</div>
</div>
<script>
$('.tab-link').click(function () {
var tab_id = $(this).attr('data-type');
$('.tab-link').removeClass('on');
$('.tab-content').removeClass('on');
$(this).addClass('on');
$('#' + tab_id).addClass('on');
});
$('.tab-link-2').click(function () {
var tab_id = $(this).attr('data-type');
$('.tab-link-2').removeClass('on');
$('.tab-content-2').removeClass('on');
$(this).addClass('on');
$('#' + tab_id).addClass('on');
});
</script>
</body>
</html>새롭게 알게 된 내용
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Using data attributes - Learn web development | MDN
HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks su
developer.mozilla.org
탭 간단예제를 살펴보면 a 태그를 이용할 때 data-type attribute를 사용하고 있는 것을 확인 할 수 있다.
HTML 요소에 추가 정보를 저장 할 수 있도록 하는 attribute이다. 크롤링 할때 접근되지 않으므로 보여야 하는 내용은 담지 않는 것을 권한다고 한다.
CSS 스타일링 작성
스타일 코드를 하나로 관리하기 보단 나누어서 관리하는 것이 유지보수의 측면이나 개발 측면에서도 편하다고 한다.
현업에서 여러명이서 하나의 스타일링 코드를 작성하는 경우도 여럿 있기 때문
뿐만 아니라 스타일링 코드를 작성하고 간단한 동작까지 퍼블리싱 할때 중요한 점은 HTML 문서의 추가가 발생하고 CSS가 추가 되었을때 자바스크립트 코드단 까지 수정이 이루어지지 않도록 하는것이 중요하다고 한다.
반응형 웹 이해하기
현재는 사용하지 않는 분위기가 많다고 한다.
하나의 웹 html 문서 안에 css 여러 셋으로 들어가게 될때 유지보수의 어려움이 크다고 한다.
그래서 현재는 pc html, 모바일 html을 따로 두고 접속하는 디바이스에 따라서 다르게 보여주는 형태로 일을 하는 경우가 많다고 한다.
반응형의 경우 모바일 스타일링을 의도대로 수정하고 모바일에서 정상적으로 작동하더라도 사이드 이펙트로 피시화면에 스타일링이 다르게 되는 경우도 있기 때문이다.
넷플릭스 웹 로그인 페이지에서 반응형 알아보기
https://www.netflix.com/kr/login
미디어 태그의 사용
특정 사이즈를 규정해서 이거보다 크면 피시 작으면 모바일이라고 지정
@media only screen and (min-width: 740px)새로 알게된 내용
background-color 투명도 주기
background-color: rgba(0,0,0,.75);
반응형 로그인창 만들기
/* 740px 이하일때 */
/* button width 조정 */
@media (max-width: 740px) {
.login-form-wrapper {
max-width: initial;
height: 100%;
display: flex;
justify-content: center;
padding: 20px;
border-radius: 0px;
}
.login-button {
background: blue;
}
}
@media (max-width: 400px) {
.login-form-wrapper {
max-width: initial;
height: 100%;
display: flex;
justify-content: center;
padding: 20px;
border-radius: 0px;
}
.login-button {
background: gold;
}
}max-width: initial; 을 통해서 기존에 걸우둔 너비값을 초기화 해주고 있다.
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries#%ea%b5%ac%eb%ac%b8
미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN
미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.
developer.mozilla.org
텍스트 몇줄만 남기고 자르기
https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp
-webkit-line-clamp - CSS: Cascading Style Sheets | MDN
-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.
developer.mozilla.org
강의를 듣고 느낀 점
전체적으로 코드를 살펴보면서 설명해주는 시간이었기 때문에 현업에선 어떻게 사용하고 무엇이 지양되고 지향되는지 알 수 있는 시간 이었다.
'스터디 > 항해 99' 카테고리의 다른 글
| 웹 퍼블리싱 정복반 - 3주차 마무리 (0) | 2023.03.23 |
|---|---|
| 웹 퍼블리싱 정복반 - 2주차 마무리 ( 화면 클론하기 ) (0) | 2023.03.22 |
| 웹 퍼블리싱 정복반 - 2주차 마무리 (0) | 2023.03.21 |
| 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (3) (0) | 2023.03.21 |
| 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (2) (0) | 2023.03.21 |