하노정의 개발 공부

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. p, span 태그에 동일하게 display 속성에 block값을 주었을 때 결과에 차이가 있다. p는 위 아래로 margin이 있는데, span은 없다. 그 이유는 브라우저의 기본 스타일링 때문이다. 각 브라우저마다 태그에 대한 기본 스타일링(css 속성과 값)이 있다. 이것이 user agent stylesheet다. 개발자 도구에서 브라우저 태그에 대한 기본 스타일링을 확인할 수 있다. 위에 설정한 값을 보면 p 태그에는 user agent stylesheet가 있는데, span 태그에는 없는 것을 볼 수 있다..

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. px 가장 흔히 쓴 단위다. 절대 단위라서 창의 크기를 변경해도 변하지 않는다. 하지만 요즘 반응형 웹페이지를 만드는 것이 중요하기 때문에 상대 단위를 잘 알고 사용해야 한다. 반응형 웹페이지란? 디바이스 별로 화면의 크기에 맞게 페이지의 레이아웃이나 크기가 변경되는 것을 의미한다. 웹브라우저의 창 크기를 늘이거나 줄이면, 페이지를 구성하는 요소들도 그에 맞게 늘어나고 줄어드는 웹페이지를 의미한다. em 부모 태그 기준 반응형일 때 부모 태그와 자식 태그 간의 크기 비율을 유지하면서 변화시키기 위한 것이다. rem ..

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 모든 html 요소는 box 모양으로 구성되어 있고, 이를 box model이라고 한다. box model은 html 요소를 margin, border, padding, content으로 구분한다. 앞선 포스팅에서 설정한 width, height값은 content 영역의 크기만을 설정한 것이었다. 어떤 영역의 크기를 설정한 것인지는 개발자 도구(단축키 F12)를 통해 확인할 수 있다. box model이 어떻게 동작하는지 알아야 html 요소들을 잘 표현할 수 있다. padding, border, margin은 상하..

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. html 태그들은 2가지 종류로 나눌 수 있다. 1. block element: 내용 크기에 상관없이 한 줄을 차지한다. p, div, ul, li, h1-h6 2. inline element: 내용 크기만큼 영역을 차지한다. span, a, img, button 태그가 block인지 inline인지 중요한 이유는 css로 크기를 조절할 때 차이가 있기 때문이다. css 기본 속성들 중 width, height 속성은 block element에만 적용되고 inline element에는 적용하지 못한다. 아무 변화가 ..

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 학교 수업에서 웹에 대해 많이 학습했지만, 직접 웹 개발자로서 프로젝트에 참여하는 것은 처음입니다. 첫 프로젝트에 웹파트장으로 참여하게 되면서 배우고 느낀 점을 기록하려 합니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 프로젝트에 웹파트로 참여하면서 느낀 점은 css코드 작성에 굉장히 많은 시간을 쓰고 골을 썩인다는 점이다. 또, css를 잘 못 다룬다는 점이다. 여러 페이지의 css를 좋은 코드로 적으려는 노력도 안 해봐서 그런 거라 생각한다. 개념만 알고 좋은 코드를 위해 머리를 쓰며 노력한 적이 없다. 그치만 분명히 css에도 체계가 있으며 좋은 코드..

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 학교 수업에서 웹에 대해 많이 학습했지만, 직접 웹 개발자로서 프로젝트에 참여하는 것은 처음입니다. 첫 프로젝트에 웹파트장으로 참여하게 되면서 배우고 느낀 점을 기록하려 합니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. html은 Hyper Text Markup Language의 약자이다. hypertext는 링크이고, mark를 태그라고 생각했을 때, markup은 plaintext 위에 태그로 의미를 부여한다는 것이다. 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저가 알 수 있게 하는 마크업 언어다. html은 태그..