자바스크립트 수업페이지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 )

 

 

디자인구성요소제작(수요일부터)
성공하는 포트폴리오는 따로있다. (다음주)

 

3차 메뉴, 사이드 바 이런 것보다 레이아웃, 전체적인 구성 요소들에 더 집중하기. (페이지 열어볼 때 바로 보이는 요소들)

ㄴ 정리: 레이아웃 구성에 신경쓰기

 

햄버거모양 아이콘 → 커서 올리면 한꺼번에 모두 보이는 메뉴

 

구간 별 타이틀 위치는 타이틀 아래에 배치될 요소들과 더 붙어있어야 함.

 

(a콘텐츠)
타이틀 텍스트
요소

(여백)

(b콘텐츠)
타이틀 텍스트
요소

(여백)

 

↑ 이런 식으로 각 콘텐츠 사이에 여백을 줘서

구간이 나뉘어져 있다. 이게 한 덩어리다. 이런 걸 알기 쉽도록 여백을 적절하게 설정하기.

 

여백이 있으면 약간 숨쉬는 구간처럼 안정감이 있음

제품들은 스페이스비트윈으로 아예 다 떨어져있기보다는 좀 붙어있어서 집중되기 쉽게 작업하기.

 

균형감(편집디자인도 균형감 중요)

핵심 요소는 크고 눈에 잘 띄도록. 중요하지 않은 것은 좀 작게.

 

무료 호스팅 사이트 - 닷홈, imgur

 

스마트폰 레이아웃 구성 생각해보기

 

 


 

저번 시간 했던 레이아웃 꼭 복습하기( https://codepen.io/YoungHeom/pen/dyLBRQV )

 

변수, 값

변수, 값에 대해 수업함

 

이스케이프 문자

( https://ko.wikipedia.org/wiki/이스케이프_문자 )

 

( https://codepen.io/hjyee/pen/PogMVOP )

( https://codepen.io/hjyee/full/PogMVOP )

ㄴ 자바스크립트 수업페이지

 

 

< JS 개념 >

  2대 구성요소

    - 변수
    - 값

        숫자 : 1, 1.5
        문장 : "안녕", "a", "잘가세요."
        논리 : true, false
        객체 : {이름: "홍길동", 나이: 22}
        함수 : function() {}

  2대 제어요소
    - 조건문
        if, else if, else

    - 반복문
        while, for

 

( https://codepen.io/YoungHeom/pen/vYwBBOb )

ㄴ button:hover, min-height

 

( https://codepen.io/YoungHeom/pen/MWdggym ) - 'console.log', 'console. clear' 내가 메모

( https://codepen.io/YoungHeom/pen/oNRvvGm ) - 'console.log', 'console. clear' 수업 예제

( https://codepen.io/YoungHeom/pen/eYaOYgb ) - '안녕하세요. ' 10번 출력

ㄴ js console

 

( https://codepen.io/YoungHeom/pen/WNBeeXo )

ㄴ 0507_3 자바스크립트와 css의 우선순위

 

( https://codepen.io/YoungHeom/pen/mdYbbpb )

자바스크립트와 CSS가 협력하는 바람직한 방법

 

( https://codepen.io/YoungHeom/pen/jOoNNeL )

ㄴ console.log 

 

변수를 선언하는 키워드, var, let, const 

 

var: 중복 선언 가능, 재할당 가능(주의해서 사용해야 함)

let: 중복 선언 불가능, 재할당 가능

const: 중복 선언 불가능, 재할당 불가능 (요즘은 const를 많이 사용함)

 

※ 재할당: 변수가 한 번 선언된 후에 다른 값을 여러 번 할당할 수 있다.

예시.

let b = 10;
console.log(b);
b = 40;
console.log(b);

 

 

( https://codepen.io/YoungHeom/pen/wvbwvzq )

ㄴ 재할당 활용

 

 

변수는 ' let b = 10;', ' b = 40;' 이렇게 선언이 된 순간에만 변수다.

( https://codepen.io/YoungHeom/pen/zYQOYwQ )

ㄴ temp 변수 활용

 

 

티스토리나 벨로그 사용해서 꼭 메모하기

클론코딩(모작)할 때 image downloader 확장팩(크롬) 다운받아서 사용하면 쉽게 가능

 


0502 5월 2일에 안 올려서 7일자에 올림

flex로 반응형, 메뉴 만들기 ( https://codepen.io/YoungHeom/pen/rNbgbwz )

0503 5월 3일에도 안올림

0503_flex 레이아웃 만들기 ( https://codepen.io/YoungHeom/pen/LYvKyaV )

'UIUX(03.28~10.02)' 카테고리의 다른 글

0509 uiux 27일차  (0) 2024.05.09
0508 uiux 26일차(웹사이트제작, if조건문, else, 연산자)  (0) 2024.05.08
0430 uiux 22일차  (0) 2024.04.30
0426 uiux 20일차  (0) 2024.04.26
0425 uiux 19일차  (0) 2024.04.25

+ Recent posts