0516 목 uiux 31일차

0516 목 uiux 31일차

자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ )

.

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개

메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 

내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )

내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )

내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )

세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )

트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )

 

페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )

※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

글씨체 후보

( https://fonts.google.com/specimen/Poetsen+One )

 

 

내부 1 페이지 상품 목록들에 넣을 것

( https://en.sailor.co.jp/category_product/fountain-pen/?taxonomy-detail=shikiori )

 

 

세일러 만요 잉크 ( https://en.sailor.co.jp/product/13-2009/ )

 

 

 

로그인페이지 이런 식으로 만들기

 

---

버튼누르면 알림창 뜨기1 ( https://codepen.io/YoungHeom/pen/zYQvBvw )

버튼누르면 알림창 뜨기2 ( https://codepen.io/YoungHeom/pen/KKLdMaz )

버튼누르면 알림창 뜨기3 ( https://codepen.io/YoungHeom/pen/wvbKWja )

 

제이쿼리 cdnjs 활용하기!

 

백그라운드 이미지 삽입 방법 ( https://codepen.io/YoungHeom/pen/jOobrzM )

 

html 

<button onClick="hello();">
버튼
</button>

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

js

function hello() {

    alert("안녕하세요");

}