css8 [HTML/CSS] 개톡 프로젝트 1일차(figma - 계획 및 구상, 파트 분배) 개톡은 지금까지 웹 스터디에서 배운 HTML과 CSS를 활용해, 톡 서비스를 구현을 목적으로 한 프로젝트이다. 무엇보다 인생에서 처음으로 github를 활용했던 첫 협업 프로젝트여서 너무 설렜다. 이 설레는 마음의 초심을, 프로젝트가 끝날 때까지 지니는 것을 목표로, 본격적인 1일차! 계획 및 구상을 진행했다. 계획 및 구상) - 사용 툴 프로젝트에 있어서 가장 중요하고 튼튼해야하는 부분이다. 협업에서는 더더욱 서로가 추구하고자 하는 결과물의 방향성을 정해 나가고, 조정해야 하기 때문에 가장 신경써야 하는 부분이다. 다른 것 보다도, 우리 팀은 협업을 중요시했기 때문에, 모두가 동시에 의견을 제시하고 계획을 적어나갈 수 있는 공유 화이트보드 서타일의 figma 사이트를 사용해 진행했다. https://w.. 2021. 8. 7. [HTML&CSS] 웹 프로젝트 12일차! (friends.html & .css ) 지난 시간에 이어 이번엔 friends.html을 만들어 보았다. 그리고 세분화한 css파일을 적용해 아래와 같은 화면처럼 보이게 했다. 이번에도 역시 HTML을 작성하기 전 어떻게 박스를 입힐지에 대한 구상부터 했다. friends.html ) 확실히 지난 index.html보다는 더 복잡해 졌다... ㅎㅎ 쨋든!! 이번에도 font awesome의 icon을 이용해서 아이콘들을 넣어주었고, text는 span태그를 사용했다. 천천히 큰 div부터 차례차례 잡아가다보면 어느새 완성!! friends.html 코드) status-bar의 class를 저번 index와 똑같이 해서 css가 적용된 상태이고, 추가적으로 user-component부분이랑 nav-bar 부분 그리고 no-mobile 부분 세 .. 2021. 7. 21. [CSS] 웹 프로젝트 11일차! (index 부분 css 작업) 지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다. 이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!! 우선 모든 화면에 적용해야 하는 status-bar부터 시작! 아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한 reset.css파일을 먼저 추가해 주어야 한다!! rest.css) status-bar) 우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다. 이럴 땐 무엇을 쓴다? --> 바로 flex!!! icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다. 그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 바로... width:33.. 2021. 7. 20. [CSS] 웹 프로젝트 9일차! (animation) 오늘은 여러 state 속성에 대해 공부했다. active, hover, focus, focus-within, visited ~~ 그리고 드디어.. 애니메이션 효과를 넣는 방법을 배웠다. state) - active -> 해당 요소를 마우스로 클릭했을 때 지정한 효과를 적용한다. - hover -> 마우스가 해당 요소 위를 지나갈 때 지정한 효과를 적용한다. - focus -> 키보드로 선택되었을 때 지정한 효과를 적용한다. - focus-within -> 부모 요소에게 적용하며, 자신의 자식 요소 중 하나가 focused 되었을 때 지정한 효과를 적용한다. - visited 링크를 걸어 두었을 때, 이미 방문한 사이트일 경우에 효과를 적용한다. 추가적으로 조건을 나열해 여러 상황을 설정할 수도 있다!!.. 2021. 7. 14. [CSS] 웹 프로그래밍 8일차! (position & pseuco selector) 오늘은 position 과 pseudo selector에 대해 공부했다. 우선 position에 대해 알아보자!! position) position은 요소의 위치를 지정하는 기준을 정하고 그에 맞추어 요소의 위치를 설정한다. 그렇다면 본격적으로 4가지 속성에 대해 알아봅시당!! - position : static ; (기준 없음) 모든 태그의 position 디폴트 값은 static으로 설정되어 있다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. - position : relative ; (요소 자신을 기준) 태그의 위치를 살짝 조정하고 싶을 때 사용한다. 이 코드를 사용함으로써 top(위) bottom(아래) left(왼쪽) right(오른쪽) 속성을 사용해 위치를 조정할 수 있다. * 주의할 점.. 2021. 7. 12. [CSS] 웹 프로젝트 7일차! (flexbox froggy) 오늘은 챌린지 쉬는 날~~ 오늘만 푹 쉬기로 했다!!! ...... 였으면 좋겠지만 그래도 간단한 복습이라도 진행하기로 했다!! ㅋㅎㅋㅎㅎㅋ 오늘은 가장 헷갈리는 개념 중 하나인 flex를 쉽고 재밌게 뽀실 수 있는 게임을 해 보기로 했다! 목표는 개구리의 위치를 연잎에 위치하게끔 flex코드를 이용해 문제를 풀어나가면 되는 간단한 게임이다. 총 24stage로 구성되어 있다. ㅋㅎㅋㅎㅎㅋ 그나저나 개구리가 참 귀여운 것 같당 ㅎㅎㅎ flex익히는게 이렇게 귀엽고 재밌을 줄이야~~~ ㅎㅎ 이제 display:flex; justify-content: ; align-items: ; flex-direction: ; 이고 뭐고 다 덤벼~~~~ https://flexboxfroggy.com/#ko Flexbox .. 2021. 7. 12. 이전 1 2 다음
