Enjoy Programming

드디어 코코아톡 클론 코딩을 시작한다. 먼저 백엔드는 구현이 안되기 때문에 레이아웃을 구현하는데 초점을 둔다. 총 8페이지의 코코아톡 페이지를 만들 예정 강의 틈틈히 기록용이라 양식이나 순서가 없다는 점 이해해주시길... 각 페이지당 html과 css를 구현해보자 먼저 첫 번째 페이지는 index.html로 명명한다 이유는 웹서버가 default로 index.html을 찾아보도록 설정되어 있다고 한다. 먼저 첫 번째 페이지의 상단 status - bar를 만든다 - id는 유니크한 이름, class는 일반적이지 않은 식별 가능한 이름 *BEM ( block Element and modifier ) 블록 요소 규칙 Class Name . btn {} - block . btn__price {} - btn안에..

내가 프로그래밍을 배우던 중 깃에 대해 알게 되었다.. 근데 아직도 잘 모른다. 이제부터 git에 대해서 알아보고자 한다. Git 이란! 버전관리시스템 ( vcs, version control system ) 중 하나로 프로그래머들 사이에서 가장 유명하다 GitHub는 git의 데이터를 저장하는 서버이다. git은 파일을 계속 Tracking 한다. git이 왜 필요할까? 우린 열심히 코딩을하고 프로그래밍을 짠다. 매번 저장하고 주석달고.. 근데.. 방대한 코드에서 내가 짠 코드가 뭔가 잘못 되었다면 다시 하나씩 지우고 다시 돌리느냐? ctrl+z로 무한 되돌리기? 근데 이미 저장하고 reboot된 상태라면? 매번 여러 파일을 만들어 저장? 돈이 없다.. 그만한 저장장치를 사려면... 데이터 센터도 아니..

media query는 오직 css만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. media query는 css 조건을 추가할 수 잇는 방법이다. media query 조건문 안에는 반드시 element에 css를 넣어 줘야 한다. media query는 and를 써서 조건을 여러개 쓸 수 있다. min-width, max-width, min-device-width, max-device-width, orientation(landscape & portrait감지) 예를 들어 width가 500보다 작으면이라고 지정한 규칙에 브라우저 및 장치 환경이 일치할 때 css를 적용할 수 있는 방법 media query는 반응형 웹디자인의 핵심. 뷰포트 크기에 따라 서로 다른 조판을 생성 사용자가 터치스크린을..

transition은 마우스 동작이나 키보드 동작이 이루어질 때만 변형이 이루어지고 애니메이션 효과가 생긴다. 계속 애니메이션을 재생하고 싶으면 뭘 해야 할까... css에 animation속성을 이용하면 된다! 사용법은 먼저 style시트에서 @keyframes Name{} option 1 @keyframes superLeeDeveloper { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } img { border: 2px solid black; border-radius: 50%; animation: superLeeDeveloper 2s ease-in-out; } superLeeDeveloper라는 이름의 keyframe규칙이 ..

transformation : 요소를 말 그대로 변형시킨다. transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 할 수 있다. img태그에 적용해보자. img { border: 2px solid black; border-radius: 50%; /* transform: rotateY(50deg); */ } 먼저 이미지를 업로드하고 border를 준 뒤는 주석을 풀고 trasnform y축 각을 줘보자 따라~ 변했다.. y축을 기준으로 각이 줄었다 ㅎㅎ 90deg를 주면 수직이니까 1자가 된서 안보인다... transform: rotateY(50deg) rotateX(50deg) rotateZ(10deg); x,y,z축 변형이 가능하다. scale(x, y) : x, y축으로 ..