카테고리 없음

공부위키

퍼린이 2024. 8. 16. 16:17

안녕하세요.

2024 - 08 - 20 - likelion xkqqk

 링크 모음

 

 

테일윈드 3 - 공식사이트
테일윈드 2.x - 치트시트 -https://nerdcave.com/tailwind-cheat-sheet

[Tailwind CSS Cheat Sheet

nerdcave.com](https://nerdcave.com/tailwind-cheat-sheet)

# css

-- 변수이름 : xx ;

var(변수이름)

object-fit : cover ( 비율 유지되면서 커짐 )

object-fit : ( )

# html

sticky top-0 { top 0 을 만나면 fixed

          <span>&lt</span>  
          <span>&gt</span>

배경 이미지 넣기

h1 2024-08-26

var x;
변수 선언 예정

x = 50;
x = x + 5;
let , var 차이점

변수는 = 좌측에 나올 때만 변수(공간)이고
그외는 전부 값 취급을 해줌

참 true
거짓 false
같다 ==
같지 않다 !=
크다 >
크거나 같다 >=
작다 <
작거나 같다 <=
반전 !
OR (둘중 하나라도 포함) ||
AND (그리고/둘다 포함 ) &&

목표

단계

스마게 홈페이지 - 상단바)
-특징 기본 배경 none
-마우스 가져다 대면 배경 하얀계열 배경

    • 스카일 게이트 로고 메뉴 바들 - 유저 박스( 언어 / 그룹<심볼>-- 가져다 대면 서브 메뉴 표시 <- (다음에)

우선 회사 서체 신경쓰지 않고 프리텐다드 서체 사용

hover
: 하얀 글씨체 -> 검정색
: 중단 메뉴바들 간격 넓어짐
: 각 중단 메뉴들에 커서시 아래에 주황색 바가 왼쪽에서 오른쪽으로 밑줄처럼 생김
: 유저 박스 에서 언어쪽에 커서 대면 밑줄 생김
: 유저 박스 에서 심볼쪽에 대면 심볼 색이 바뀜 // 제외
: 유저 박스에서 화살표 누를시 언어 선택 창 열림
: 상단에 고정이 되며 일정 높이 내려가면 천천히 사라짐 // 일부 제외

-[ 0 단계 - 기본 설정 / ] = https://codepen.io/vodtwoom-the-lessful/pen/yLdEJmm
-[ 1 단계 - 상단바 틀 잡기 ] = https://codepen.io/vodtwoom-the-lessful/pen/vYqrXEp
-[ 2 단계 - 로고 배치 ] 실패 = https://www.smilegate.com/assets/img/common/logo_white.svg
-[ 2 단계 - 로고 배치 ] 성공 = https://codepen.io/vodtwoom-the-lessful/pen/wvLXzGR?editors=1000
-[ 3 단계 - 중간의 메뉴 바들 배치 ] = https://codepen.io/vodtwoom-the-lessful/pen/BagVLQv?editors=1000
-[ 4 단계 - 우측 유저 박스 구현 - 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/NWZzRwZ?editors=1010
-[ 5 단계 - hover (courser) 효과 구현 - 1] = https://codepen.io/vodtwoom-the-lessful/pen/PoraWeO
-[ 5 단계 - hover (courser) 효과 구현 - 2] = https://codepen.io/vodtwoom-the-lessful/pen/ZEdReyQ
-[ 5 단계 - hover (courser) 효과 구현 - 3] = https://codepen.io/vodtwoom-the-lessful/pen/zYVawEa

-[ 6 단계 - 마무리] = https://codepen.io/vodtwoom-the-lessful/pen/vYqrmwO

[스마게 구현 임시 마무리

...

codepen.io](https://codepen.io/vodtwoom-the-lessful/pen/vYqrmwO)

- -[ 6 단계 - 탑바 hover (courser) 효과 구현<리마스터> - 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/BagVVoa

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

-- [ 1단계 탑바 하단의 2차 메뉴 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/dyBKKJr?editors=1100

-- [ 2단계 탑바 하단의 2차 메뉴 2 ] = https://codepen.io/vodtwoom-the-lessful/pen/bGPKjbW?editors=1100

-- [ 3단계 탑바 하단의 2차 메뉴 3 ] = https://codepen.io/vodtwoom-the-lessful/pen/poXKZeZ?editors=1100

-- [ 4단계 탑바 하단의 2차 메뉴 4 ] = https://codepen.io/vodtwoom-the-lessful/pen/mdZKjXW?editors=1100

-- [ 5단계 탑바 하단의 2차 메뉴 5 ] = https://codepen.io/vodtwoom-the-lessful/pen/bGPKjyj

-- [ 6단계 탑바 유저박스 언어석택 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/zYVLGpW

-- [ 7단계 탑바 유저박스 언어석택 2 ] = https://codepen.io/vodtwoom-the-lessful/pen/zYVLGpW

-- [ 8단계 탑바 최종 마무리 ] = https://codepen.io/vodtwoom-the-lessful/pen/OJewyQj

< 스마게 리펙토링 해보기 챗 지피티 >

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

국방부 업무보고 사이트 https://www.mnd.go.kr/mbshome/mbs/plan/index.jsp

- [ 1단계 상단 탑바 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/KKjBVdE

- [ 2단계 상단 탑바 2차메뉴 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/BagPjvb

- [ 3단계 상단 탑바 2차 메뉴 2 ] = https://codepen.io/vodtwoom-the-lessful/pen/zYVLqOz

- [ 4단계 상단 탑바 2차 메뉴 3 ] = https://codepen.io/vodtwoom-the-lessful/pen/qBzyoOw

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

올리브 영 사이트

- [ 1단계 상단 탑바 로고 / 메뉴박스 ] = https://codepen.io/vodtwoom-the-lessful/pen/bGPjvwW?editors=1100

- [ 2단계 상단 탑바 빈공간 / 유저박스 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/mdZjxBE

- [ 3단계 상단 탑바 빈공간 / 유저박스 2 ] = https://codepen.io/vodtwoom-the-lessful/pen/PorBRdj

- [ 4단계 상단 탑바 메뉴바 2차메뉴 1 ] =x fork 안한 관계로 생략,,,

- [ 5단계 상단 탑바 메뉴바 2차메뉴 2 ] = https://codepen.io/vodtwoom-the-lessful/pen/wvLxjzx

- [ 6단계 상단 탑바 그외 hover 등 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/WNqKygx

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

국경없는 사회 사이트 ( 난이도 쉬움)

- [ 1단계 상단 탑바 로고 ] = https://codepen.io/vodtwoom-the-lessful/pen/rNEZadV
- [ 2단계 상단 탑바 중간 메뉴 ] = https://codepen.io/vodtwoom-the-lessful/pen/PordwyB?editors=1100
- [ 3단계 상단 탑바 유저 박스 ] = https://codepen.io/vodtwoom-the-lessful/pen/KKjxpVp
- [ 4단계 상단 탑바 마무리 ] = https://codepen.io/vodtwoom-the-lessful/pen/YzoOXZO?editors=1100

}

///

# 2024-08-29

#js

onclick="(안에 ' ' 만 사용) " ( 한번 클릭)
onmouseenter (
ondblclik (두번 클릭

  • 더하기
  • 뺴기
    / 나누기
    % 나머지
  • 곱하기

# 2024-08-30

$ 은 제이쿼리 연결후 사용

consol,log

# 2024-09-03

# js

# 2024-09-04

충남문화관광재단 부분모작

- [ 1 단계 상단 탑바 틀 잡기 ] =

- [ 2 단계 상단 탑바 로고 구현 ] =

- [ 3 단계 상단 메뉴바 구현 ] =

/// 3단계 까지 저장 안함 이슈로 날아감

- [ 4 단계 상단 메뉴바 2차 메뉴 구현 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/jOjQrXm

- [ 4 단계 상단 메뉴바 2차 메뉴 구현 2 ] = https://codepen.io/vodtwoom-the-lessful/pen/QWXJKwM

- [ 5 단계 상단 메뉴바 우측 유저 메뉴 1 ] = https://codepen.io/vodtwoom-the-lessful/pen/wvLQzYp
- [ 6 단계 상단 메뉴바 우측 유저 메뉴 2 (박스 아이콘) ] =

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

피그마 (기획/디자인)

# 컴포넌트 : 나

--- 참고 링크 1 : https://brunch.co.kr/@applehong/14

--- 참고 링크 2 : https://fullstack-eun.tistory.com/19

--- 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 그림에서 확인 할 수 있듯이 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성할 수 있다.

--- (구성) 요소 , 부품 /// 화면을 구성하는 요소를 부품화 시킨 것

    ( 버튼, 텍스트 , 이미지 . 아이콘 , 특정 영역 등)

--- 단축키 : [ Ctrl ] + [ Alt ] + [ K ]

--- 마스터 컴포넌트(Master component) => 첫 번째 만든 원본

--- 인스턴스 (Instance) => 원본의 복사본

--- 장점

  • 1 ( 재사용성 ) : 원본에 수정 및 업데이트시 다른 모든 인스턴스에 일괄 적용
  • 2 ( 일관성 ) : 디자인 요소들 일관성 있게 유지 / 매우 유용
  • 3 ( 효율성 ) : 작업속도 향상 / 반복 동작 x

---- 종속 관계

  • 마스터 안에 ( 오브젝트 / 인스턴스 ) 가능
  • 인스턴스 안에 ( 인스턴스 ) 가능

# 오토 레이아웃 : ?1

# 프로토타입 : ?2

  • 실행 시연모드
  • 클릭하면 화면이동

# 베리언트 ?:3

# ? 꿀팁

# 2024-09-05

고정형 웹사이트

반응형 웹사이트

  • 모바일 웹사이트
  • PC / 모바일 UI 지원
    ()방식 1 : 무식하게 PC 버전 / 모바일 버전 둘다 만들고 적용

\ CSS - 조건 문 중

  • ( min-width : A px ) ( 최소 너비가 A 픽셀 이상 일때 )
  • ( max-width : A px ) ( 최대 너비가 A 픽셀 이하 일때 )
  • ( min-width : A px ) and ( max-widht : B px ) ( 최소 너비가 A 픽셀 이상 최대 너비가 B 픽셀 이하 일때 )

\ 테일윈드 와 안쓴 con 차이

.con ( 반응형 )
.containal ( 적응형 )

# 2024-09-06

  • Lorem Picsum 사진 이용

사진 비율
aspect-ratio : (가로) / (세로)

# 2024-09-09

js
스와이퍼

< ㅁ >

site = https://swiperjs.com/

2024-09-10

. 상상마당 https://www.sangsangmadang.com/ (사이트바로가기)

- [ 1 단계 상단 탑바 틀 잡기 ] = / /
- [ 2 단계 검은 탑바 ] =
- [ 3 단계 로고 ] =

- [ 4 단계 중간 글자 ] = /// 저장 오류로 5단계 부터

- [ 5 단계 메뉴바 ] = https://codepen.io/vodtwoom-the-lessful/pen/XWLQZmE

- [ 6 단계 2차메뉴 ] = https://codepen.io/vodtwoom-the-lessful/pen/xxovoYM
---(2024-10-15)
- [ 7 단계 스와이퍼 ] = https://codepen.io/vodtwoom-the-lessful/pen/wvVBZQd
- [ 8 단계 6단계 + 스와이퍼 ] = https://codepen.io/vodtwoom-the-lessful/pen/PoMpexW
- [ 9 단계 검색창 일부 구현] = https://codepen.io/vodtwoom-the-lessful/pen/JjgWZYo

- [ 10 단계 ?? ] = 

2024-09-11

  • js
    .removeClass = class 를 지운다
    .addClass = class 를 추가한다
    .hasClass = class 를 가지고 있다
    .click = 클릭
    .siblings =
    .find = 찾다 ( 후손 선택자 까지 )
    .siblings = 형제요소

2024-09-12

overflow:hidden : 스크롤바 숨기기;

2024-09-19

wow.js <-> animate.css 둘다 필요

2024-09-24

테일윈즈 3.2버전 업데이트로
group:hover: ~ 에서
group:hover/N1: 형식으로 /이름 붙여서 다중으로 선택 가능

'카테고리 없음'의 다른글

  • 현재글공부위키

티스토리툴바