flex
-
카카오톡 클론 코딩 #18 친구목록_행이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 24. 01:34
프로필사진, 닉네임, 상태메시지, 우측열의 형태로 구성되어 있는 친구목록_행은 친구창, 채팅창, 더보기창에서 모두 쓰이고 있습니다. 따라서 창마다 CSS를 만들 필요 없이, 친구목록_행에 필요한 CSS를 하나만 만들어 줄 수 있습니다. 이번 포스트에서는 친구목록_행을 구성한 다음, 복사-붙여넣어 주는 방식으로 수정해 보도록 하겠습니다. 그럼 friends.html의 친구목록_행인 friends_friend friend friend--lg를 복사하여, index.html의 친구목록_행 시작부분에 붙여 넣은 다음, 내용과 class명을 맞게 고쳐줍니다. 그리고 친구목록_행에 적용시킬 friend.css를 만들고 @import를 시켜 줍니다. 배경색을 주면, frined.css에 적용되는 수많은 친구목록_행을..
-
카카오톡 클론 코딩 #13 상태표시줄이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 19. 01:45
이번 포스팅에서는 상태표시줄을 만들어 보겠습니다. 그 전에, style.css에서 몇 가지 값을 default 하겠습니다. body에서 배경색은 흰색으로, padding값은 10px(상하), 20px(좌우)로 설정해 줍니다.(page ruler redux이용) 그리고 글자색은 #1D1D1D로 설정해 줍니다(pick color from page 이용) css파일과 html파일을 함께 볼 수 있도록, style.css는 창 위에, index.html을 창 아래쪽에 두도록 하겠습니다. 이제 status-bar.css라는 새파일을 만들어서, styles.css에 import 합니다. 아래와 같이 배경색을 넣어 보면, 상태표시줄 부분이 선택 되었다는 확인할 수 있습니다. 이번에는 dispaly: flex를 이용해..
-
CSS정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 31. 03:55
지금까지 배웠던 CSS를 한 눈에 정리해 보도록 하겠습니다.제일 먼저, 1. CSS-syntax, 문법에 대해 배워보았고, 2. CSS-HTML연결을 시켜 보았습니다. 그 다음, 3. 박스모델(마진, 패딩)에 대해 알아보았습니다. 그리고 4. 포지션(static, fixed, relative, absolue)를 배웠고, 5. 디스플레인(block, inline-block, inline)에 대해서 살펴보았습니다. 6. 박스를 나열하는 방법인 flex와 7. class로 따로 명명하지 않았지만 지칭하는 방법, 가상설렉터(type, nth child 등)와 마지막으로 8. element states(hover, active, focus, visited)를 배웠습니다.
-
Fluid layouts with Flexbox이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 28. 05:15
이번시간에는 배열하는 방법 중 하나인 flex, 플렉스에 대해 배워 보도록 하겠습니다. flex, 플렉스가 등장하기 전에 있었던 여러 문제점들은 flex, 플렉스를 사용함으로써 해결할 수 있습니다. flex, 플렉스가 어떤 문제들을 해결 하였는지를 살펴 보도록 하겠습니다. 박스 3개를 만든 후, 배경색은 빨간색, 폭은 200px, 높이는 200px로 설정하고, 디스플레이는 inline-block으로 설정 하겠습니다. 여기서 박스를 더 추가 하게 되면, 박스들이 inline-block 디스플레이 형태로 나란히 옆으로 나열되는 것이 아니라, 박스들이 자리를 충분히 차지했다면, 아래쪽으로 이어 붙는다는 것을 확인할 수 있습니다. 이러한 문제점 뿐만 아니라, 여기에 margin을 넣어주면, 자동으로 완성되는 그..
-
공부계획 #3 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 22. 05:35
지금부터는 CSS에 대해 배워보도록 하겠습니다. 1> 제일 먼저 CSS를 HTML에 어떻게 결합하는 방법에 대해 배우겠습니다. 2> 그 다음, box, 박스 모델을 배워서 element, 내용들을 screen, 화면상에 위치시키는 방법에 대해 공부 하겠습니다. 3> 그런 다음, flex box에 대해 공부해 보겠습니다. 이 레이아웃은 데스크탑과 모바일 화면 사이즈에 맞춰 반응 합니다.4> 그 후, 차례로, animation, transition, media query같은 심화된 내용에 대해 배워보도록 하겠습니다.