실습 29일 차
1. 학습한 내용
- 실질적으로 코딩은 완성에 가깝게 마무리가 되었다
- 다만 아직 함수 쪽은 이해가 부족한 부분이 많기 때문에 코드 리뷰를 다시 해보았다
- 햄버거 버튼
<script>
function doDisplay(){
var con = document.getElementById("myNav");
if(con.style.display == 'block'){
con.style.display = 'none';
}else{
con.style.display = 'block';
}
}
</script>-button에 onclick()에 doDisplay라는 함수를 집어넣어 작동시키는 함수
-해당(클릭시 구동할 함수에서 가져오는 값을 가진 ID) ID값을 가져와서 block되어있으면 none으로, none이면 block으로
-즉 클릭 시 보여지고 안보여지고를 만들 수 있는 함수를 작성
-이때 중요한 것은 처음에 block 혹은 none을 지정해주기 때문에 해당 ID를 지닌 값에
block 혹은 none 값을 css로 적용해주어야 함수가 정상적으로 작동이 된다
-처음에 이 부분을 이해를 못하고 한참을 헤메다가 결국엔 css를 적용하면서 해결 할 수 있었다- 슬라이드 함수
<div class="main">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
<li><img src="./img/Head-back-img.png" alt="image01"/></li>
<li><img src="./img/back-slide-2.png" alt="image02"/></li>
<li><img src="./img/back-slide-3.png" alt="image03"/></li>
</ul>
<div id="cbp-bicontrols" class="cbp-bicontrols">
<span class="cbp-biprev"></span>
<span class="cbp-bipause"></span>
<span class="cbp-binext"></span>
</div>
</div>var cbpBGSlideshow = (function() {
var $slideshow = $( '#cbp-bislideshow' ),
$items = $slideshow.children( 'li' ),
itemsCount = $items.length,
$controls = $( '#cbp-bicontrols' ),
navigation = {
$navPrev : $controls.find( 'span.cbp-biprev' ),
$navNext : $controls.find( 'span.cbp-binext' ),
$navPlayPause : $controls.find( 'span.cbp-bipause' )
},
// current item´s index
current = 0,
// timeout
slideshowtime,
// true if the slideshow is active
isSlideshowActive = true,
// it takes 3.5 seconds to change the background image
interval = 3500;
function init( config ) {
// preload the images
$slideshow.imagesLoaded( function() {
if( Modernizr.backgroundsize ) {
$items.each( function() {
var $item = $( this );
$item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
} );
}
else {
$slideshow.find( 'img' ).show();
// for older browsers add fallback here (image size and centering)
}
// show first item
$items.eq( current ).css( 'opacity', 1 );
// initialize/bind the events
initEvents();
// start the slideshow
startSlideshow();
} );
}
function initEvents() {
navigation.$navPlayPause.on( 'click', function() {
var $control = $( this );
if( $control.hasClass( 'cbp-biplay' ) ) {
$control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
startSlideshow();
}
else {
$control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
stopSlideshow();
}
} );
navigation.$navPrev.on( 'click', function() {
navigate( 'prev' );
if( isSlideshowActive ) {
startSlideshow();
}
} );
navigation.$navNext.on( 'click', function() {
navigate( 'next' );
if( isSlideshowActive ) {
startSlideshow();
}
} );
}
function navigate( direction ) {
// current item
var $oldItem = $items.eq( current );
if( direction === 'next' ) {
current = current < itemsCount - 1 ? ++current : 0;
}
else if( direction === 'prev' ) {
current = current > 0 ? --current : itemsCount - 1;
}
// new item
var $newItem = $items.eq( current );
// show / hide items
$oldItem.css( 'opacity', 0 );
$newItem.css( 'opacity', 1 );
}
function startSlideshow() {
isSlideshowActive = true;
clearTimeout( slideshowtime );
slideshowtime = setTimeout( function() {
navigate( 'next' );
startSlideshow();
}, interval );
}
function stopSlideshow() {
isSlideshowActive = false;
clearTimeout( slideshowtime );
}
return { init : init };
})();(function(c,q){var m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
c.fn.imagesLoaded=function(f){function n(){var b=c(j),a=c(h);
d&&(h.length?d.reject(e,b,a):d.resolve(e));
c.isFunction(f)&&f.call(g,e,b,a)}function p(b){k(b.target,"error"===b.type)}function k(b,a){b.src===m||-1!==c.inArray(b,l)||(l.push(b),a?h.push(b):j.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),r&&d.notifyWith(c(b),[a,e,c(j),c(h)]),e.length===l.length&&(setTimeout(n),e.unbind(".imagesLoaded",
p)))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():0,r=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),l=[],j=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",p).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");
if(e&&e.src===d)k(a,e.isBroken);
else if(a.complete&&a.naturalWidth!==q)k(a,0===a.naturalWidth||0===a.naturalHeight);
else if(a.readyState||a.complete)a.src=m,a.src=d}):
n();return d?d.promise(g):g}})(jQuery);-슬라이드 함수 부분은 클론코딩해온 부분이라 이해도가 많이 떨어지는 편이다
-다른 부분들 보다 jQuery를 이용해서 슬라이드 화살표 등의 이미지를 가져오는 함수를 사용했는데 이 부분은 사실상 거의 이해를 못하고 있다
-해당 함수를 만든 작성자가 일부러 저렇게 만들어 놓은것 같은데 하나하나 떼어놓고 봐도 쉽지가 않은 것 같다
-사실 슬라이드 함수 부분은 구글링을 하다가 운이 좋게 찾아서 사용할 수 있는 코드부분 이었는데 아니었으면 상당히 고생할 수 있었던 부분이기도 하다
-해당하는 함수들이 어떻게 구동이 되는지는 일부 이해가 가지만 아직까지 완전히 이해가 가지도 않고 만약에 아무것도 없이 이러한 부분을 구현해내라고 한다면 솔직히 못할 것 같다
-특히 이미지를 가져오는 함수 부분은 하나도 이해가 가지 않는다는게 문제인 것 같다
-좀 더 세세하게 공부할 필요가 있는 부분이다- top 버튼
<div class="topBtn">
<a href="#" class="topBtn-a"><i class="fa-solid fa-circle-chevron-up"></i></a>
</div>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 500){
$('.topBtn').show();
} else{
$('.topBtn').hide();
}
});
$('.topBtn').click(function(){
$('html, body').animate({scrollTop:0},400);
return false;
});
</script>-이미 한번 만들어 본 적이 있어서 사용하는데 크게 어렵진 않았다
-스크롤이 일정 부분 내려갔을 때 모습이 나타나며 클릭 시 400의 속도로 html,body가 있는 위치로 돌아가는 함수- Headerd NavBar + Hamberger
<header>
<div class="container" id="company">
<h1>
<!--------------------- Resoft Logo ----------------------->
<a href="main.html"><img src="./img/Header-Logo.svg"></a>
</h1>
<!----------------------- Nav Bar ------------------------->
<ul>
<li class="nav">
<a href="company.html" class="nav-item is-active" active-color="#78EAFF">회사소개</a>
<a href="business.html" class="nav-item" active-color="#78EAFF">사업현황</a>
<a href="information.html" class="nav-item" active-color="#78EAFF">정보마당</a>
<span class="nav-indicator"></span>
</li>
<script src="./js/header5.js"></script>
<!--------------------- Hamberger Button ---------------------->
<li class="btn">
<button type="button" onclick="doDisplay()"><i class="fa-solid fa-bars" style="color:black"></i></button>
</li>
</ul>
</div>
<!------------------------- company header ------------------------->
<div id="company-header">
<h1>회사소개</h1>
</div>
<!------------------------- Hamberger Navbar --------------------------->
<div id="myNav" class="overlay">
<div class="overlay-content">
<a class="mobile" href="company.html">회사소개</a>
<a class="m-line"href=""></a>
<a href="company.html#introduce-resoft">REsoft소개</a>
<a href="company.html#history">연혁</a>
<a href="company.html#Organization-chart">조직도</a>
<a href="company.html#certification">특허&인증</a>
<a href="company.html#directions">오시는 길</a>
</div>
<div class="overlay-content">
<a class="mobile" href="business.html">사업현황</a>
<a href="business.html#ecoce">ECOCE</a>
<a href="business.html#moado">moaDo</a>
<a href="business.html#remainder">Etc</a>
</div>
<div class="overlay-content">
<a class="mobile" href="information.html">정보마당</a>
<a href="information.html#information">REsoft소식</a>
</div>
</div>
<!--------------------------- Hamberger Script ----------------------------->
<script>
function doDisplay(){
var con = document.getElementById("myNav");
if(con.style.display == 'block'){
con.style.display = 'none';
}else{
con.style.display = 'block';
}
}
</script>
</header>-헤더부분에 js 이벤트를 적용할 게 많았다
-hover 시 각 navbar를 색상이 변하면서 밑줄이 생기도록 만들고자 했다
-색상의 변화만 주는건 css로도 충분히 쉽게 가능했지만 밑줄을 만들고 또 클릭 되었을 때 다른 색깔과 밑줄을 지니게 하기 위해서는 js이벤트가 필요했다
-이 부분도 처음에 많이 헤메면서 구글링을 많이 했던 것 같다
-여러가지 클론코딩할 샘플들을 찾아놓고 하나씩 적용해서 만들어보면서 다양하게 시도했던 것 같다
-성공한 것도 실패한 것도 여러가지 있었는데 그 중에서 가장 스타일적으로 괜찮은 부분을 선택, 적용할 수 있었다const indicator = document.querySelector(".nav-indicator");
const items = document.querySelectorAll(".nav-item");
function handleIndicator(el) {
items.forEach(item => {
item.classList.remove("is-active");
item.removeAttribute("style");
});
indicator.style.width = `${el.offsetWidth}px`;
indicator.style.left = `${el.offsetLeft}px`;
indicator.style.backgroundColor = el.getAttribute("active-color");
el.classList.add("is-active");
el.style.color = el.getAttribute("active-color");
}
items.forEach((item, index) => {
item.addEventListener("click", e => {
handleIndicator(e.target);
});
item.classList.contains("is-active") && handleIndicator(item);
});
function preventClick(e){
e.preventDefault()
}-navbar 각 페이지에 active class를 넣어놓고 active될 시 color를 지정해 놓았다
-이 부분은 각기 다른 color를 지정해서 다양하게 적용할 수 있는 부분이다
-function(el)은 콜백역할을 하는 인라인 익명함수 정의라고 찾을 수 있었다
-is active가 된 부분의 원래 style을 제거하고 indicator의 폭과 위치를 정해서 밑줄을 만들어주고 active-color를 가져오는 함수인 것
-그리고 이러한 함수의 구동은 클릭을 통해 함수 구동 될 수 있도록 함수를 짜 놓았다
-이 부분도 100% 이해가 된 건 아니지만 그래도 어느정도 이해를 바탕으로 사용할 수 있었다
-물론 제로에서 함수를 만들어 내라고 한다면 아직은 힘들지 않을까하는 생각이 든다
-아직은 클론코딩으로 따라하면서 배울 부분들이 많다, 특히 내가 구글링하면서 찾은 특정 사이트는 여러가지 도전하면서 만들어 보고 싶게 만드는 부분들이 많다
https://wsss.tistory.com/
-해당 사이트는 css를 전문적으로 개발하는 하시는 분이 여러가지 css적인 요소들을 클론코딩해볼 수 있도록 코드를 올려놓아주신 사이트인데 도움을 많이 받기도 했고 앞으로도 공부해볼 요소들이 많은 사이트다- 더보기 버튼
<div class="add">
<div class="button"><button class="info-btn">더보기</button></div>
</div>
<script>
if (window.matchMedia("(min-width: 1281px) and (max-width: 1920px)").matches) {
$(function () {
$(".card").hide();
var array = [];
var list = document.getElementsByClassName('card');
for (var i = 0; i < list.length; i++) {
array.push(list[i]);
}
var visiArray = [];
visiArray = array.slice(0, 6);
for (var i = 0; i < visiArray.length; i++) {
visiArray[i].style.display = 'block';
}
var infoHight = document.getElementById('infomation');
var load = document.getElementsByClassName('button')[0];
load.addEventListener('click', function (e) {
e.preventDefault();
var hiddenArray = [];
hiddenArray = array.slice(6, 10);
for (var i = 0; i < hiddenArray.length; i++) {
hiddenArray[i].style.display = 'block';
}
load.style.display = 'none';
infoHight.style.height = '2692px';
});
});
}
if (window.matchMedia("(min-width: 769px) and (max-width: 1280px)").matches) {
$(function () {
$(".card").hide();
var array = [];
var list = document.getElementsByClassName('card');
for (var i = 0; i < list.length; i++) {
array.push(list[i]);
}
var visiArray = [];
visiArray = array.slice(0, 6);
for (var i = 0; i < visiArray.length; i++) {
visiArray[i].style.display = 'block';
}
var infoHight = document.getElementById('infomation');
var load = document.getElementsByClassName('button')[0];
load.addEventListener('click', function (e) {
e.preventDefault();
var hiddenArray = [];
hiddenArray = array.slice(6, 10);
for (var i = 0; i < hiddenArray.length; i++) {
hiddenArray[i].style.display = 'block';
}
load.style.display = 'none';
infoHight.style.height = '2982px';
});
});
}
if (window.matchMedia("(max-width: 768px)").matches) {
$(function () {
$(".card").hide();
var array = [];
var list = document.getElementsByClassName('card');
for (var i = 0; i < list.length; i++) {
array.push(list[i]);
}
var visiArray = [];
visiArray = array.slice(0, 2);
for (var i = 0; i < visiArray.length; i++) {
visiArray[i].style.display = 'block';
}
var infoHight = document.getElementById('infomation');
var load = document.getElementsByClassName('button')[0];
var count = 0
load.addEventListener('click', function (e) {
e.preventDefault();
var hiddenArray = [];
console.log(count);
if(count == 0){
hiddenArray = array.slice(2, 4);
for (var i = 0; i < hiddenArray.length; i++) {
hiddenArray[i].style.display = 'block';
count += 1;
}
infoHight.style.height = '2190px';
}
else if(count == 2){
hiddenArray = array.slice(4, 6);
for (var i = 0; i < hiddenArray.length; i++) {
hiddenArray[i].style.display = 'block';
count += 1;
}
infoHight.style.height = '3118px';
}
else if(count == 4){
hiddenArray = array.slice(6, 8);
for (var i = 0; i < hiddenArray.length; i++) {
hiddenArray[i].style.display = 'block';
count += 1;
}
infoHight.style.height = '4042px';
}
else if(count == 6){
hiddenArray = array.slice(8, 10);
for (var i = 0; i < hiddenArray.length; i++) {
hiddenArray[i].style.display = 'block';
count += 1;
}
infoHight.style.height = '4970px';
load.style.display = 'none';
}
});
});
}
</script>-해당 함수는 함께하는 조원이 작성해서 만든 코드인데 처음에는 미디어쿼리 부분이 적용이 안되었고
css쪽에서 display:none부분이 적용이 안되어서 조원 분이 고생을 많이 하셨던 기억이 난다
-나는 이전에 리소프트 홈페이지 클론코딩 당시 고생도 많이 했었고 그러면서 클론코딩을 했던 기억이 있어서 그나마 조금은 쉽게 접근 할 수 있었던 것 같다
-일단 해당 함수를 미디어쿼리 3가지 범위로 나누어야 해서 각자 따로 적용을 시켰다
-또한 각자 구동을 할 때 잘라줘야할 범위가 다르고 나타내야할 범위가 달랐기 때문에 나누어 주었다
-이러한 부분 또한 이전에 리소프트에서 클론코딩한 부분에서 도움을 받아서 작성을 할 수 있었던 부분이라고 할 수 있다
-차이점이라면 해당 함수가 적용되었을 때 height를 지정해서 스타일을 각 함수 구동에 맞게 적용해 주었다는 점일 것이다
-마지막에 display:none부분은 팀원 분이 버튼에 해당하는 class만을 사용하시니 자꾸 전체 적용이 되지않아서 문제가 발생했는데 button 전체를 감싸고 있는 div의 class를 사용하니 문제없이 적용할 수 있었다
-이후 세부적인 위치 등은 css를 통해 각 미디어쿼리에 적용해서 사용할 수 있었다2. 학습한 내용 중 어려웠던 점
- 함수 부분은 아직까지도 힘들다
- 아무것도 없는 상태에서 구현해보라고 한다면 힘든게 사실이다
- 하지만 처음과는 달리 이해도도 많이 늘었고 어느정도는 사용할 수 있게 된 것도 사실이다
- 클론코딩을 기반으로 함수를 많이 사용하고 있지만 적어도 사용할 수 있을 정도의 이해도가 생겼다는 부분은 고무적이라고 할 수 있다
- 아직도 클론코딩을 하고도 적용하지 못하고 사용하지 못하는 부분들도 많지만 조금씩 할 수 있는 부분들이 늘어가고 있다
- 언젠간 나만의 함수를 슬라이드 부분처럼 코딩해서 오픈해보고 싶다
3. 해결방법
- 여러가지 사이트들도 많이 찾아보고 구글링도 하면서 알지못하는 여러사람들에게 도움을 받고있다
- 내가 필요로 하고자 하는 부분들을 최대한 배워서 언젠간 내가 만든 코드를 오픈해보고 싶다
4. 학습소감
- 끝나지 않을 것 같은 프로젝트가 1차적으로 마무리가 되었다
- 그것도 한 주나 빠르게 나름 성공적으로 마무리가 되었다
- 다시 한 번 말하지만 부족한게 많다, 개발자코드로 봤을 때 어그러지는 부분이라던가 사용하고있지만 100% 이해하지 못하고있는 함수라던가, 계속 공부해야할 부분들이다
- 아직 2차적으로 피드백받아서 구현할 부분들이 더 있다고 하니 그 부분들도 잘 할 수 있도록 해봐야겠다
- 한 주의 시간을 벌었으니 그 시간동안 이때까지 해왔던 작업들, 깃허브 등을 정리완료해야겠다
- 바쁘게 지내온 만큼 돌아보고 정리할 수 있는 시간을 벌었으니 소중히 사용해야겠다
코딩공부중