분류 전체보기171 디버깅-HTML-CSS 들어가기 전에프로그래밍에서는 디버깅이 꽤 중요하다. HTML/CSS를 개발하면서 생기는 문제를 어떻게 빨리 처리해야될까? 더 빠르고 정확한 문제를 해결하기 위한 HTML/CSS 디버깅 방법을 공부해보자. 학습 목표1. HTML/CSS의 디버깅 방법을 이해한다. 핵심 개념- debugging- chrome developer tools 크롬 개발자 도구를 통해 쉽게 할 수 있는 일- CSS Style을 inline 방식으로 빠르게 테스트 할 수 있다.- 현재 엘리먼트의 값을 임시로 바꿀 수 있다.- 최종 결정된 CSS 값을 확인할 수 있다.- https://www.edwith.org/boostcourse-web/lecture/16679/ 2019. 1. 16. float 기반 샘플 화면 레이아웃 구성 들어가기 전에웹 페이지의 레이아웃을 float 속성을 중심으로 어떻게 만드는지 실제 코드구현 과정을 이해한다. 학습 목표1. float로 웹 사이트의 레이아웃을 구성할 수 있다. 핵심 개념- float- layout 실습https://codepen.io/hzoou/pen/XoQmQX?editors=1100 2019. 1. 16. Element가 배치되는 방법(CSS layout) 들어가기 전에CSS의 배치를 위해서는 중요한 여러가지 개념을 알고있어야 한다. 그 중에서 block과 inline의 차이 그리고 position의 속성을 이해해야 한다. 또한, 많이 사용되고 있는 float의 성질도 알아둘 필요가 있다. 학습 목표1. layout의 방식에 대해 이해하자. 핵심 개념- 박스 모델 (Box model)- margin- border- padding- position 엘리먼트가 배치되는 방식엘리먼트를 화면에 배치하는 것을 layout 작업, 또는 Rendering 과정이라고 한다. 편의상 배치라고 하자. 위에서 아래로 배치되는 것이 기본이다. 하지만 웹사이트의 배치는 다양하게 표현이 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용한다. - displ.. 2019. 1. 16. CSS 기본 Style 변경하기 들어가기 전에글자색, 배경색, 글꼴은 어떻게 바꾸는 것일까? 텍스트 속성 및 옵션값을 변경하는 방법에 대해 배워보도록 하자. 학습 목표1. CSS 없이 먼저 HTML 구조를 설계할 수 있다. 핵심 개념- font-size- background-color- font-family font 색상 변경- color : red;- color : rgba(255, 0, 0, 0.5); → a (알파값) : 투명도- color : #ff0000; → 16진수 표기법으로 가장 보편적, 축약가능(f00) font 사이즈 변경- font-size : 16px;- font-size : 1em; → 먼저 정의된 픽셀값을 기준(default : 16px)으로 두고 상대적인 크기(배수)로 지정 배경색- background-col.. 2019. 1. 16. CSS Selector 들어가기 전에특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야한다. 특정 엘리먼트 뿐 아니라 여러개의 엘리먼트일 수도 있다. 학습 목표1. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 분법을 이해한다. 핵심 개념- CSS Selector- id, class, tag selector- nth-child CSS Selector- HTML의 요소를 tag, id, class, html 태그 속성들을 통해 쉽게 패턴 매칭을 시켜주는 방법- element에 style을 지정하기 위해서 세가지 기본 선택자를 사용할 수 있음· tag : 태그 이름을 쓰면 된다. 태그 이름이 동일한 경우, 모든 태그에 적용· id : 해당 값을 가지고있는 id에 적용· class· 그룹 선택 : h.. 2019. 1. 16. 상속과 우선순위 결정 들어가기 전에 CSS 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재한다. 상속은 대표적인 CSS 적용 규칙인데 중복된 속성을 매번 적용해야하는 일을 줄일 수 있다. 학습 목표1. CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해해보자. 핵심 개념- CSS 상속- 선택자 우선순위 (CSS Specificity) CSS 상속- 상위에 설정된 스타일을 하위에서도 쓴다 : 재사용 측면에서 효율성 good- box-model이라고 불리는 속성(width, height, margin, padding, border)과 같이 크기와 배치에 관련된 속성은 상속을 받지 않음 Cascading- CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다.· 경쟁 :.. 2019. 1. 16. CSS 선언방법 들어가기 전에CSS를 HTML안에 선언하는 방식은 크게 세가지가 있다. 학습 목표1. CSS 선언 방식을 이해하고 활용할 수 있다. 핵심 개념- inline- internal- external CSS 기본사용법- (1) span {(2) color : (3) red; }· (1) : selector(선택자)· (2) : property· (3) : value· div > p : div 하위의 p 영역을 의미 sytle을 HTML 페이지에 적용하는 세가지 방법- inline : HTML 태그 안에 직접 넣는 방법 → 좋은 방법은 아님. 구조를 표현하는 HTML에 CSS가 들어있으면 구조와 스타일이 섞이게 되므로 유지보수와 관리가 어렵다. element.style로 DOM 트리에 보여짐- internal :.. 2019. 1. 16. class와 id 속성 들어가기 전에HTML 속성 중 class와 id란 무엇이며 어떻게 사용할까? 고유한 값인 id와 중복사용이 가능한 class의 활용 방법에 대해 알아보자. 학습 목표1. class와 id의 목적을 이해하고, 구분해서 작성할 수 있다. 핵심 개념- HTML 태그 안에서 사용되는 class 속성과 id 속성 id- identifier : 고유한 값이기 때문에 하나만 써야한다. 하나 이상 써도 오류가 나지 않기 때문에 의도적으로 하나를 쓰도록 노력해야 함- 각각 하나하나 어떤 특별한 제어를 할 수 있으며 검색에도 용이하다. class- 하나의 HTML 안에 중복해서 쓸 수 있다.- 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있다.- 같은 class에는 동일한 CSS 스타일을 부.. 2019. 1. 16. HTML 구조설계 들어가기 전에웹페이지를 만드는 것은 문서의 구조, 즉 제목, 단락 등을 잡는 것과 같다. 그런 관점에서 웹사이트의 문서 구조를 만드는 것이 가장 먼저 할 일이다. 학습 목표1. CSS 없이 먼저 HTML 구조를 설계할 수 있다. 핵심 개념- HTML 구조화 설계 HTML 구조 설계(HTML structure design)구조화 설계는 마치 문서를 쓴다고 생각하면 쉽다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML 개발을 시작한다. 즉, 어떠한 화면을 보면서 그대로 구현하는 것이다. 그 화면을 보면서 구조를 분석해야 한다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리한다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반.. 2019. 1. 16. 이전 1 ··· 15 16 17 18 19 다음
