Css3 카카오 만들어보기 채팅그림을 누르면 나오게 했다. 해당 채팅창을 선택하면 색이 변하도록 css를 넣어주었다. 채팅창css 돋보기를 누르면 여기로 넘어온다. 이클립스 ...를 누르면 나오는 페이지이다. 위 화면에서 cogs를 누르면 나오는 setting페이지이다. 이번 css연습은 노마드코더의 kakao clone을 보고 만든 졸업작품이다. 아직 완벽하게 css의 속성을 이해한 것은 아니지만 적어도 display :flex에 대해서는 이해를 충분히 했고, 애니메이션에 대해서 더 연습을 많이 해야겠다고 느꼈다. https://ho-bolt.github.io/KokaoClone/ 위의 것을 만든 링크이다. index ho-bolt.github.io 2021. 9. 21. Css 각종 특징들 정리 flexbox 1. 자식엘리먼트에 어떤 것도 적으면 안된다. 부모 엘리먼트만 명시한다 div의 부모인 body에게 display :flex를 주면 body가 div를 조절할 수 있게 된다. 2. 주축과 교차축 가로 (justify-content) 세로 (align-items) top,left,right등 하나라도 바꾸면 서로 완전히 레이어가 달라진다. 그래서 서로 신경을 안쓴다. fixed 한 건은 가장 위에 있다. Position static 레이아웃이 박스를 처음 위치에 둔다. relative는 element가 처음 위치한 곳을 기준으로 수정한다. relative를 하면 top left right 등 설정가능 absolute는 가장 가까운 relative 부모를 기준으로 이동시켜준다. 만약 부모중에 .. 2021. 9. 21. Css 특징 Css는 Cascading Style Sheet의 줄임말로 위에서부터 차례대로 적용된다. 따라서 위에서부터 가장 마지막에 있는 것이 나타나게 된다. Inline : width, height속성을 가질 수 없다. 옆에 위치한다. block : width, height를 가질 수 있고 옆에 오지 않고 밑에 붙는다. block는 3가지 속성을 가진다. margin : box의 border(경계)의 바깥에 있는 공간 🔥 여기서 margin값을 적용시킬때 알아두어야 할 것이 있다. margin :20px 면 사방으로 margin이 20px가 적용되고 margin: 20px 15px면 20px는 상하, 15px는 좌우로 적용이 된다. margin : 20px 5px 12px 10px 면 순서대로 위 오른쪽 아래 왼.. 2021. 9. 10. 이전 1 다음
