2024. 07. 22 UIUX 웹 4일차

[1교시]

*단축키

- 링크걸기  Ctrl + K

- 파란색 글자 작성 글자 선택 Ctrl + Alt + 4

* 코딩 복습 30분(추후 디자인 + 코딩할 때 문제 발생)

-tinyurl.com/28zxbf3d(지혜 쌤 링크)

 

[2교시]

- 뉴스, SNS 사람들이 불편해 하는 점, 원하는 점들 서치해서 찾기(프로세스)

 

(1) 뉴스

- https://www.ytn.co.kr/_ln/0102_202406071220283945

[생생경제] 팝업스토어, 재미에 가려진 불편한 진실은?

 ㄴ 팝업스토어 매장에서 구매한 제품들 환불기간 

 ㄴ 7일 이내’ 8곳(44.4%), ‘매장 운영 기간 내’ 5곳(27.8%), ‘환불 불가’ 4곳(22.2%)으로 나타나 대부분 소비자에게 불리했음

 ㄴ 개인정보 보호법 위반 사례(예약제, 테이블링 시스템, 정보 동의)

 

 

-https://www.ohmynews.com/NWS_Web/View/at_pg.aspx?  CNTN_CD=A0003042301&CMPT_CD=P0010&utm_source=naver&utm_medium=newsearch&utm_campaign=naver_news

출입구 늘린다고 '끝' 아니다... 성수역의 더 큰 문제

 ㄴ 안전 문제(출, 퇴근 시간에 성수역에 유동 인구 증가)

 ㄴ 경찰까지 나서서 혼잡도 완화에 힘씀(교통정리)+

 

- https://www.sweetspot.co.kr/blog/176

팝업스토어라고 다 똑같은 팝업스토어가 아니다! 브랜드 마케팅 목적에 따른 팝업스토어 유형

 ㄴ어플리케이션 만들 때  팝업 카테고리 세분화

 

- https://brunch.co.kr/@47d1e02e66be49c/4

팝업스토어 왜 다 똑같아졌을까, 구성와 진행의 문제점

 ㄴ 너무 단순한 팝업스토어의 진행 방식(익숙해진 팝업스토어)

 ㄴ 팝업스토어 왜 다 똑같아졌을까?

 ㄴ 팝업스토어, 구성의 지루함

 ㄴ 팝업스토어, 영혼없는 진행

 

 

- https://www.ejanews.co.kr/news/articleView.html?idxno=320274

“이제는 팝업스토어로”…‘트렌드‧유명세’ 가늠하는 시대 도래 - 중앙뉴스

 ㄴ 팝업스토어 방문 후 만족도 평가

 ㄴ 충성 고객이나 팬층을 확보하기 좋고(66.6%, 동의율) 관심 없던 브랜드일지라도 팝업스토어 방문으로 관심이 생길 것        같다(63.1%)는 응답도 적지 않아 팝업스토어에서의 차별화된 경험이 대중소비자들에게 브랜드와의 접점을 제공하는        중요한 수단이 되고 있는 것으로 분석

출처 : 중앙뉴스(http://www.ejanews.co.kr)

 ㄴ 오래 머물고 싶은 체험형 팝업스토어가 좀 더 많아졌으면 좋겠고(20대 72.0%, 30대 78.8%, 40대 74.8%, 50대 69.2%)        체험이나 전시 공간이 부족한 팝업스토어에는 흥미가 떨어진다(20대 57.6%, 30대 57.2%, 40대 61.2%, 50대 59.2%)          는 응답이 연령과 관계없이 높은 수준으로 평가되고 있었다.

 

- https://m.news.nate.com/view/20230906n28267

1년 새 매출 5배…MZ 관심에 날아오르는 '팝업스토어' : 네이트 뉴스

 

 

(2) SNS

-

-

-

 

 

(3) 유튜브

- https://www.youtube.com/watch?v=0I7fw-TO6_k

 

- https://www.youtube.com/watch?v=XbrPWDp78HI

 

- https://www.youtube.com/watch?v=xXqom6x_vas

 

- https://www.youtube.com/watch?v=Rw4uVQrLfwM

 

 

 

(4) 블로그

-

-

-

 

(5) 챗GPT

▶ 높은 초기 비용

: 팝업스토어를 설치하고 운영하기 위해 초기 비용이 상당히 많이 들 수 있습니다. 임대료, 인테리어, 장비, 광고비 등이 포    함되며, 특히 인기 있는 지역에서는 비용이 더욱 높아질 수 있습니다.

 

▶  제한된 시간 

: 팝업스토어는 일시적인 성격을 가지고 있어 제한된 시간 동안만 운영됩니다. 따라서 짧은 기간 내에 충분한 수익을 창출    하지 못하면 투자 대비 효과가 낮아질 수 있습니다.

 

▶  불확실한 수요 예측

: 팝업스토어의 특성상 새로운 장소에서 짧은 기간 동안 운영되기 때문에 해당 지역의 수요를 정확히 예측하기 어렵습니      다. 이는 재고 관리와 운영 계획에 어려움을 초래할 수 있습니다.

 

▶ 운영상의 어려움

: 임시로 설치되는 팝업스토어는 운영 및 관리 측면에서 어려움이 있을 수 있습니다. 예를 들어, 기존 매장과 다른 운영 환      경, 새로운 직원의 교육, 임시 시설의 관리 등 다양한 운영상의 문제가 발생할 수 있습니다.

 

▶  법적 및 규제 문제

: 팝업스토어를 운영하기 위해서는 지역의 규제와 법적 요구 사항을 준수해야 합니다. 임시 시설 설치 및 운영에 대한 허가    를 받아야 하며, 이는 시간과 비용이 소요될 수 있습니다.

 

▶  브랜드 이미지 리스크

: 팝업스토어의 운영이 실패하거나 서비스가 불만족스러울 경우 브랜드 이미지에 부정적인 영향을 미칠 수 있습니다. 특히    소비자들이 기대하는 수준의 경험을 제공하지 못하면 브랜드 신뢰도에 손상을 입을 수 있습니다.

 

▶  마케팅의 한계

: 팝업스토어가 위치한 장소와 기간에 따라 홍보 및 마케팅의 효과가 제한적일 수 있습니다. 특정 기간과 장소에만 집중되    기 때문에 보다 넓은 소비자층에게 도달하는 데 한계가 있을 수 있습니다.

 

[3교시]

- 어느정도 만들 수 있어야 함

- 다음주 화요일 평가(7/60) 구현 능력단위평가

- 문제 주고 만들라고 하면

구현

 ㄴ본시험, 결석자 시험

 ㄴ보충수업 가능(10시 이후에 해야 함), 80% 출석률

 ㄴ 점수 취업에 크게 반영x, 기준 유지만 하면 됨

- https://sbsartdj.cafe24.com/student/ver3/curri/index.php(sbs 아카데미, 과제 공지사항 확인)

https://sbsartdj.cafe24.com/student/ver3/curri/index.php

 ㄴ 코드 다 외우려고 하지 말아라

 ㄴ 과정 공지사항

- https://ncs.go.kr/unity/th03/ncsResultSearch.do

NCS 국가직무능력표준, NCS 블라인드채용

- 디자인, 디지털 디자인, 12번 구현 (일학습병행제 체크 후 pdf 다운로드) / 보통 과제 다 여기에 있음 

- 필요한 책 미리 가져오라 말하면 가져오면 됨

 

 

* static : 기본값

* relative : 흐름 제외x

* absolute :  흐름 제외x(기준점을 봄)

 

* top 

* left

* Right

* bottom 

- 기준값/ 조상의 position 설정되어 있는

 

* ctrl+shfit+L

- 동일한 범위를 모두 글자 작성

ㄴ cts contents1 각각의 속성이 달라서 띄어쓰기 주의!

 

 

 

 

.contents2 .box1{

position: relative

left: 100px

top: 0px

ㄴ position 많이 쓰지 말어라

 ㄴ top -100px 만큼 움직임(기준점)

 ㄴ 같이 통제함

 

 ㄴ 전체를 통제 할 때 top, bottom 통제

* v

 

[5교시]

* 지금까지 이야기 했던 것들 다 기억할 필요x

 ㄴ 필요한 것들 위주로 기억

 

 

- 부모 태그를 자식 태그가 그대로 받는 것을 상속이라 함

 

* 속성 : 값(키워드)

 

* inherit

-상위 요소로 부터 속성을 상속받겠다.

 

* initial(기본 값)

- 브라우저의 기본 속성 

 

* unset

 ㄴ .a$*4 =

 

 

* z-index

- 가장 나중에 만든 박스가 가장 위로 보인다.

- 0을 가지고 있다.

- 기본 0 0 0 -1 속성을 가지고 있음

- 값이 높으면 높을수록 위로 올라감(낮으면 반대로)

- position이 걸려있어야 함(안써도 상관x)

.

 

* HTML / CSS

- 보기 간결하고, 내가 통제하기 쉽게

 

[ body / 간결하게 만들기]

 

* <body> div * 3 => 3개가 나옴

 

* <body>    div>div*2 + Tab 키 

 

* <body> class  .a>.b*3  +  Tab 키 / .a*2>.b*3  +  Tab 키

 

* <body> div + p + span  +  Tab 키 

 

* <body> .a+.b*3  +  Tab 키

 

* <body> .box$*5 +  Tab 키

 

* <body>  .box$1*5 +  Tab 키

 

* <body> .box$-abc*5  +  Tab 키

 

* $ 숫자 순서대로 나열

 

 

[ stlye / 간결하게 만들기]

 

* w100 / width: 100px;

 

* h100 / height: 100px;

 

* bdc red / background clocr: red;

 

* bd3#  / boder: 3px #000 solid;