천진난만 코딩 스토리

6) badge 파일 만들고 적용하기 nav-bar에만 있던 notification을 별도로 분리해주겠음. 기존에 작성되어있던 코드 중 adsolute 부분을 제외하고 새로운 badge.css 파일에 badge에 옮김. 물론 이 파일도 import 해주어야 함. 모든 html 파일에 기존에 nav-bar의 notification에 badge 를 추가해줌. 문제없이 잘 있는 모습을 볼 수 있음. 시간과 알림 배지를 만들기 위해 작성해줌. 시간과 배지를 작성만 하였지만 기존에 스타일한 것이 있어서 자동으로 스타일이 적용되어 나타난 것을 볼 수 있음. 7) margin 주기 시간이 있는 span 태그의 class에 __time을 추가해줌. __time을 불러와서 magin을 주고 span 태그는 inline ..

1) Chats.html 만들기 friends.html 파일에 있던 코드를 복사하여 그대로 붙여넣기 해줌. chats.html 파일과 friends.html 파일에 각 link에 주소를 미리 입력해줌. find.html과 more.html을 아직 생성되지 않았지만 미리 작성해줌. title을 변경하여줌. title이 변경된 것을 볼 수 있음. 2) 아이콘 변경 및 추가 Chats 화면에서는 Friends 화면과 다르게 사람 아이콘은 비워져야 하고 채팅 아이콘은 채워져야 함. 맞는 아이콘을 찾아 코드를 붙여넣기 해줌. 아이콘이 변경된 것을 볼 수 있음. header title을 변경하고 말풍선 아이콘을 추가해줌. Chats으로 변경되었고 아이콘이 추가된 것을 볼 수 있음. 3) 필요없는 부분 삭제 Chat..

4) channel header 만들기 main 태그 안의 component 코드 밑에 박스를 만들고 를 하여 friends-screen__channel 박스를 만들고 그 안에 를 하여 friends-screen__channel-header 박스를 만들고 그 안에 Channel를 하여 Chnnel 적어주고 아이콘도 붙여넣기 해줌. (사이즈는 작게) Channel 이란 글자와 아이콘이 입력됨. 5) channel component 만들기 channel header 코드 밑에 component 코드를 복사하여 붙여줌. 다만 사이즈가 작아야 하기 때문에 xl 사이즈가 아닌 sm 사이즈로 적어줌. title도 Channel 로 적어줌. 그 밑의 component에는 '2>' 표시를 만들기 위해 코드를 작성해줌...

1) 기본 component 수정해서 사용하기 작성했던 코드는 현재 페이지에서 사용할 코드와 조금 다름. 지금은 subtitle이 필요없기에 주석처리하여 숨겨둠. 현재 페이지에서 사용할 avatar의 크기는 좀 더 크므로 user-component__avatar--xl 을 추가로 작성하고 user-component__avatar--xl 을 불러와서 크기를 더 키워줌. 기존 크기보다 이미지가 커진 것을 볼 수 있음. 2) padding 맞추기 header와 이미지의 padding을 맞춰보도록 하겠음. 물론 맞추지 않고 개별로 따로따로 padding이나 margin을 주어도 됨. screen-header에 원래 작성되어있던 padding의 값인 25px를 variables.css 파일의 root에 --hor..

5) 글자 위치 변경하기 user-component와 user-component__column:first-child에 flex하고 가로로 중앙에 위치하도록 해줌. 가로로 중앙에 위치하는 것을 볼 수 있음. 6) 사이에 공간주기 user-component__avatar의 오른쪽에 margin을 주어 이미지와 떨어지도록 함. 이미지와 글자 사이가 떨어진 것을 볼 수 있음. 7) 글자 크키와 두께 변경하기 글자 크기를 더 키우고 두껍게 함. 글자가 더 커지고 두꺼워짐. 8) subtitle 만들기 위의 사진을 보면 연하게 subtitle이 있는 것을 볼 수 있음. 그걸 만들어보도록 하자. title 밑에 subtitle을 만들어줌. margin을 주어 위의 title과 조금 떨어지게 하고 글자 사이즈를 키우고..

1) 기본 component 만들기 현재 만들고 있는 페이지에서는 프로필 사진을 만들어야 하지만, 밑의 사진처럼 한 페이지에서만 사용되는 것이 아님. 심지어 크기도 조금씩 다르기에 중간 사이즈를 기본으로 하여 만든 뒤에 조금씩 수정하여 사용하기로 함. 보면 column이 두개인 것을 볼 수 있음. 그렇기에 두개의 column을 만들어줌. 첫 번째 column 안에 를 하여 박스 안에 user-component__column 라는 이름을 가진 박스를 만듬. 그 안에 https://avatars.githubusercontent.com/u/98861355" class="user-component__avatar" /> 를 하여 원하는 이미지를 넣어주고 user-component__avatar 라는 이름을 주고 ..

이번에는 html 파일에 모두 작성하고 css 파일에서 한 번에 스타일을 주는 것이 아니라 html 파일에 작성하며 바로바로 css 파일에서 스타일을 주도록 하겠음. 1) friends.css 파일 만들기 friends display link의 스타일을 작성할 friends.css 파일을 만듬. 당연히 styles.css 파일에 import 해야함. 2) friends display link 만들기 를 하여 friends-display-link 라는 id를 가진 a 태그에 Friends' Names Display 라고 작성하고 글자 앞에 info 아이콘을 넣어줌. 아이콘과 글자가 적용됨. 3) friends-display-link 스타일 하기 friends-display-link는 id이니 #으로 불러와..

1) screen-header.css 파일 만들기 css 폴더의 components 폴더의 screen-header.css 파일을 만듬. 만든 파일은 styles.css 파일에 import 해주어야 함. 2) 글자와 아이콘 정렬하기 박스를 flex 하여 가로로 여유 공간을 flex 항목 사이의 공간을 일정하게 주고 세로로 중앙에 위치하도록 만들고 padding을 줌. 글자와 아이콘이 정렬된 것을 볼 수 있음. 3) 글자 크기와 두께 변경하기 글자의 크기를 크게 하고 두께도 두껍게 해줌. 글자의 크기와 두께가 변경됨. 4) 아이콘에 margin 주기 아이콘에 margin을 주어야 하므로 span에 magin을 줌. margin이 적용되어 간격이 넓어진 것을 볼 수 있음. header 스타일은 여기까지 끝!

1) header 만들기 span*3 을 적고 엔터키를 누르면 span 태그가 3개 작성되는 것을 볼 수 있음. 를 하여 screen-header 라는 class를 가진 header을 만듬. Friends 를 하여 screen-header__title 라는 class를 가진 Friends라는 title을 만듬. 를 하여 screen-header__icons 라는 class를 가진 박스를 만듬. 를 하여 원하는 아이콘을 찾아서 붙여넣기 함. Friends와 아이콘들이 적용된 것을 볼 수 있음. fa-lg를 하여 아이콘의 크기를 키워줌. 아이콘의 크기가 커짐. html 파일에서는 여기까지 하고 css파일에서 스타일을 주도록 하겠음.

1) html파일에 notification 만들기 Friends.html 파일에서 채팅 아이콘 부분에 span을 만들어줌. 스타일을 하기 위해 class도 작성해줌. 2) natification 스타일 하기 nav-bar.css 파일에 .nav__notification을 하여 불러와서 background-color: tomato; 을 하여 배경색을 변경하고 width: 30px; 와 height: 30px; 을 하여 너비와 높이를 주고 border-radius: 15px; 을 하여 둥글게 만들어줌. (원으로 만들기 위해서 너비와 높이를 동일하게 설정하고 border-radius를 너비와 높이의 절반으로 작성해줌.) 적용을 하였지만 너비와 높이가 적용되지 않음. 그 이유는? span은 block이 아니라 ..