웹 퍼블리셔 (카카오 웹 퍼블리싱)

웹 표준과 , 웹 접근성에 대해서 공부를 한 후, html언어에 대한 관심과 어떻게 사용해야 하는지에 대해서 더 알게 되는 시간이었다.

이번에는 웹 표준과, 웹 접근성에 맞추어서 html를 작성하였다.

제이쿼리 또한 문법 사용법을 공부 한 후 라이브러리를 바로 사용하지 않고, 스스로 만드는 작업을 해보았다. 자바스크립트를 공부를 하고 나서 제이쿼리를 공부하는 것이어서 제이쿼리를 슥듭하는것은 어렵지 않았다.

좀 더 라이브러리를 사용하지않고 스스로 함수를 만들어서 제이쿼리를 작성하는 연습을 한 후 나중에 익숙해지면 어떠한 라이브러리가 있는지 알아보고 사용 해 볼 생각이다.

이번에 카카오 웹 사이트를 퍼블리싱 하면서 기존에 사용하던 react프레임워크를 사용하지 않고, 처음으로 html, css , jquery만으로 웹 퍼블리싱을 하고있다.

jquery 부분에서 이벤트를 만드는것이 어렵고 시간이 오래걸렸지만 그래도 해냈다!!! 거의 모든 웹 사이트에있는 슬라이드 배너에 대해서 스스로 만들어보았기 때문에 뜻 깊은 시간이었고 다음에 만들때에는 좀 더 빠르게 만들 수 있을것같다.

그러면 먼저 html 코드를 먼저 리뷰를 해보자면,

먼저 제이쿼리를 body부분의 마지막 부분에 붙여주고,

header영역이다.

</div>

</ul>

</button>

</button>

</button>

</div>

</header>

css로는 display:flex;를 사용하여 justify-content : space-between을 사용해주어 자리를 맞춰주었다.

button태그에 아이콘들은 폰트어썸에서 가져왔다.

참고로 html에서 폰트어썸을 사용할려면 각자 자기의 kits를 불러와야한다.

다음으로는 main부분이다, main부분에는 각각의 section을 나누어서 content를 만들었다.

먼저 video, side배너 부분이다.

</div>

</div>

</div>

</div>

</div>

</div>

</span>

</div>

</span>

</div>

</div>

</div>

</span>

<p>#건강한디지털</p>

</span>

</div>

<p>카카오 금융안전보고서</p>

</span>

<p>#3단계보호조치</p>

</span>

</div>

</div>

</div>

</div>

</div>

</button>

</button>

</div>

</section>

비디오에는 border-radius 처리가 되어있었는데, 이미지로 인해서 사용이 안되는 부분이 있었는데, 이부분은 svg를 이용해서 사용한 것으로 알려졌다.

그리고 여기서 첫번째로 제이쿼리를 사용하는 side배너부분이다.

일단 먼저 숫자 카운트업을 해주는 제이쿼리를 해주었는데, span에 p태그로 각각 숫자를 html에 입력해주었고,

해당 p태그에 if문을 사용하여 숫자가 카운트 되면서 바로 html에 입력이 되는 제이쿼리를 만들어주었다.

중복되는 코드가 많아서 함수로 만들어볼려고 했는데, 자꾸 에러가 나서 함수를 만드는것은 일단 멈추었다.

숫자 카운트의 제이쿼리 코드이다.

// 사이드 컨텐츠 (count up)

// 함수로 만드는 법 좀 연구해봐야겠음...

let cnt0 = 0;

let cnt1 = 0;

let cnt2 = 0;

let cnt3 = 0;

let cnt4 = 0;

let cnt5 = 0;

let cnt6 = 0;

let cnt7 = 0;

const count0 = () => {

cnt0 ++;

if(cnt0 > 9){

$(".count_up_container").find("p").eq(0).text(5);

} else {

$(".count_up_container").find("p").eq(0).text(cnt0);

}

const count1 = () => {

cnt1 ++;

if(cnt1 > 9){

$(".count_up_container").find("p").eq(1).text(7);

} else {

$(".count_up_container").find("p").eq(1).text(cnt1);

}

const count2 = () => {

cnt2 ++;

if(cnt2 > 9){

$(".count_up_container").find("p").eq(3).text(4);

} else {

$(".count_up_container").find("p").eq(3).text(cnt2);

}

const count3 = () => {

cnt3 ++;

if(cnt3 > 9){

$(".count_up_container").find("p").eq(4).text(1);

} else {

$(".count_up_container").find("p").eq(4).text(cnt3);

}

const count4 = () => {

cnt4 ++;

if(cnt4 > 9){

$(".count_up_container").find("p").eq(5).text(2);

} else {

$(".count_up_container").find("p").eq(5).text(cnt4);

}

const count5 = () => {

cnt5 ++;

if(cnt5 > 9){

$(".count_up_container").find("p").eq(7).text(8);

} else {

$(".count_up_container").find("p").eq(7).text(cnt5);

}

const count6 = () => {

cnt6 ++;

if(cnt6 > 9){

$(".count_up_container").find("p").eq(8).text(7);

} else {

$(".count_up_container").find("p").eq(8).text(cnt6);

}

const count7 = () => {

cnt7 ++;

if(cnt7 > 9){

$(".count_up_container").find("p").eq(9).text(2);

} else {

$(".count_up_container").find("p").eq(9).text(cnt7);

}

const count_up1 = () => {setInterval(count1 , 100)}

const count_up2 = () => {setInterval(count2 , 100)}

const count_up3 = () => {setInterval(count3 , 100)}

const count_up4 = () => {setInterval(count4 , 100)}

const count_up5 = () => {setInterval(count5 , 100)}

const count_up6 = () => {setInterval(count6 , 100)}

const count_up7 = () => {setInterval(count7 , 100)}

setInterval(count0 , 100)

setTimeout(count_up1, 100)

setTimeout(count_up2, 200)

setTimeout(count_up3, 300)

setTimeout(count_up4, 400)

setTimeout(count_up5, 500)

setTimeout(count_up6, 600)

setTimeout(count_up7, 700)

다음으로는 시간에 맞춰서 fadein / out되는 부분인데, 제이쿼리 문법을 공부할때 초반에 알게된 fadein / out이다.

또한 태그숫자에 맞춰서 자동으로 indicator가 만들어지는 것 까지 제이쿼리 문법으로 만들었다.

해당 코드는 이렇다.

let current_index = 0;

const slide_container = $(".side_content_one_container div");

const second_slide_container = $(".side_content_two_container div")

const slide_container_length = slide_container.length

const slide_container_one_indicator = $(".side_content_one_layout .indicator button");

const slide_container_two_indicator = $(".side_content_two_layout .indicator button")

const side_content_one_slide = () => {

//first content fade in / out

let next_index = (current_index + 1) % slide_container_length;

slide_container.eq(current_index).fadeOut();

slide_container.eq(next_index).fadeIn();

//second content fade in / out

second_slide_container.eq(current_index).fadeOut();

second_slide_container.eq(next_index).fadeIn();

//third content fade in / out

let new_next_index = (current_index + 1) % slide_container_three.length;

slide_container_three.eq(current_index).fadeOut();

slide_container_three.eq(new_next_index).fadeIn();

//first indicator

slide_container_one_indicator.removeClass("focus");

slide_container_one_indicator.eq(current_index).removeClass("focus");

slide_container_one_indicator.eq(next_index).addClass("focus");

//second indicator

slide_container_two_indicator.removeClass("focus");

slide_container_two_indicator.eq(current_index).removeClass("focus");

slide_container_two_indicator.eq(next_index).addClass("focus");

current_index = next_index;

}

eq.()를 사용해서 fadein, out을 해주는 작업을 해주었다.

다음 section은 무한 슬라이드 배너이다.

</span>

<span>

</span>

<h5>지역 정보 매체에서 <br> 위치 기반 상호작용 플랫폼으로</h5>

<p>카카오맵에서 일어난 <br> 24년 간의 업데이트 이야기</p>

</div>

<span>

<p>#지도플랫폼</p>

<p>#트렌드랭킹</p>

</span>

</div>

</div>

</li>

<span>

</span>

</div>

<span>

<p>#디지털전환</p>

<p>#카카오톡채널</p>

</span>

</div>

</div>

</li>

</div>

<span>

</span>

</div>

<span>

<p>#카카오모빌리티</p>

<p>#파트너상생</p>

</span>

</div>

</li>

<span>

</span>

</div>

<span>

<p>#카카오이모티콘</p>

</span>

</div>

</div>

</li>

</div>

<span>

</span>

<h5>NEXT MOBILITY:NEMO <br> 2023</h5>

</div>

<span>

<p>#카카오모빌리티</p>

</span>

</div>

</li>

<span>

</span>

<h5>인공지능이 그린 그림은<br>창작물일까?</h5>

<p>카카오브레인이 준비하는 <br> 인간과 AI의 공존</p>

</div>

<span>

<p>#Karlo</p>

<p>#generative AI</p>

<p>#멀티모달AI</p>

</span>

</div>

</div>

</li>

<span>

</span>

</div>

<span>

</span>

</div>

</div>

</li>

</div>

<span>

</span>

<h5>카톡 오면 무조건 칼답 vs 일단 <br> 안읽씹, 100명에게 물어봤습니다 <br> [카톡이지 프로젝트 ep.1]</h5>

</div>

<span>

</span>

</div>

</li>

<span>

</span>

</div>

<span>

<p>#디지털접근성</p>

</span>

</div>

</div>

</li>

</div>

<span>

</span>

<h5>박명수vs박세미 끝장토론. <br> 그래서 카톡 할 거에요 선배? <br> [카톡이지 프로젝트 ep.3]</h5>

</div>

<span>

</span>

</div>

</li>

</ul>

</div>

</section>

html태그는 이렇다, css가 중복되는 것들은 class명을 맞추어서 작성하였다.

제이쿼리 코드이다

// 무한 슬라이드 배너

const slide_loop = $(".slide_layout");

const slide = $(".slide_container");

const slide_clone = slide.clone();

slide_clone.removeClass("slide_container");

slide_clone.addClass("slide_container_clone")

slide_loop.append(slide_clone);

제이쿼리 코드는 별 거없다. clone코드를 만들어줘서 부모태그에 append 해주는것이다.

css 코드이다.

/*slide animation*/

@keyframes slide_left{

0% { transform: translateX(0); }

50% { transform: translateX(-100%); }

50.01% { transform: translateX(100%); }

100% { transform: translateX(0); }

}

@keyframes slide_right {

0% { transition: translateX(0); }

100% { transform: translateX(-200%); }

}

.slide_container{

animation: slide_left 350s linear infinite;

}

.slide_container:hover{

animation-play-state: paused;

}

.slide_container_clone{

animation: slide_right 350s linear infinite;

}

.slide_container_clone:hover{

animation-play-state: paused;

}

이렇게 제이쿼리를 이용한 section은 끝이났다.

나머지는 기본에 해왔던 html,css작업이기 때문에 좀 쉽게 만들수있었다.

3번째 section

<span>

</span>

</button>

</div>

</section>

4.section

</span>

<strong>커뮤니케이션</strong>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

<strong>엔터테인먼트</strong>

</div>

</li>

<strong>소셜임팩트</strong>

</div>

</li>

</ul>

<span>

</button>

</span>

</div>

</section>

이렇게 해서 오늘 까지 만든 웹 페이지를 공개하겠다.

다음에는 메인페이지를 다 만들어볼려고한다.

개발로 밥그릇 챙기기

웹 퍼블리셔 (카카오 웹 퍼블리싱)

티스토리툴바