프로젝트/클론 코딩_카카오톡3 [HTML&CSS] 웹 프로젝트 12일차! (friends.html & .css ) 지난 시간에 이어 이번엔 friends.html을 만들어 보았다. 그리고 세분화한 css파일을 적용해 아래와 같은 화면처럼 보이게 했다. 이번에도 역시 HTML을 작성하기 전 어떻게 박스를 입힐지에 대한 구상부터 했다. friends.html ) 확실히 지난 index.html보다는 더 복잡해 졌다... ㅎㅎ 쨋든!! 이번에도 font awesome의 icon을 이용해서 아이콘들을 넣어주었고, text는 span태그를 사용했다. 천천히 큰 div부터 차례차례 잡아가다보면 어느새 완성!! friends.html 코드) status-bar의 class를 저번 index와 똑같이 해서 css가 적용된 상태이고, 추가적으로 user-component부분이랑 nav-bar 부분 그리고 no-mobile 부분 세 .. 2021. 7. 21. [CSS] 웹 프로젝트 11일차! (index 부분 css 작업) 지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다. 이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!! 우선 모든 화면에 적용해야 하는 status-bar부터 시작! 아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한 reset.css파일을 먼저 추가해 주어야 한다!! rest.css) status-bar) 우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다. 이럴 땐 무엇을 쓴다? --> 바로 flex!!! icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다. 그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 바로... width:33.. 2021. 7. 20. [HTML] 웹 프로젝트 10일차! (클론 코딩 index.html) 카카오톡 클론 만들기 1일차! 로그인 화면 - index.html) +) 왜 이름을 index.html로 했는가? 왜냐하면! 대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있기 때문이다. 영어로 index는 첫 번째를 뜻한다. html 코딩에 들어가기 앞써 어떤식으로 코딩을 해야하는지 구상부터 했다. 이런식으로 box부터 구상하고 차례차례 큰 것부터 잡은 후에 세부적인 box를 코딩해주었다. 큰 box들에는 div를 사용했고, 세부적인 요소들은 text에는 span을 이미지에는 i를 사용했다. 여기서 i는 font awesome에서 추가한 아이콘을 뜻한다. font awesome을 사용하면 아이콘 코드를 바로 복사-붙여넣기 후 사용할 수 있기 떄문에 무척 편하다. 그 대신 이 코드.. 2021. 7. 18. 이전 1 다음
