코코아톡

Sign Up Screen part One .DS_Store: 맥os나 윈도우에서 만든 보이지 않는 임시파일 .gitignore: 무시하고 싶은 파일 이름을 기록하는 파일 index.html: 대부분의 웹서버가 가장 먼저 읽는 파일 > class name을 작성할

모든 input요소에 focus되면 outline이 생기는 것을 없애기 위해, reset.css에 input:focus {outline: none;}을 적용함.\`variables.css 파일을 만들고 공통으로 쓸 색의 변수를 설정해주면 styles.css파일에서 사용

navigation bar는 <nav></nav>안에서 작업한다. navigation은 보통 내부에는 ul로 나눠지고 그 안에 많은 li로 구성된다. li안에는 주로 <a>가 있다.nav-bar.css 파일을 만들어 styles.css에 import 해

이제 status-bar 밑에 Screen-header를 만들것이다.화면 헤더는 Friends 페이지 뿐만 아니라, 여러 페이지에서 쓰여서 components폴더에 screen-header.css파일을 만들어 주고 styles.css에 import 해줌. (컴포넌트화)

이제 사용자 및 친구의 프로필을 만들어볼것이다.먼저 사용자 프로필먼저 만들어 보자.하지만 이렇게만 css를 작성해버리면 user-component의 바로 밑의 내부요소인 user-component\_\_column div 에 대해 정렬해준다.user-component\

먼저, chats screen은 기존 friends화면을 가져다가 필요한 부분만 수정하면 된다.참고로 span은 inline요소라서 margin이 먹히지 않음. margin 속성을 넣고 싶으면?\-> display: block; 또는 display:flex으로 블록요소

참고로 이 코드처럼 css를 적용할때 .open-post\_\_members .divider { } 를하게되면 open-post\_\_members 안에 있는 divider에만 적용된다..divider{ } 만 적어도 되지만 다른 코드상에 동일한 클래스명의 divid

More screen은 기존 friends 화면이나 chats화면이나 Find화면을 가져다가 필요한 부분만 수정하면 된다.👇 아이콘의 크기나 색상을 변경하려면 이렇게 하면된다. 아이콘도 텍스트라고 생각하면된다.

Setting screen도 기존 friends 화면이나 chats화면이나 Find화면을 가져다가 필요한 부분만 수정하면 된다.settings는 리스트 형식으로 되어있다. 아이콘이 있고 이름이 있다. 즉 목록 형식(list)이다. 그래서<main></main

😂처음에 헤더 부분에 '박보영' 텍스트가 화면 중앙에 있지않다. 이를 조정해볼것이다.1\. 먼저 각 컬럼(<,박보영,돋보기)의 너비를 전체화면대비 33%로 설정한다.제일 오른쪽에 있는 컬럼(돋보기)에 display:flex를 적용하고 justify-content

페이지를 새로고침할때마다 로딩되는것처럼 splash화면이 보이게 만들것이다.먼저, splash화면이 friends 화면 전체를 덮어야한다.코드는 항상 위에서 아래로 읽는다. 그렇기 때문에 아래에 있는 코드가 1순위로 적용된다. absolute를 이용하여 모든 화면을 덮