cloneCoding web

MEGABOX cloneCoding

• 23/11/27 HTML Header 구성, main section 레이아웃 구성 *ㄴmain 1행 박스오피스 ~마우스 휠 아이콘 까지 진행완료

---

웹접근성연구소 웹접근성이란 클론코딩\

• 23/12/04 HTML5 + CSS3 이용 페이지 만들기 ~ 23/12/07 end

---

SPC 삼립 클론코딩

• 23/12/05 HTML5 구조작업
• 23/12/06 CSS3 디자인 작업
• 23/12/07 CSS flex 추가 삼립 완성

style guide

• 글자 색상 -> #000 ,

• 강조 글자 색상 -> #36b4e5;

• 색상 (기본 배경) -> , #fff; , #f1f1f1;

• 색상 (테두리) -> #aaa

• 색상 (배경, 글자) _> #f3c300; , #36b4e5;

• 메뉴 크기 16px

• 제목 글자 크기 40px

• 내용 글자 크기 18px

• 부제목 글자 크기 21px

• 내용 글자 크기 31px ,

• goal 내용 글자 크기 24px

• strategy 제목 글자 크기 18

• header, path, strategy, footer 내용 크기 16

---

서울시청 clonecoding

• 23/12/07 클론코딩 시작

---

카카오 엔터프라이즈 반응형 웹 클론코딩

• 23/12/13 클론코딩 시작 ~ 23/12/15 종료
• max-width 1200 -> 900 -> 769px 반응형 설계 진행
• video +absolute 겹치는 디자인 구성

오늘의 집 상품 디테일 페이지 클론코딩

• 24/01/04 시작
• 24/01/04 진행 -> 좌측 이미지 썸네일 영역 'mouseover' 시 큰 이미지 변경하기 동적 진행
• 24/01/05 진행
• 속성선택자(CSS) 개념 배우기 * 모든태그 사용가능 (form 위주로 많이 사용)

1. 선택자[속성^=값] 속성값이 00으로 시작하는 대상 선택
2. 선택자[속성$=값] 속성값이 00으로 끝나는 대상 선택
3. 선택자[속성*=값] 속성값이 00으로 포함하는 대상 선택
4. 선택자[속성=값] 속성값이 00으로 완벽히 일치하는하는 대상 선택
5. 선택자[속성] 속성이 일치하는 대상 선택

• ex) <i class="fa-solid fa-apple-icon"></i>

1. i[class^=f], i[class^=fa], i[class^=fa-]
2. i[class$=d], i[class^=id], i[class^=icon]
3. i[class*=apple], i[class^=a-a], i[class^=le]
4. i[class=fa-solid], i[class^=fa-apple-icon]

• ex) `

1. img[src^=http], img[title^=설], img[alt^=자세]
2. img[src$=jpg], img[title$=명]
3. img[src*=naver], img[src*=logo]
4. img[src=http:naver.com/logo.jpg]
5. img[src], img[title], img[alt]

오늘의 집 쇼핑몰 동적 기능 정리

Javascript(ES6)

shopping/script/cart_sample.js

단일 DOM 객체 활용하여 반복 open/close 동적기능 활용하기

• 중요 point!
• javascript는 눈으로 보이는 시각적인 효과(css)에 의지하기 보단 Data에 상태에 따라 동적기능을 처리한다. 그래야 Back-end 협업프로젝트의 DataBass에 Data 개념으로 연동해서 업무를 효율적으로 진행할 수 있다

1. data 상태 구분 용도 변수 생성하기 ...status
2. 해당 변수에 DOM 상태 지정하기 true, false

• DOMstatus = false //비활성화 상태 경우

3. event DOM 의 상태에 의해서 status 변동되는 상황 제작하기

• DOM,addEventListener('event'()=>{ DOMstatus = !DOMstatus}) DOMstatus = 대입연산자를 통해서 !DOMstatus반전을 대입해야 한다.
• (위) event에 의해서 DOMstatus 매번 반전이 일어나면 true, false 값이 event 할 때마다 교체되는 것을 볼 수 있다
• true, false가 변경된다면 논리데이터에 따라 서로 다른 결과를 보여줄 수 있는 if조건문을 활용하여 if조건값이 참일때 실행 값else 조건값이 거짓일 때 실행 값을 나눠서 동적 스크립트를 작성한다.