이번 실습을 통해서 만들어진 결과를 찍은 스크린샷

안녕하세요! 이번에는 CSS 에서 정말 정말 많이 사용되고 있는 Parallax 효과를 이용해서 표현할 수 있는 멋진 효과에 대해 설명드리려고 합니다.

먼저, 이 번 과정에서 사용되는 개념은 다음과 같습니다. 모르시는 분들은 기초 개념을 먼저 숙지하고 오시면 좋을 듯 합니다!

• Parallax 란 무엇인가? W3Schools 설명 보러가기

• background 속성에 대해서 알아 보기

• background-position 설명 보러가기 - W3Schools

• background-size 설명 보러가기 - W3Schools

• background-repeat 설명 보러가기 - W3Schools

이번 효과는 간단하니 바로 시작할게요!

먼저 바탕이되는 div부터 만들어봅시다.

이미지 2장을 사용하기에 앞서, 각 이미지를 담을 div를 만들고 id 값을 각각 top, bottom 으로 정했습니다.

배경을 살짝 회색빛으로 만들어 분위기를 냈습니다. 

다음은 배경이 될 이미지를 로드합니다.

이미지가 뭔가 번잡해보이네요.

바로 background-image 로 입힌 이미지에 대한 추가 속성을 설정해주지 않았기 때문입니다.

이미지 추가 속성들을 적용시킨 결과를 보겠습니다.

결과가 제법 분위기 있게 나왔네요!

여기서 패럴랙스를 가능하게 하는 것은 background-attachment: fixed; 속성입니다. 이 속성을 사용해주면 스크롤을 할 때 스크롤에 딸려 올라가는게 아니라 뒷 배경이 천천히 움직이는 것처럼 동작합니다.

border-bottom 을 주어서 패럴랙스가 동작할 때 구분선을 넣어주었습니다. 이렇게해주니 스크롤 할 때 흑백으로 처리된 사진이 원본 사진으로 변하는 것처럼 보여서 아주 멋지네요!

이처럼 패럴랙스를 사용하면 간단하면서도 아주 멋진 효과를 기대할 수 있습니다.

그럼 오늘도 모두 즐코딩하세요~

순수 CSS와 마우스 hover 효과를 이용해 위 사진의 효과를 만들어보겠습니다.

위 효과를 꾸며내는데에 사용한 개념은 이렇습니다.

- flex-box 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [flex-box 설명 보러가기]

- transform 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [transform 설명 보러가기]

- box-shadow 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [box-shadow 설명 보러가기]

- position 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [position 설명 보러가기]

준비가 되었으면, 먼저 첫 번째 준비물인 HTML부터 준비해봅시다.

우리는 바탕이 되어줄 #wrapper 를 만들고 그 안에 사각형을 총 4개를 만들겁니다. 색깔은 순서대로 파랑, 빨강,초록, 보라색으로 정했습니다 !

그 다음으로는 각 사각형을 만들어보겠습니다. 여기서 이제 flex-box가 사용이되니 어떤식으로 사용해서 정렬을 하는지 유심히 봐주세요 !

transform을 이용해 사각형을 45도로 기울이고 살짝 비스듬히 누워있는 형태로 만들었습니다. 

box-shadow 효과를 사용하면 어느정도의 입체감을 느끼게 해줄 수 있답니다.

다음은 마우스 hover 효과가 발생할 때 사각형을 위로 띄워줄 건데요. 여기서 transform이 어떻게 사용되는지 잘 주의해서 보시기 바랍니다!

여기서 주의할 점은, hover 효과에 적용할 transform 은 원래 적용된 효과를 그대로 가진 상태에서 다른 무언가를 추가해야한다는 점입니다. 

hover 효과가 들어갔을 때 적용할 스타일은 기존의 스타일과는 전혀 다른 것으로 인식되기때문에 기존 효과를 그대로 사용하고싶다면 그대로 가지고와야 합니다.

여기서 한 가지 굉장히 중요한 점이 있습니다. transform 에 사용된 효과를 봐주세요. 우리가 바라보는 시점에서는 Y 축 방향으로 끌어올리기만하면 되는데, 왜 translateY가 아니라 translate를 사용한 것일까요?

위의 사진을 봐주세요.

transform을 이용해서 도형을 비틀었다면, 더 이상 X 축과 Y 축은 우리가 알고있는 수평 수직의 선이 아닙니다. 비틀어진 만큼 각 축 또한 틀어지게 되는데, 얼마만큼 틀어졌는지를 감안해서 도형을 움직여줘야 합니다 !

이제 마지막으로, 여러 겹으로 보일 수 있게 도형을 추가하고 같은 효과를 적용시켜 보겠습니다.

새롭게 추가된 효과들 중에서 .child1 과 .child2 에 적용된 skew, translate 효과를 주목하세요.

왜 부모에 적용된 효과랑 다를까요? 

그 이유는 바로, 자식이기때문에 부모에 적용된 효과를 상속받기 때문입니다. 만약에 형제 관계였다면 효과들을 똑같이 적용시켜줘야 했겠지만, 부모-자식으로 연결되었기때문에 부모에게 적용된 효과를 그대로 물려받습니다. 그렇기때문에, 부모에게 적용된 효과에서 계산해서 적용을 해줘야합니다.

자 이렇게 순수 CSS로 표현할 수 있는 멋진 효과를 알아봤습니다. 모던한 느낌의 이미지와 함께 사용한다면 더욱 더 사이트를 세련되게 꾸밀 수 있을 것 같네요!

오늘도 다들 즐코딩하세요~

문제 설명

주어진 12 시간 (AM / PM) 시스템을 24 시간 시스템으로 변환하시오.

참고: 자정은 12 시간제에서 12:00:00AM 로, 24 시간제에서 00:00:00 로 표기하고 정오는 12 시간제에서 12:00:00PM, 24 시간제에서 12:00:00 로 표기한다.

함수 설명

아래의 timeConversion 함수를 완성하시오. 반환 값은 입력 값을 24 시간제로 표현할 수 있는 새로운 문자열이어야 한다. 

timeConversion 함수는 다음과 같은 매개변수를 가진다.

• s : 12 시간제 형식의 문자열

입력값 형식

• 01 ≤ hh ≤ 12
• 00 ≤ mm, ss ≤ 59

조건

• 모든 입력 값은 유효한 시간 값이다.

결과 값 형식

24 시간제 형식으로 변환해 반환한다. 

• 00 ≤ hh ≤ 23

예시

07:05:45PM

출력

19:05:45

문제 풀이

들어오는 시간 값이 문자열인데 항상 PM 혹은 AM 을 붙인 상태에서 들어오므로 이를 이용해 오전, 오후로 구간대를 나눠서 해결할 수 있어보입니다. 문자열에서 특정한 문자로 끝나는 경우를 조사하고 싶을 땐 endsWith 라는 메소드를 사용하면 간단하지만, Hacker Rank 의 Node 가 해당 메소드를 지원하는지 알 수 없으니 정규식으로 수행합니다. 문제에서 PM / AM 이 대소문자 중 어느것으로 들어올지에 대해 알려주지 않았으므로 모두 검사를 수행하는게 나을 듯 합니다.

풀이의 흐름은 다음과 같습니다.

1. 입력 값이 PM 이라는 문자열을 갖고 있는지 확인합니다.
2. PM 혹은 AM 을 빈 문자열로 치환 후 문자열을 쪼갭니다.
3. 쪼갠 문자 배열 중 가장 앞 부분에 해당하는 시간을 Int 형으로 변환합니다.
4. 현재 시간이 12:xxPM , 12:xxAM 중 하나에 해당하는지 검사합니다.
5. 각 타임 구간에 맞게 시간을 +12 혹은 -12 연산을 합니다.
6. 계산 된 시간이 한 자릿수라면 앞에 0 을 붙여줍니다.
7. 쪼갰던 요소를 하나로 합쳐서 반환합니다.

위 과정은 다음과 같습니다.

여기서 우리가 주의해야 할 점은 12 시간제에서 12:00:00PM ~ 12:59:59PM, 12:00:00AM ~ 12:59:59AM 은 24 시간제에서도 12시로 표현한다는 점입니다.

저는 24 시간제를 사용하고 있기 때문에 12 시간제의 이런 예외처리에 대해 많이 헷갈렸네요. 솔직히 지금도 헷갈립니다 ;;

어쨌든, 이 문제는 해당 특정 구간대에만 예외처리를 넣어주면 간단하게 해결할 수 있습니다.