기억보다 기록

기본적인 HTML과 CSS에 대해서 처음부터 친절하게 알려준 니꼴라스의 코코아톡 클론 코딩 과제를 들으며 지금 생각해보면 웃기지만 안좋은 생각도 솔직히 조금 들었다. 이런 기본적인걸 지금 듣는다는게 뭔가 내가 좀 한심하다는 생각도 들었다. 하지만 멍청한 생각이란게 들었고 들을수록 말그대로 정말 기본적이지만 필수적인 중요한걸 배웠다는 생각이 든다. CSS grid 같은 다른 다양한 방법도 많겠지만 어쨌든 웹페이지를 짤 때 기본적인 골격에 대해서 생각하게 되는 것, 전체적인 페이지에서 재사용할 수 있는 CSS가 있을지 생각하는것, 그리고 그 CSS로 실제로 재사용하는 것, 각 페이지에서 구역별로 나누어 CSS를 고민하는 것 등 이전에 프로젝트를 진행하며 정말 말그대로 주먹구구식으로 CSS를 작성하며 marg..

앞선 포스팅에서 말했듯, 이론 강의는 끝났기 때문에 클론 코딩을 진행하며 기록해두고 나중에 보면 좋을 만한 것들을 자질구레한것 까지, 메모장에 기록이 된 것이라면 모두 정리해 보았다. 1. reset.css 클론코딩을 시작하면서 가르쳐주신건데, 이름 그대로 웹사이트에 자동적으로 지정된 CSS를 reset한거다. 앞선 포스팅에서 와 같은 부분에 자동적으로 margin이 적용되어있다고 했는데 이와같은 부분을 모두 reset하는 CSS가 담겨있다. 구글에 검색하면 CSS파일이 있으며, 그냥 내 프로젝트 디렉토리에 넣어서 import해 쓰면 된다. 2. page ruler redux 클론 코딩을 진행하며 element의 width나 height, 혹은 각 element사이의 여백의 길이를 잴 때 계속 사용한 t..

마지막 이론강의가 되겠다. 강의 내용을 요약하는 포스팅은 여기서 마무리 될 것같다. 나머지는 클론 코딩을 진행하기 때문에 강의를 듣다가 필요한 부분이 있으면 모아서 포스팅 할 것 같다. Media Query 오직 CSS만을 이용해서 유저가 보고있는 웹사이트의 screen의 사이즈를 알 수있게 한다고 한다. 만일 누가 아이폰으로 혹은 아주 큰화면으로 본다면 혹은 가로모드로 본다면, 그때마다의 다른 사이즈를 오직 이 Media Query만으로 감지할 수 있다. 이것은 즉, 반응형 웹사이트를 만들 수 있다는 뜻이다. 사용 방법은 다음과 같이 쓸 수 있다. @media screen and (max-width:700px) { div { background-color : tomato; } } (max-width :..

8일차-2 고오급 CSS에대해 공부했다. 예전엔 고급 기능의 CSS를 js로만 할수 있었는데 이제는 CSS로도 할수 있다. transistion 이전 state에서 다른 state로의 변화를 애니메이션으로 만드는 방법이다. 예를들어 :hover를 생각해보면, 커서를 갖다대는 순간 즉시 스타일이 적용된다. 이 state의 변화를 스타일하는 것을 애니메이션화 하여, 좀더 부드럽고 멋있게 보이게 하는 것이다. 사용법은 어떤 것을 변화할지, 얼마 동안 변화할지를 작성하는 것이다. 예를 들어 a{ transition : background-color 10s ease-in; } a:hover{ background-color : red; } 위와 같이 작성하였다면, a 태그에 커서를 갖다대었을 때, 원래대로였다면 단..

8일차 - 1 이전까지 스타일을 할 대상을 가리키는 여러 종류의 selector를 공부했고 마지막으로 state 에 관한 것을 배웠다. state state를 직역한 '상태'란 뜻 그대로 state를 이용하여 태그의 상태를 감지하여 스타일을 할 수 있다. 바로 이전 차수에서 공부했던 pseudo selector (pseudo-class) 가 바로 이 HTML element의 state를 감지하여 스타일을 바꾸는 것이다. 예를 들자면 :hover라는 것이 있다. 이건 해당 element에 커서를 갖다대게 되면 해당 스타일이 적용된다. :focus라는 것도 있는데, input과 같은 form 태그에 사용할 수 있으며 input 태그의 경우로 예를 들면 input field를 클릭했을 때 해당 스타일이 적용된..

7일차 역시 코딩 챌린지를 진행했다. 8일차 1. position position 이라는 property 의 타입은 크게 4가지 정도이며, static을 제외하고 top, right, left, bottom 과 같은 property들을 이용하여 최종 위치를 결정한다. 각 타입은 top, right, left, bottom 의 기준이 되는 위치를 지정하는데 차이가 있었다. 1-1. position : static default 값으로 element가 처음 위치한 곳에 위치해있다. top, right, left, bottom 과 같은 property들의 값에 영향을 받지 않는다. 1-2. position : fixed fixed라는 이름에서 유추할 수 있듯이 위치가 고정되어있다. 이 때 이 위치는 처음에 레..

4일차에는 이전까지 배웠던 것을 바탕으로 코딩 챌린지를 실시했다. label과 id를 사용하고, required 라는 attribute가 포함되고 password 타입의 input 태그에 최소 입력 글자수가 10개가 되개 해야하는 것이었다. 강의에있는 그대로 사용해서 어렵지 않게 작성할 수 있었다. 5일차 CSS 는 Cascading Style Sheet 이라는 뜻이다. 여기서 cascading이란 차례차례 쌓이는 것이라는 느낌으로 해석하면 된다. 이처럼 브라우저는 CSS를 읽을때 위에있는 코드부터 차례차례로 읽는다. 만일 두 CSS 가 하나의 태그를 가리키면? 두 코드중 어떤게 실제로 영향력이 클까? Cascading, 즉 위에서부터 아래로 차례로 적용되기때문에 결국 맨 마지막에 있는 코드가 적용된다...

React js와 Vue js 등의 자바스크립트 프레임워크를 공부하고 사용하며 프로젝트를 하고 있지만, 그 기본이 되는 바닐라 자바스크립트나 html, css 에 대한 이해가 솔직히 거의 없다고 생각해서 노마드 코더 강의를 선택해서 그에 관해 수강하기로 했다. 그래서 첫번째로 코코아톡 클론코딩이라는 강의를 수강하기로 했고, 2주마다 매일 아침 6시마다 숙제가오고 그 숙제를 모두 완료하면 30퍼센트 할인쿠폰을 주는 챌린지라는 프로그램이 있다고 해서 그것도 같이 신청했다. 사실 웹, html, css 전반적으로 완전히 입문자 혹은 초보자는 아니기때문에 초반에 그냥 지나쳐도 될부분이 있다고 생각했는데 그런 생각은 버리고 다 체득하기 위해서 강의를 구매한 거기 때문에 강의를 들으면서 내가 필요하다고 생각하는 부..