Enjoy Programming

오늘 만들어할 레이아웃이다.~~만들어보자~ 조건읜 외부 스타일 시트 사용과 pseudo selector를 사용하고 position속성을 사용해야 한다. 아 꽤나 빡셌다.. 이게 맞는지는 모르겠지만 ..뷰포트.. 아 머리야... 우선 html부터 보자 뭐 제목~ 두번째 토마토 틸색상 박스 세번째 발리우드 쓰리틀 색상 박스 이렇게 세개로 할 수 있겠지만 큰박스 하나에 다른 박스들은 포지션 absolute로 각 꼭지점에 박아 보기로 생가각했다. 먼저 h1태그로 제목 설정해주고 메인박스 하나 만들고 그안에 세컨드박스 4개를 만든다. 그리고 그 안에 다시 박스를 하나 더 만들고 그 박스안에 h3 와 h5의 부제목들을 달아주자. 이제 css 로 넘어와서 먼저 서체를 times로 잡아주고~ h1과 mainbox가 중..

진행중 한가지 문제가 생겼다, chat.html만이 아닌 다른 페이지도 statusbar를 고정하기위해 컴포넌트의 statusbar에 포지션을 픽스해줬는데 왠걸 고정하고 헤더에 패딩줬더니 같이 움직인다... 아 골머리 아프다..... 어딘가에 패딩이나 마진을 줘서 고정부위랑 멀어지게 하려고 했는데 도통 통하질 않는다.! 그러나 찾았따..... 기본적인 status-bar에 fixed를 하고 보더박스에 담아준뒤 z-index를 설정해주면 되는거였다. 일단 statusbar는 모두 항상 맨위에서 고정이니 z-index를 높은 값을 주고 헤더에 패딩을 줬더니 잘먹는다!!! ㅋㅋㅋㅋ alt헤더부분은 따로 적용이므로 그쪽에 다시 패딩을 주면 끝 근데 채팅창 헤더도 alt헤더이다 보니~ 너무 내려간다.. 알트헤더부..

자 헷갈리지 말자 chats.html 이 있고 chat.html이 있다. chats는 채팅방들이 있는 페이지이고 이번에 만들 페이지는 채팅방에 입장 후 채팅방 페이지이다. 아 여기서 머리좀 아팠다... position: fixed떄문에... 우선 역시 setting.html을 복사 붙여 넣기 해주자. 그리고 필요없는 네브바 지우고 메인 안도 다 삭제 해주자. 일단 헤더부분에 아이콘 하나만 추가하자 마지막 칼럼에 추가해주고 간격 조정 해주자. 그 후 채팅창은 계속 글이 업데이트 되니 뷰포트를 크게 설정 해준다 그러기 위해 body에 id값을 줬다. 다른 곳이랑 혼용되면 안되니까~ 이제 머리가 아팠던... position : fixed차례이다... 앞서 먼저 만들었던 status-bar.css에 다른 페이지..

자 이제 마지막 부분인 open-chat 박스를 만들어 준다 그 안에 크게 open-chat__header와 open-post박스를 생성 해줌. open-chat header안에는 타이틀과 오르쪽 텍스트를 넣어줄 태그 두개를 만들어 주고 chevron아이콘도 삽입 해주자~ 역시 flex해주고 space-between으로 간격을 조절 해준다. 나머지 폰트 크기나 투명도 마진등등을 조절 해줌 이어서 open-post부분을 작성 해주자. open-post부분은 크게 두개의 칼럼으로 구성 되어 있다. 칼럼 두개를 만들어주고 첫번째 칼럼에 h5, h6태그 두개에 타이틀과 해쉬태그 부분을 작성 해준다 그리고 멤버스 태그 한개를 만들고 그 안에 이미지 한개와 텍스트 들어갈 태그 두개와 그 사이 divider를 만들어..

이틀 쉬었으니 열심히 다시 달려보자~~~ 오늘은 노마드코더 강의로 내비게이션 바를 만들고 강의를 주욱 들어보겠다 보통 네브바는 ul로 구성되고 그 안에 많은 리스트들로 구성된다고 한다~ 반드시는 아니지만 보통 그렇다 하니 그렇게 연습해보자 developer.mozilla.org/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines HTML 구획과 개요 사용하기 - 웹 개발자 안내서 | MDN HTML 구획과 개요 사용하기 중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에 developer.mozilla.org friends.html로 index...