본문 바로가기

코딩4

도서 생활코딩 HTML+CSS+자바스크립트 - <미디어 쿼리> 반응형 웹이 있다. 화면은 항상 크기가 변한다. 같은 내용을 모니터로 볼 수도 있고 스마트폰으로 볼 수도 있다. 이 때 웹 페이지를 구성하는 요소들이 화면 크기에 맞춰 알아서 최적화되는 것을 반응형 웹이라고 한다고 한다(나도 공부하는 중이라 잘 모른다). 이런 반응형 웹을 위해서는 미디어쿼리라는 기술?방법? 아무튼 미디어쿼리가 필요하다. 오늘도 늘 그렇듯 '생활코딩! HTML+CSS+자바스크립트' 책의 에제를 따라가보자. 위의 코딩을 치니 화면에는 다음과 같이 표시된다. 원래 책에서는 한 줄 전체를 쓰도록 하였는데 display: inline;을 추가하여 자신의 부피만큼만 사용하도록 조절하였다. 특별할 것은 없다. Responsive에 아무 의미 없는 div 태그를 사용했고 거기에 내가 원하는 효과를 준.. 2020. 12. 15.

도서 생활코딩 HTML+CSS+자바스크립트 - <div 태그> HTML을 공부하며 가장 이해가 안 되던 것이 있다. 사실 지금도 이해는 잘 안간다. 바로 div 태그. 친구들이 네이버같은 사이트에 들어가서 메인 페이지가 어떻게 짜졌는지 보는 것도 공부라고 해서 봤는데 가장 많이 보인 태그 중 하나가 div 태그였다. 문제는 이 div 태그가 대체 뭔지 모르겠다는 것이다. 기본적으로 우리가 쓰는 태그는 다 그 의미와 역할이 정해져있다. 예를 들어 h1태그라면 제목을 나타내는 tag이면서 모든 h태그중 가장 글자 사이즈가 크다던가, 이런 식이다. div는 (지금까지 이해한 것으로 볼 때) 이런게 정해져있지 않은 태그다. 만능태그랄까. 예를 들어 책을 산다고 해보자. 보통의 책은 다 제목과 내용이 이미 써져있다. 따라서 우리는 그 책을 사서 정해진 내용을 읽기만 하면 된.. 2020. 12. 13.

도서 생활코딩 HTML+CSS+자바스크립트 - <border, padding, margin> CSS를 하며 항상 헷갈렸던 것 중 하나가 border, padding, margin 3가지다. 사실 차분히 읽고 따라해보면 아무것도 아닌데 대충하고 넘어가는 습관이 문제가 되었던 것 같다. 아마 앞으로도 헷갈리겠지만 그래도 정리를 해보픈 마음에 여기에 적어 본다. 티스토리지만 네이버에서 사전을 찾아 보니 border는 경계, padding은.. 충전재..그 고딩들의 패딩?? 직딩들의 패딩조끼의 패딩?? 이 나왔고 margin은 여백이 나왔다. 호 뭔가 뜻을 찾아보니 모든 것이 이해되는 느낌적인 느낌이지만, 한 번 확인해보자. 우선 border다. border의 경우 태그를 적용 시 해당 태그가 차지하는 범위의 테두리라고 보면 된다. 책에서는 border의 예시로 h1을 들고 있다. 위와 같이 입력 시 .. 2020. 12. 3.

도서 생활코딩 HTML+CSS+자바스크립트 - <style 태그, style 속성> 예전부터 코딩을 배워보고 싶었다. 기회는 많았다. 그런데 너무 어려웠다. 천상 문과라 그런지 몰라도 나는 그 쉽다는 파이썬도, 개발자들이 코딩이나 언어라고 부르면 화를 낸다는 html도 잘 이해가 가지 않았다. 절박함이 부족하였는지도 모르겠다. 그걸 몰라도 먹고 사는데는 지장이 없었으니까. 공부를 하다 조금 어려워지면 그만두고(개발자 친구들은 조금 어려운 부분이 있을리가 없다고 하였다) 몇 개월 지나서 다시 처음부터를 반복하다보니 그 무엇도 늘지 않았다. 친구들은 제발 뭔가를 만들어보라고 하였다. 그래야 성장한다고 하였다. 그래서 마지막으로 생활코딩에서 나온 html+CSS+자바스크립트 책을 공부하고 뭔가를 만들어볼 생각이다. 사실 html까지는 내용이 크게 어렵지 않다. 애초에 책 자체가 굉장히 기초적.. 2020. 12. 2.

이전 1 다음

티스토리툴바