Web Programming/Front-End11 [Front-End] 11) 디버깅-HTML-CSS 들어가기 전에 프로그래밍의 디버깅이 꽤 중요하다고 하는데요, HTML/CSS를 개발하면서 생기는 문제를 어떻게 빨리 처리해야 할까요? 더 빠르고 정확한 문제를 해결하기 위한 HTML/CSS 디버깅 방법을 공부해봅시다. 학습 목표 HTML/CSS의 디버깅 방법을 이해합니다. 핵심 개념 debugging chrome developer tools 학습하기 크롬 개발자도구의 Element panel을 잘 익혀두는 것이 중요합니다. 개발자도구를 통해서 쉽게 할 수 있는 일들을 정리하면 다음과 같습니다. CSS Style을 inline 방식으로 빠르게 테스트할 수 있습니다. 현재 엘리먼트의 값을 임시로 바꿀 수 있습니다. 최종 결정된 CSS 값을 확인할 수 있습니다. * reference : [참고링크] 페이지와 .. 2019. 12. 27. [Front-End] 10) float 기반 샘플 화면 레이아웃 구성 들어가기 전에 웹페이지의 레이아웃을 float 속성을 중심으로 어떻게 만드는지 실제 코드구현 과정을 이해합니다. 학습 목표 float로 웹사이트의 레이아웃을 구성할 수 있습니다. 핵심 개념 float layout 학습하기 기본배치를 한 이후에 필요한 부분을 float를 사용해서 좌/우로 배치하는 것이 일반적입니다. 비율조정은 %를 사용해서 배치할 수도 있습니다. 실습코드 html css 생각해보기 레이아웃을 배치하는데 flex라는 속성도 있습니다. flex 속성은 많은 기능을 제공하지만, 간단히 좌/우로 배치하는 방식이 어떻게 구현하는지 찾아봅니다. float와의 차이점을 느껴보세요. * Flex 관련 reference : https://heropy.blog/2018/11/24/css-flexible-b.. 2019. 12. 24. [Front-End] 9) Element가 배치되는 방법(CSS layout) 들어가기 전에 CSS의 배치를 위해서는 중요한 여러 가지 개념을 알고 있어야 합니다. 그중에서 block과 inline의 차이 그리고 position 속성을 이해해야 합니다. 또한, 많이 사용되고 있는 float의 성질도 알아둘 필요가 있습니다. 학습 목표 layout의 방식에 대해서 이해합니다. 핵심 개념 박스 모델 (Box model) margin border padding position 학습하기 엘리먼트가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 합니다. 편의상 우리는 배치라고 할 겁니다. 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본입니다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할.. 2019. 12. 23. [Front-End] 8) CSS 기본 Style 변경하기 들어가기 전에 글자색, 배경색, 글꼴은 어떻게 바꾸는 것일까요? 이번 시간에는 텍스트 속성 및 옵션값을 변경하는 방법에 대해서 배워보도록 하겠습니다. 학습 목표 CSS 없이 먼저 HTML구조를 설계할 수 있다. 핵심 개념 font-size background-color font-family 학습하기 CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다. font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 .. 2019. 12. 20. 이전 1 2 3 다음
