Slight Edge Slight Edge

전체 글

• [CSS] z-index

  Project/kakao-clone-v2 2019. 11. 20. 17:05

  z-index 어느 요소가 앞에 나오고 뒤로 나올지 배치 순서를 결정하는 속성으로 position 속성이 적용된 요소에만 사용할 수 있다. css 코드는 위에서 아래로 순서대로 적용되기 때문에 코드상 나중에 작성한 요소가 더 앞으로 나온다. 즉 처음에 작성한 요소가 제일 뒤로 밀려난다. 하지만 z-index를 지정해주면 자동으로 지정된 순서를 costom하게 지정할 수 있다. z-index 값이 클수록 요소가 앞으로 나온다.

  Read More
• [CSS]반응형 웹을 위한 Media Query

  Project/kakao-clone-v2 2019. 11. 20. 16:42

  Media Query 미디어 쿼리는 장치에 따라 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등 반응형 웹페이지를 작성할 때 유용한 구문이다. Media type all : 기본값, 모든 미디어 장치에 사용됨 print : 프린터에 사용 screen : 컴퓨터 스크린, 태블릿, mobile 등 speech : 페이지를 읽어주는 화면 낭독기 Media Query 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* for css */ .bigScreen { background-color = yellow; ... } @media midea-type and (midea-feature){ css-code } @media screen and (..

  Read More
• [CSS] Animation, @keyframes

  Project/kakao-clone-v2 2019. 11. 20. 15:04

  Animation CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있습니다. Animation 속성 animation : 모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음 animation-name : 애니메이션 효과의 이름 설정 animation-duration : 애니메이션 효과를 재생할 시간 설정 animation-delay : 애니메이션 효과가 나타나기까지의 지연시간 설정 animation-iteration-count : 애니메이션 효과가 몇 번 반복될지를 설정 animation-direction : 애니메이션의 진행 방향을 설정 animation-timing-function : 애니메이션 효과의 속도 곡선을 설정 ani..

  Read More
• [CSS] Transition, Transform

  Project/kakao-clone-v2 2019. 11. 19. 17:55

  Transition 속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+)으로 속성값이 변화하는 경우에만 동작한다. function css 속성명 : 모든속성인 경우 all, width, left, opacity, .. 변화시간 : transition이 지속되는 시간 변화타입 : transition의 속도 곡선 지정. ease, ease-out, ease-in-out, linear, ease-in.. 딜레이 시간 : transition을 시작하기 전에 기다려야 하는 시간 transform 속성은 transform 하나로 모두 반영 Transform CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 ..

  Read More
• [CSS] Combinators

  Project/kakao-clone-v2 2019. 11. 19. 16:16

  Descendant Selector decendant selector는 명시된 element의 모든 *후손* element를 선택한다. 예시 Child Selector child selector는 명시된 element의 모든 *자식* element를 선택한다. // 1 level 아래 예시 Adjacent Sibling Selector adjacent sibling selector는 명시된 element의 인접한 element를 선택한다. 예시 General Sibling Selector generak sibling selector는 명시된 element의 형제인 모든 element를 선택한다. 예시

  Read More
• [Java] String 함수

  Programming/Java 2019. 11. 15. 17:02

  substring(int start) 지정한 문자열에서 start부터 문자열 끝까지만 유지한다. substring(int start, int end) 지정한 문자열에서 start부터 end 앞까지만 유지한다. replace(String target, String replcament) 지정한 문자열에서 taret과 같은 문자를 찾아 replcement로 치환하는 함수 replaceAll(String regex, String replcament), replaceFirst(String regex, String replcament) replace() 함수와 다르게 첫번째 인자값으로 정규식이 들어간다. replaceAll은 특수문자로 치환이 어렵다. split(String st) 지정한 문자를 st를 기준으로 문..

  Read More
• [Java] 배열 오름차순, 내림차순 정렬

  Programming/Java 2019. 11. 15. 13:27

  배열, 리스트 int[] arr = {1,3,5,7,2,4,6,8}; List list = new LinkedList(); - 오름차순 Arrays.sort(arr); Collections.sort(list); - 내림차순 Arrays.sort(arr, Comparator.reverseOrder()); Collections.sort(list, Comparator.reverseOrder());

  Read More
• pinterest, dribbble

  Project/kakao-clone-v2 2019. 10. 31. 18:55

  https://www.pinterest.co.kr/ Pinterest - 핀터레스트 계정을 만들거나 Pinterest에 로그인하세요. 레시피, 집 꾸미기 아이디어, 스타일 관련 아이디어 등 시도해 볼 만한 다른 아이디어를 찾아보세요. www.pinterest.co.kr https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design pr..

  Read More