전체 글
-
17개월 아기, 드디어 어린이집 가다육아일지 2023. 3. 24. 22:12
입덧이 심했던 임산부 시절, 아가 태어나면 일찍 어린이집에 보내고 내 생활하자 했던 마음이 아기를 낳고 키워보니 생각보다 바로 보내는 것이 마음처럼 쉽지 않았고 아가가 어느 정도 단단해진 17개월이 돼서야 보내게 되었습니다. 대망의 등원 첫 날, 0세반에서 1세반으로 올라온 친구들이 많이 울어 어수선했지만 땅콩(태명)이는 엄마와 함께해서 그런지 낯선 환경에 당황하지 않고 교실을 탐색하며 시간을 잘 보내 주었습니다. 어린이집에서 며칠을 함께 잘 보내주어 성공적인 적응기를 기대했는데.. 엄마와 분리가 시작되는 날, 교실앞에서 대성통곡에 이어 교실에서도 계속해서 울었다는 우리 아기 낯선 공간에서의 엄마와의 분리가 충격이 컸는지 며칠 내내 어린이집 주변에서부터 눈물을 흘렸고 교실 앞에서는 강렬하게 등원거부를..
-
카카오톡 클론 코딩 #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에 적용되는 수많은 친구목록_행을..
-
카카오톡 클론 코딩 #17 알림 물풍선이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 23. 01:01
이번 포스트에서는 네비게이션 바에 뜨는 알림 물풍선을 만들어 보겠습니다. 여기서 알림물풍선들은 각 아이콘(사용자, 물풍선 등)에 한정된 것이므로, position property를 잘 활용해 줘야 됩니다. 먼저 index.html에서 알림물풍선을 만들고, 엄마element인 물풍선은 position을 relative로, chile_element인 알림물풍선은 position을 absolute로 해 줍니다. 그럼 이제 알림물풍선이 우측 상단에 위치할 수 있도록 자리를 잡아 주고, 글자크기를 조정한 다음, 글자색은 흰색으로, 배경색은 #FE6420로 입력해 줍니다. 이번에는 알림물풍선의 크기를 조정한 다음, 글자를 상하 좌우 정가운데에 위치 시켜 줍니다. 마지막으로 border-radius의 값을 heigh..
-
카카오톡 클론 코딩 #16 box-sizing: border-box이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 22. 01:51
이번 포스트에서는 너비가 300px, 높이가 100px인 box를 가지고, box에 padding 값을 줄 때 생길 수 있는 문제를 해결해 주는 box-sizing: border-box;를 살펴 보겠습니다. 기본적으로 box에 padding-left: 20px;를 줄 때, 즉, box-sizing: border-box;를 입력하지 않았다면, box 내부에 padding 값만큼, 빈공간을 만들어 주기 위해, box의 크기를 20px만큼 더 키우고 내부에 padding, 빈공간을 만듭니다. (padding은 초록색으로 표시) 만약 box의 너비를 100%로 맞춰 놓고(브라우저 창에 맞추기), box에 padding값을 추가하면, box의 크기는 커지기 때문에, 우측 content는 padding값만큼 잘려서..
-
카카오톡 클론 코딩 #15 네비게이션 바 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 21. 01:32
이번 포스팅에서는 네비게이션 바를 만들어 보도록 하겠습니다. 앞선 포스트에서 했던 방식대로, 제일 먼저 CSS폴더에 nav-bar.css라는 새 파일을 만들고, style.css에 nav-bar.css를 @import합니다. 그럼 네비게이션 바에 배경색을 지정해주면, 네비게이션 바가 잘 선택 되어있는 지 확인할 수 있습니다. 상태표시줄, 헤더, 네비게이션바는 화면을 스크롤하더라도 그 자리 그대로를 지키고 있습니다. 그래서 position: fixed;를 이용하여 자리를 고정시켜 주겠습니다. (body의 padding에 둘러싸여 있도록 한 설정 제거) position: fixed는 기존에 있던 위치에서 다른 위치에 고정시키도록 설정한 것이기 때문에, position: fixed를 쓸 때는 꼭 width를 ..
-
카카오톡 클론 코딩 #14 header CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 20. 01:33
이번 포스팅에서는 header 부분을 수정해 보겠습니다. 1> 정렬과(세로정렬->가로 정렬), 간격을 조정하고, 2> 왼쪽에 적힌 (어떤 창인지 알려주는)제목의 글자 스타일을 수정하고, (글자크기를 키우고, 굵기는 진하게) 3> 우측에 있는 아이콘들의 크기와 간격을 주는 순서로 고쳐 보겠습니다. 그럼 제일 먼저, 새 파일 header.css를 만들고, style.css에 header를 @import 합니다. 위와 같이 해 주고 header에 배경색을 주면, header부분이 잘 선택되었다는 것을 브라우저에서 확인할 수 있습니다. 1> dispaly: flex; 를 입력하여, 가로정렬을 세로정렬로 고쳐 주고, (div태그는 display: block이 default값, span태그는 display: inc..
-
카카오톡 클론 코딩 #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를 이용해..