천진난만 코딩 스토리

5) main 파트 스타일하기 스타일을 하기 위해 settings.css 파일을 만듬. 물론 이 파일도 import 해야함. 아이콘과 제목이 들어있는 태그인 settings__setting에 위아래로 padding을 주고 밑에 경계선을 연하게 만들어주고 사이즈를 키우고 아이콘과 제목의 높낮이를 중앙으로 정렬함. 아이콘과 제목이 정렬된 것을 볼 수 있음. 아이콘의 오른쪽에 여백을 주어 제목과 약간의 거리를 두고 아이콘의 크기를 키움. 아이콘과 제목 사이에 공간이 생겼고 아이콘의 크기가 커짐. 6) 추가 column 만들기 제목의 끝에 메세지를 띄우는 작업을 하기 위해 각 리스트 안에 (흰색 박스) 아이콘과 제목을 div 박스 안에 넣어주고 (주황색 박스) 그 밑에 또 다른 div 박스를 추가함. (연두색 ..

1) settings. html 파일 기본 설정 more.html 코드를 그대로 복사하여 settings.html 파일에 붙여줌. more.html 파일에서 설정 아이콘에 링크를 추가하여 settings.html 파일로 이동할 수 있게 만듬. header 부분이 다르니 다시 만들기 위해 삭제함. main 부분의 내용도 다르니 삭제해줌. 2) header 만들기 기존에도 사용하였던 방식임. alt-header 라는 class를 가진 header 안에 alt-header__column 라는 class를 가진 div 박스를 3개 만듬. 작성 후 enter 키를 누르면 생성이 됨. 첫 박스에는 아이콘을, 두번째 박스에는 제목을, 마지막 박스에는 아이콘을 넣어줌. 아이콘과 제목이 작성된 것을 볼 수 있음. 이때 ..

6) Suggestions 만들기 아이콘 파트 밑에 suggestions 박스와 그 안에 title을 작성해줌. 위쪽에 공간을 주어 아이콘 파트와 멀어지게 한 후 경계선을 만들어줌. 경계선 안쪽에 공간을 주어 추후에 만들 파트와 멀어지게 함. suggestions 와 경계선이 생김. 7) Suggestions 아이콘 파트 만들기 more-suggestions 박스 안에 icons 그 안에 icon을 만들어줌. image 안에 아이콘이나 이미지를 넣어줌. 그 밑에 text span에 제목을 적어줌. 아이콘과 글자가 추가된 것을 볼 수 있음. 8) 아이콘 정렬하기 아이콘을 가로로 정렬하고 위쪽에 공간을 줌. 아이콘이 가로로 위치하고 위쪽에 공간이 생겼음. 아이콘을 중앙에 정렬하고 오른쪽에 공간을 주어 아이콘..

1) more.html 파일 만들기 find.html 파일의 코드를 그대로 복사하여 more.html 파일에 복사해줌. title을 모두 변경해주고 main 태그에 있는 코드를 지워줌. title이 변경되고 main 파트가 비워짐. 음악 아이콘을 넣어줌. (friends 혹은 chats 화면에서 사용했으니 복사해와도 됨.) 아이콘이 추가됨. 기본적인 설정은 했으니 이제 main 파트를 만들어야 함. 2) 프로필 추가하기 friends.html 파일에서 프로필 부분인 해당 부분을 복사하여 붙여넣음. title을 수정하고 sudtitle의 주석을 풀고 작성해줌. subtitle와 두 번째 column에 아이콘을 추가하여줌. sudtitle에 있는 아이콘의 색상을 변경함. 프로필이 작성된 것을 볼 수 있음. ..

5) 부모 찾아서 relative 해주기 open-post__heart-count 의 부모는 open-post__photo 이므로 open-post__photo 의 position을 relative로 변경해줌. heart-count 박스가 제대로 위치한 모습 6) 세부 작업 하트 아이콘과 숫자 사이에 공간을 주기 위해 숫자의 왼쪽에 margin을 조금 줌. 하트아이콘과 숫자 사이에 조금의 공간이 생김. 7) open post 두 개 만들기 open-post 코드를 복사하여 바로 밑에 붙여넣기 함. 숫자나 내용은 변경하여도 됨. 두 개의 open-post 의 사이에 공간을 주기 위해 밑부분에 margin을 줌. 이렇게 두개의 open-post가 적용된 모습을 볼 수 있음.

1) 두번째 column 만들기 파란색 박스의 내용은 만들었으니 이번엔 빨간색 박스안의 내용을 만들어야함. 기존에 작성했던 두개의 column 중 두번째 column에 작성할 것임. div 박스 안에 이미지와 하트 아이콘, 숫자 span 박스를 만들어줌. 이미지와 하트아이콘, 숫자가 적용되었지만 이미지의 크기가 커서 보이지 않음. 2) 이미지 스타일하기 이미지의 크기를 줄이고 모서리를 약간 둥글게 만들어줌. 이미지가 작아지고 모서리가 둥글어짐. 3) 정렬하기 flex는 이미 되어 있었으니 간격과 높낮이를 정렬해줌. 두 column의 사이가 일정하게 넓어지고 높낮이가 중앙으로 정렬된 것을 볼 수 있음. 4) heart-count 스타일하기 flex 해주고 높낮이를 중앙으로 정렬함. 배경색을 주고 글자색과 ..

4) title과 hashtags 스타일하기 title의 글자를 두껍게 하고 아래쪽에 margin을 주어 hashtags와 떨어지도록 함. hashtags에 text-transform: uppercase; 를 하여 소문자를 대문자로 바꾸어 주고 글자의 색을 바꿔줌. title 과 hashtags의 스타일이 바뀐 것을 볼 수 있음. 5) members 스타일하기 이미지의 크기를 줄여주고 모양을 원으로 바꾸어주고 오른쪽에 margin을 주어 count와 거리를 둠. 이미지가 작아지고 오른쪽에 공간이 생긴 것을 볼 수 있음. members에 flex하고 글자의 세로를 중앙으로 맞추어주고 위쪽에 margin을 주어 hashtags와 거리를 둠. members의 요소들의 높낮이가 맞고 위쪽에 공간이 생김. cou..

1) open chat header 만들기 (html) recommended friends 코드 밑에 open chat header 코드를 작성해줌. 작성한대로 화면에 나타남. 2) open chat header 스타일 하기 (css) open-chat__header에 flex 하여 간격을 일정하게 한 다음 글자 색을 변경하고 밑부분에 margin을 줌. 스타일이 적용된 것을 볼 수 있음. 3) open chat 파트 만들기 (html) 위의 화면을 만들건데 박스로 표시한 것처럼 파란박스, 빨간박스 총 2개의 박스가 있음. 두개의 박스 틀은 만들어 두고 파란박스의 내용 먼저 만들도록 하겠음. open-post 박스 내에 open-post__column을 두개 작성하여 파란박스와 빨간박스로 나눔. 첫 co..

1) recommended friends 파트 만들기 main 태그의 find-icons 코드 밑에 div 박스로 recommended friends를 만듬. variables.css 파일에 자주 쓰는 border 스타일을 변수로 작성함. recommended-friendsdp margin과 padding을 주고 위 아래로 border을 줌. (이 때 만든 변수 사용) 글자와 위아래에 경계선이 만들어짐. 2) recommended friends__title 스타일하기 자주 쓰이는 색을 원하는 변수명으로 하여 변수를 만듬. title의 글자크기를 변경하고 글자색도 변수를 사용하여 바꿔줌. 글자의 크기와 색이 변경됨. 3) 세부 내용 만들기 제목 밑에 세부내용을 span 태그에 적어줌. span 태그는 in..

1) find.html 만들기 chats.html 파일에서 전체 코드를 복사하여 find.html 파일에 붙여넣기 해줌. title을 변경해주고 chats 아이콘을 빈 아이콘으로 변경해줌. 돋보기 아이콘은 진한 아이콘이 없으므로 추후에 스타일 해주겠음. 2) header 변경하기 title 변경해주고 필요없는 아이콘을 삭제함. title이 변경되고 필요없는 아이콘이 사라짐. 톱니바퀴 아이콘이 있는 span 태그의 아이콘 위에 point div 박스를 만들어줌. 전에 navigation bar에서 noti 만들었던 것처럼 스타일함. 위치는 봐가면서 조정함. 아이콘 위에 빨간 점인 배지가 생김. 3) main 파트 만들기 (html) 먼저 복사해왔던 main 태그 안에 있던 내용들을 다 지워줌. 새로 만들것..