제로의 프로그래밍 블로그 제로의 프로그래밍 블로그

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 16. Element가 배치되는 방법 (CSS layout) ※ Intro - CSS의 배치를 위해 여러가지 중요한 개념 이해- block과 inline의 차이, position 속성 이해- float 성질 이해 ※ 개념 - 박스 모델 (Box model)- margin- border- padding- position ※ 엘리먼트가 배치되는 방식 - 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 함- 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본- 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 15. CSS 기본 Style 변경하기 ※ Intro - 글자색, 배경색, 글꼴 바꾸기- 텍스트 속성 및 옵션값을 변경하기 ※ 핵심 개념 * font-size* background-color* font-family ※ CSS 기본 스타일 변경하기 - CSS style 적용은 글자색, 배경색 등이 가장 자주 사용됨- 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여함- 색상 관련 값은 주로 16진수 표기법을 사용함 ※ font 색상 변경 * color : red;* color : Reba(255, 0, 0, 0.5);* color : #ff0000; // 16진수 표..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 14. CSS Selector ※ Intro - 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 찾아야함- 특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있음- CSS Selector 문법은 엘리먼트를 쉽고 빠르게 찾을 수 있게 함 ※ 개념 * CSS Selector* id, class, tag selector* nth-child ※ CSS selector - CSS selector : HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법 * tag로 지정 * id로 지정 hello world! * class 로 지정 hello world! ※ ..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 13. 상속과 우선순위 결정 ※ Intro - CSS 의 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재함 - 상속은 대표적인 CSS 적용 규칙. 중복된 속성을 매번 적용해야 하는 일을 줄일 수 있음 ※ 학습 목표 1. CSS 상속의 특징. 상속이 되지 않는 상황 이해 ※ 핵심 개념 - CSS 상속- 선택자 우선순위 (CSS Specificity) ※ 상속과 우선순위 결정 1 - 상위에서 적용한 스타일은 하위에도 반영됨 => 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됨 - 하지만 모든 CSS 속성이 이런 특징을 갖게 되면 몇 가지 문제가 ..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 12. CSS 선언 방법 ※ Intro - CSS를 HTML 안에 선언하는 방식은 크게 3가지가 있음 ※ 학습 목표 1. CSS 선언 방식을 이해하고 활용 ※ 핵심 개념 - inline- internal- external ※ CSS의 구성 span { color: red;} - span : selector (선택자)- color : property- red : value ※ style 을 HTML 페이지에 적용하는 3가지 방법 1. inline - HTML 태그 안에다가 적용함- 다른 CSS 파일에 적용한 것보다 가장 먼저 적용함 2. internal - style 태그로 지정함- 구조와 ..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 11. class 와 id 속성 ※ Intro - HTML 속성 중 class 와 id란 무엇이며 어떻게 사용할 수 있을까?- 고유한 값인 id 와 중복 사용이 가능한 class의 활용 방법에 대해 이해하기- 다른 웹 사이트에서 class 와 id를 어떻게 사용했는지 확인하기 ※ 학습 목표 - class와 id의 목적을 이해하고 구분해서 작성하기 ※ 핵심 개념 - HTML 태그 안에서 사용되는 class 속성과 id 속성 ※ ID - 고유한 속성으로 한 HTML 문서에 하나만 사용 가능함- 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이함 ※ Class - 하..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 10. HTML 구조 설계 ※ Intro - 웹 페이지를 만드는 것은 문서의 구조를 잡는 것과 같음.- 제목, 단락 등이 있는 것과 같음.- 웹 사이트의 문서구조를 만드는 것이 가장 먼저 할 일임. ※ 학습 목표 1. CSS 없이 먼저 HTML 구조를 설계할 수 있음 ※ 핵심 개념 - HTML 구조화 설계 ※ HTML 구조 설계 - 구조화 설계는 마치 문서를 쓰는 것과 같음. - 현업에서는 Presentation 문서 형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML 개발 시작 - 즉 어떠한 화면을 보면서 그대로 구현하고, 그 화면을 보면서 구조를 분석해야함. - 먼저 영역을 ..

Naver BoostCourse Full-Stack Developer Course Part 01 웹 프로그래밍 기초 09. HTML Layout 태그 ※ Intro - 레이아웃(Layout) 이란 배치라는 뜻. - HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지를 결정하는 것 - 기본적으로 상단의 , 하단의 그리고 가운데의 본문 영역이 있음 ※ 학습 목표 1. 레이아웃(전체 페이지 구성)을 위한 적절한 HTML 태그들을 이해 ※ 핵심 개념 - HTML layout 태그들 ※ 레이아웃을 위한 HTML 태그 - 레이아웃 : HTML 화면을 구성하는 어떠한 기본적인 모습들. - 상단의 header, 하단의 footer, 가운데의 본문 영역이 있음 - 레이아웃을 구성하는 태그도 역..