본문 바로가기

Programming

기초코딩 - 채팅어플 CSS로 디자인하기 - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 친구 목록 페이지의 아이콘의 색상과 하단 바의 위치를 고정시키는 방법을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1250 기초코딩 - 채팅어플 CSS로 디자인하기 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 친구 목록 페이지를 디자인하기 위해 CSS를 작성하였습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글 tm-csc.tistory.com 이번 글에서도 친구 목록 페이지를 CSS로 디자인해보도록 하겠습니다. 그럼 VSC를 실행해주세요. 우선 채팅어플에서 메시지가 도착했을 때 빨간색원에 숫자가 표시되는 .. 더보기
기초코딩 - 채팅어플 CSS로 디자인하기 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 친구 목록 페이지를 디자인하기 위해 CSS를 작성하였습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1248 기초코딩 - 채팅어플 친구목록 만들어보기 - 3편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 채팅어플의 친구 목록 창에서 아이콘을 생성하는 방법에 대해서 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모 tm-csc.tistory.com 이번 글에서도 이어서 CSS를 작성하여 친구 목록 페이지를 디자인해보겠습니다. 그럼 VSC부터 실행해주세요 먼저 저번에 만들었던 아이콘들의 크기를 변경해주는 것이 좋을 것 같습니다. 그래서.. 더보기
기초코딩 - 채팅어플 친구목록 만들어보기 - 3편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 채팅어플의 친구 목록 창에서 아이콘을 생성하는 방법에 대해서 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1247 기초코딩 - 채팅어플 친구목록 만들어보기 - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 채팅어플에 있는 친구 목록 창을 만들기 위한 HTML작성방법을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시 tm-csc.tistory.com 이번 글에서는 친구 목록 페이지를 디자인하기 위해 CSS를 작성하겠습니다. 그럼 VSC부터 실행해주세요. 가장 먼저 CSS에서 디자인하기 위해서 CLASS명을 지정해줘.. 더보기
기초코딩 - 채팅어플 친구목록 만들어보기 - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 채팅어플에 있는 친구 목록 창을 만들기 위한 HTML작성방법을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1245 기초코딩 - 채팅어플 친구목록 만들어보기 - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 로그인 페이지를 디자인을 완성하는 방법까지 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑 tm-csc.tistory.com 이번 글에서는 지난 글에서 이어서 친구 목록 창을 만들겠습니다. 그럼 VSC부터 실행해주세요. 먼저 위와 같은 형태로 만들기 위해서는 항목마다 LI에 이름을 정해주겠습니다... 더보기
기초코딩 - 채팅어플 친구목록 만들어보기 - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 로그인 페이지를 디자인을 완성하는 방법까지 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1243 기초코딩 - 로그인페이지 디자인하기 - 3편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 로그인 페이지를 디자인하며 체크박스 추가하는 방법도 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 tm-csc.tistory.com 이번 글에서는 다음 페이지 채팅앱에 친구 목록을 만들기 위해 HTML을 작성해보겠습니다. 그럼 먼저 VSC부터 실행해주세요. 가장 먼저 로그인 페이지에서 만들어놓았던 INDEX.html 파일에서 작성.. 더보기
기초코딩 - 로그인페이지 디자인하기 - 3편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 로그인 페이지를 디자인하며 체크박스 추가하는 방법도 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1242 기초코딩 - 로그인페이지 디자인하기 - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 로그인 페이지를 디자인하며 조금 더 실무적인 내용을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분 tm-csc.tistory.com 이번 글에서도 로그인 페이지를 디자인하며 마무리해보겠습니다. 먼저 저번 글에서 디자인한 글을 보면 폰트 사이즈가 조금 변경되었으면 하는 느낌이 개인적으로는 듭니다. 그리고 밑줄이 있었으면.. 더보기
기초코딩 - 로그인페이지 디자인하기 - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글에서는 로그인 페이지를 디자인하며 조금 더 실무적인 내용을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1240 기초코딩 - 로그인페이지 디자인하기 - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 CSS를 리셋하는 방법과 CSS를 분리하는 방법을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 tm-csc.tistory.com 이번 글에서도 이어서 로그인 페이지를 디자인해보도록 하겠습니다. 그럼 VSC부터 실행해주세요. 저는 초록색으로 타이틀을 변경하고 싶고 타이틀이 조금 더 bold 하면 좋을 것 같.. 더보기
기초코딩 - 로그인페이지 디자인하기 - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 CSS를 리셋하는 방법과 CSS를 분리하는 방법을 알려드렸습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1239 기초코딩 - CSS 리셋, CSS 분리하여 연결하기 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 상단바의 요소중 하나를 가운데에 올 수 있도록 CSS를 수정했습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑 tm-csc.tistory.com 이번 글에서는 상단바 외에 나머지 가입페이지를 디자인 해보도록 하겠습니다. 그럼 VSC와 만들고 있는 웹페이지부터 실행해주세요. 먼저 지난번에 만들었던 웹페이지를 살펴보면 CSS리.. 더보기
기초코딩 - CSS 리셋, CSS 분리하여 연결하기 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 상단바의 요소중 하나를 가운데에 올 수 있도록 CSS를 수정했습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1237 기초코딩 - 가입페이지 문구 디자인하기 - 3편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 justify-content, first-child font-faimily를 활용하여 가입페이지의 디자인을 변경해보았습니다. 만약 기억이 잘 나지 않으시거나 혹시 모 tm-csc.tistory.com 이번 글에서는 CSS를 리셋하는 방법에 대해 알려드리겠습니다. 갑자기 CSS를 배우다 리셋한다고? 무슨 소리인가 싶겠지만 먼저 만들고 있는 .. 더보기
기초코딩 - 가입페이지 문구 디자인하기 - 3편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 justify-content, first-child font-faimily를 활용하여 가입페이지의 디자인을 변경해보았습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1235 기초코딩 - 가입페이지 문구 디자인하기 - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 가입페이지의 상단바의 HTML를 CSS를 활용해 일자로 펼쳐보았습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 tm-csc.tistory.com 이번 글에서도 지난 글에 이어서 진행하도록 하겠습니다. 지난 글에서 폰트 추가하는 방법을 알려드려서 혹여나 여러 개의 폰.. 더보기