2. Front-end

CSS - [ 속성(변환 Transform) ]

이제 css의 변환 효과에 대해 살펴보자. transform : 요소의 변환 효과 지정 속성. 띄어쓰기로 구분해서 [ transform: 변환함수1 변환함수2 변환함수3 ...; ] 와 같이 여러 함수를 한번에 사용할 수 있다. transform에 사용할 수 있는 변환 함수는 크게 2D 변환 함수와 3D 변환 함수로 나뉜다. 각각 살펴보자! 2D 변환 함수 translate(x, y) : x축과 y축 이동. translateX(x) 나 translateY(y)와 같이 한 쪽 축으로만 이동시킬 수 있다. 참고로 함수의 소괄호 사이에 작성하는 x, y 값 등을 인수(=인자, Argument) 라고 한다. scale(x, y) : 크기를 배로 늘려줌. rotate(deg) : 요소를 회전시킴(각도). skew..

CSS - [ 속성(전환 transition) ]

요소의 전 상태와 후 상태의 중간 단계를 자연스럽게 만들어주는 것을 전환 효과라고 한다. 이번 시간에는 전환 효과에 대해 살펴보자! transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성이다. [ transition : 속성명(property) 지속시간(duration) 타이밍함수(timing-function) 대기시간(delay) ] 과 같이 입력해준다. 여기서 지속시간은 필수 속성이다. transition에 시간 값이 하나만 들어있으면 지속시간이고, 두 개가 들어있으면 앞에 값이 지속시간, 뒤에 값이 대기시간이다. transition의 개별 속성들에 대해 살펴보자. transition-property : 전환 효과를 사용할 속성 이름을 지정한다. 기본값은 모든 속성에 적용하는 al..

JQuery- [ 라이브러리(slick) 설치 ]

https://kenwheeler.github.io/slick/ 이동 get it now 클릭 Download Now 클릭 다운 받은 파일안에서 slick.js 파일을 프로젝트에 설치하고 연결해주면 사용 가능! 사용할 때 slick 함수 안의 코드는 사이트를 참조해서 원하는 걸로 가지고오면 됨! 참고로 다운받은 폴더에서 css파일을 연결해주면 설정된 css내용대로 나옴!

CSS - [ 속성(flex) ]

이제 플렉스에 대해 알아보자. 플렉스(flex)는 1차원의 레이아웃 개념과 같다. 이전까지 요소를 출력했을 때는 수직으로 출력되었다. 수평 정렬 할 때는 아주 간단하게 display: flex; 값만 넣어주면 된다! 이 때 flex 값을 넣어 준 요소는 container, 수평 정렬 된 요소들은 item 이라고 부른다. css에서 container와 itme에 넣을 수 있는 속성들이 각각 다르다는 점에 주의하자. 아래와 같이 코드를 작성하면 이렇게 뜨는데, container에 flex 값만 넣어주면 이렇게 수평정렬된다! 1. Container 속성 dispaly : Flex Container의 화면 출력 특성을 지정하는 속성이다. (이전에 block과 inline 등 을 넣어 사용했던 속성!) Flex ..

CSS - [ 속성(position / 요소 쌓임 순서) ]

이번에는 요소를 원하는 위치에 배치할 수 있는 position 속성을 포함해서 여러 가지 속성들을 살펴보자. position : 요소의 위치 지정 기준. relative는 요소 자신을 기준으로, absolute는 위치상 부모 요소를 기준으로, fixed는 뷰포트를 기준으로 한다. 요소를 배치할때는 기준을 잡고 나서 위치 값을 설정해야 한다는 사실을 기억하자! position을 이용해 기준을 잡고 나면, top bottom left right 등 의 속성(값이 아니고 속성!!)을 이용해 위치 값을 설정할 수 있다. absolute, fixed가 지정된 요소는 display 속성이 block으로 변경되고, 가로 너비가 최소한으로 줄어들게 된다. 2번 요소에 자신을 기준으로하는 relative 값을 주고, t..

CSS - [ 속성 (배경) ]

이번엔 css의 배경과 관련된 내용을 살펴보자!! background-color : 요소의 배경 색상을 지정하는 속성으로 기본값은 투명한 transparent이다. background-image : 요소의 배경 이미지 삽입 속성. url("경로") 와 같이 값을 넣어주면 된다. background-repeat : 요소의 배경 이미지 반복 속성으로 기본값은 바둑판식으로 반복하는 repeat이다. repeat-x는 이미지를 수평 반복, repeat-y는 이미지를 수직 반복, no-repeat는 반복 없는 값이다. background-position : 요소의 배경 이미지 위치 속성. top, bottom, left, right, center와 같이 방향으로 입력하거나 px, em, 등 단위로 지정하는 총 2..