전체 글
-
카카오톡 클론 코딩 #1 프로젝트이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 7. 02:10
이번 시간부터는 카카오톡의 디자인(안드로이드 버전)을 코딩해 보도록 하겠습니다. 그 전에, 카카오톡 화면을 살펴보면, 5개의 화면, 친구 목록, 대화 목록, 게임, 설정 화면으로 이루어져 있습니다. 그리고 카카오톡의 기본 화면들은 색상을 다양하게 사용하지 않았고, 아이콘이나 박스가 많이 사용하고 있습니다. 이제 프로젝트를 만들어 보면... Github Desktop을 켠 다음, File에서 New Repository...를 클릭하여, Name, 이름은 kakao-clone-v2를, Description, 설명에는 Kakao Clone v2를 입력하고, Local Path, 경로는 Documents로 저장하고, README는 체크해 줍니다. Git Ignore, License 모두 None으로 설정한 다음..
-
고급 CSS 정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 6. 05:10
지금까지 (1)트랜지션, (2) 트랜스포메이션, (3) 애니메이션, (4) 미디어쿼리를 배웠습니다. (1) 트랜지션, Transition: 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과, 예를 들어, hover(마우스 커서가 박스 위에 있을 때)하면 변화가 일어나게 할 수 있습니다.(2) 트랜스포메이션, Transformation: element의 모양을 변형하게 하는 효과, 예를 들어, 뒤집거나, 비틀거나(skew), 크기를 키우거나, 줄일 수 있습니다.그리고 트랜지션-트랜스포메이션을 합쳐서 사용해 보았습니다. 즉, 트랜지션하는 순간에, 모양새가 변형되는것(트랜스포메이션)되는 것으로, hover할 때 회전시킬 수 있습니다. (3) 애니메이션, anmation: @keyframes을 만..
-
Media Queries,이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 5. 05:05
아이폰 같은 모바일 환경은 작은 화면이고, 모니터와 같은 데스크탑 환경은 큰 화면입니다. 화면의 크기에 따라서 CSS가 달리 쓰이기 때문에(큰 스크린을 위한 CSS와 작은 스크린, 화면을 위한 CSS가 다릅니다), 이번시간에는 브라우저가 큰 지 작은 지를 알아내는 방법에 대해 배우도록 하겠습니다. 먼저 배경색을 초록색이라고 해 보겠습니다. 여기서 유저가 모바일 환경이라고 한다면, 우리가 보는 화면의 최소값은 320px이고, 최대값은 640px일 때 HTML body의 배경색이 파란색이 되도록 하기 위해, @media screen and (min-width:320px) and max-width:640px) {body{background-color: blue;}} 라고 쓰겠습니다. 그럼 화면을 크게 하면, ..
-
[이상스쿨 수강 후기] 이상하게 쉬운 0원 환급반 #9이거 공부 했더니 어때?/주식투자 2020. 11. 4. 17:28
Chapter 02. 초보반 나만 따라해 10. 아직 한발 남았다. 지치지 않는 기적의 패턴분석 비법!(글자형) V자형: 주가가 급락한 이후에 반등하는 패턴 v자형 패턴에서는 각도와 반등폭이 중요하다 1. 하락각 < 상승각(매수세 < 매도세) → 반등가능성 大: 주가가 하락하는 각도보다 상승하는 각도가 더 클수록 반등 가능성이 큽니다. 다시 말해, 주가의 하락을 이끈 매도세보다 반등을 만드는 매수세가 더 강해야 반등 각이 커지게 됩니다. 2. 주가 하락폭의 70% < 상승(반등)폭 → 주가상승: 주가가 하락 폭의 70% 이상 반등해야 주가상승 추세가 이어집니다. 여기에 거래량급등까지 더해준다면 매수타이밍! 반면, 주가가 70% 이상 반등하지 못하면 추후 주가하락 가능성이 높다.
-
Animations, 애니메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 4. 04:40
이번시간에는 hover state 아니더라도, 변화가 계속 나타나길 원할 때, 즉, rotate를 반복하고 싶을 때 사용할 수 있는 애니메이션, animation을 배워보도록 하겠습니다. 저번시간과 다르게, 애니메이션을 만들기 위해서는 CSS에게 애니메이션을 생성했다는 것을 알려 주는 @keyframes, 키프레임을 작성해야 됩니다. 그런 다음, 애니메이션의 이름을 적어 줍니다. 예를 들어, 이름을 scaleAndRotateSquare라고 하겠습니다. 애니메이션은 2단계, (1) from, (2)to가 필요합니다. 예를 들어, (1) from, 어디서부터, 트랜스포메이션, 변형이 없는 상태에서, from{ transfrom: none; } (2) to, 여기까지, 트랜스포메이션, 변형이 회전 1바퀴, 사..
-
Transformation, 트랜스포메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 3. 02:30
이번시간에는 HTML문서의 element들을 변형시키는 효과, 트랜스포메이션, Transformation을 공부해 보겠습니다. 먼저 박스를 만들고, CSS에서 transform: rotate(20deg)를 작성해 보겠습니다. 브라우저에서 확인하기 전에, 박스가 잘 보이도록 폭 500px, 높이 500px, 배경색은 빨간색으로 설정하겠습니다. 그럼 박스가 20도 회전한 것을 확인할 수 있습니다. rotate, 회전뿐만 아니라, 아래와 같이 다양한 트랜스포메이션, Transformation을 시도해 볼 수 있습니다. 예를 들어, transform: skew(30deg, 20deg); 복사-붙여넣기하여 확인해 볼 수 있습니다 이러한 트랜스포메이션, Transformation은 트랜지션, transition과 ..
-
트랜지션, transition이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 2. 05:00
이번시간에는 트랜지션, transition: 이동 후 변화를 다채롭게 보여주는 효과에 대해 알아보도록 하겠습니다 먼저, span을 만들어, Text라고 쓴 후, 배경색은 초록색으로 설정하겠습니다. 그런 다음, 박스의 states, 상태가 hover 될 때, 배경색을 파란색으로 바꾸도록 하겠습니다. 마우스 커서를 Text상자로 가져가면, 배경색이 초록색에서 파란색으로 변경되는 것을 확인할 수 있습니다. 그렇다면 이번에는 글자색을 흰색으로 설정하고, 배경색을 빨간색으로 변하도록 코드를 고쳐 보겠습니다. 위와 같이 배경색이 초록색으로 빨간색으로 변화될 때, 아직까지 트랜지션, transition효과를 적용하지 않아서, 변하는 동안 어떤 애니메이션, animation도 나타나지 않았습니다. 여기서 트랜지션, t..