요즘 생각보다 css를 잘 사용하는 것이 어렵다고 느끼는 찰나에 css개념을 머리속에 잘 저장해두어야 겠다는 생각을 하게 되었다. 이전에 플렉스 스타일은 수업에서 배워서 그래도 잘 사용하는데, 그리드 스타일은 사용하고 싶다가도 뭔가 헷갈려서 잘 사용하지 않는 경향이 생기는 것 같다. 이번 기회에 확실히 정리해 두어야 겠다. 그리드? grid는 한국말로 눈금을 뜻하고, 가로 세로로 구성된 격자무늬 판을 만들어 스타일링을 한다고 생각하면 편하다. 부모 요소에 할 수 있는 설정 그리드의 부모요소는 주로 div태그를 이용해 감싸준다. 설정해야할 값들은 display, grid-templete-columns, grid-templete-rows, grid-gap등 아주 여러가지가 있다. display

아고라 스테이츠란? 아고라 스테이츠는 코드스테이츠에서 수강생들이 질문을 하면 수강생들이 답변을 해주고, 답변이 안된 답은 강사가 답을 해주는 디스코드의 공간이다. 한번도 질문을 해본 적은 없지만, 다른 사람들이 질문 하는 것들을 보며 나라면 어떻게 해결 할까를 생각해보는 시간을 많이 가졌던 것 같다. 나만의 아고라 스테이츠 만들기 이번 과제는 이런 아고라 스테이츠를 직접 웹페이지로 구현 하는 것이다. 물론 완벽하게 똑같은 기능을 하도록 구현을 할 수는 없으나, 주어진 스텝에 맞추어 최대한 구현을 하려고 노력해보았다. CSS html은 이미 코트스테이츠 측에서 어느정도 기본 구조를 잡아 주었기 때문에 css와 자바스크립트를 작성하면 되었다. css는 전체적인 구조와 내가 입력하는 부분,

오늘은 지난주에 한 내용들을 복습하는 시간이 주어졌다. 지난주 금요일에 페어와 함께 계산기를 만들었는데, 내가 모르는 부분은 페어가 알려주고, 페어가 모르는 부분은 내가 알려주며 만들어서 끝낼 수 있었는데, 혼자 해도 비슷한 시간 안에 비슷한 퀄리티로 만들 수 있는지가 궁금해져서 기본 계산기보다 버튼이 많은 공학용 계산기를 만들어 보았다. 공학용 계산기중 가장 무난하게 생긴 구글의 공학용 계산기를 가지고와 비슷하게 만들어보는 시도를 하였다. >*구글 계산기 >*내가 만든 계산기 >공학용 계산기 html { margin: 0;

오늘은 css에서 지난번에 이어 기초를 마무리하는 것으로 시작하였다. css에서 페이지를 분할하여 웹페이지를 만드는 것이었는데, 여기서 css가 하는 역할이 매우 크다. 사실 아직도 정확히 display:flex 를 이용해 페이지를 만드는 방법이 정확하게 어떻게 동작하는지 이해 하지는 못했다. 다음주 복습시간에 고민해봐야겠다. 어쨋든 공부한 것을 토대로 영역을 구분하는 코드를 짜서 만들었는데, 과제로 주어진 것과 완벽하게 똑같이 되지는 않았지만 이정도면 만족스럽다. 그다음 페어프로그래밍이라는 것을 진행하였는데, 같은 수강생중 한명과 협업을 하여 계산기 목업을 만드는 것이었다. 완전 처음보는 남이랑 같이 과제를 하는거라 시작전에 긴장을 많이 했는데, 생각보다 같이 하는 분이랑 잘 맞아서 쉽게 끝낼 수 있었던

css는 html에 비해 양이 조금 더 많고 외울 것도 많았던 것 같다. 물론 아직까지는 할 만한 난이도라 금방 끝낼 수 있었다. 완벽한 암기는 조금 힘들겠지만 기본적인 구조는 알게 된 하루였다. 미세먼지가 너무 심해 운동을 안 갈까 했지만 꾸준히 운동하기로 스스로 약속 했기 때문에 가서 기분이 좋은 하루가 되었다. 어제 했던 과제에서 css를 링크하고 html 자체도 css를 위한 작업을 조금 추가하였다. class를 이용해 선과 단어 강조를 하였다. 폰트를 인터넷에서 임베드 하는 것을 해보았고, 이미지는 원으로 바꾸고, 주요 단어는 굵기를 바꾸었다. 배경은 베이지색 비슷한 색으로 바꾸어 밋밋한 힌색을 대체하였다. 오늘 배운것 요약 폰트 크기를 지정할 때는 절대크기(px,pt)와 상대크기(%, em, rem, ch, vw, vh)가 있다. font-size 를 이용해 변경할 수 있다. color, background-color, border