..

[Element가 배치되는 방식] - 렌더링 과정 / 레이아웃 작업 - 일반적으로 위에서 아래로 순서대로 블럭을 이루며 배치됨- 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, CSS에서 추가적인 속성을 제공- display 속성 (block / inline / inline-block) - position 속성 (static / absolute / relative / fixed)- float 속성 (left / right) [display 관련] - display: block - display 속성이 block 이거나 inline-block 이면 그 element는 어떠한 영역(블록)을 가지고 쌓임- 화면에 위에서 아래로 쌓이듯 채워짐- 대부분 display: block 속성을 기본으로 가지고 ..

- 색상 관련 - color: red- color: rgba(255, 0, 0, 0.5)- color: rgb(255, 0, 0)- color: #ff0000- 이처럼 값 / rgba() / rgb() / #16진수 로 색상값을 표현할 수 있음- 일반적으로 16진수로 많이 표현함- VSCode에서 color picker 사용 가능 - 글자 크기 관련- font-size: 16px- font-size: 1em- em은 기본 글자 크기의 배수를 위한 단위.- px는 절대적, em은 상대적- 글자 기본 크기는 16px, 따로 설정하여 기본값을 변경할 수 있고, 이 경우 상대 크기도 달라지게 됨. - 글꼴 관련- font-family: monospace, sans-serif;- 앞에서부터 시작하여 브라우저가 해..

- Element를 쉽고 빠르게 찾기 위해 Selector를 사용한다. - Selector에 태그 / id / class 를 사용할 수 있다. 태그span { color: red; }id#spantag { color: red; }asdfclass.spanClass { color: red; }asdf - id, class 요소 선택자와 함께 활용- div.myclassname 처럼 .이나 # 앞에 상위 요소를 명시하여 구체적으로 명시할 수 있음- 그룹 선택- h1, span, div { color: red; }- 콤마로 구분하여 여러 태그에 CSS 스타일을 적용하라 수 있음- 하위 요소 선택- #asdf span { color: red; }- asdf id를 가진 태그에 span이라는 하위 요소가 있으면 ..

- 상속 : 상위에서 결정된 스타일을 하위에서도 사용 - 배치와 관련된 속성 (box-model: width, height, margin, padding, border...) 들은 상속이 되지 않는다. - CSS는 여러가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다.선언방식에 따른 차이Inline > Internal = External같은 수준에서는 나중에 선언된 정보가 반영된다.구체적으로 표현된 정보가 반영된다. ('body > span' 이 'span' 보다 구체적으로 표현됨)class보다 id가 우선순위가 더 높음# : id / . : classid > class > element (금은동의 관계)- 이러한 CSS의 특징을 Cascading이라고 부른다. (Cascad..

span { color: red; } - span : selector(선택자)- color : 프로퍼티- red : 값- propery와 value는 콜론으로 구분, 세미콜론으로 문장을 구분 [Inline] - HTML 태그 안에 CSS 문법을 넣음 - style 속성 사용- Hello World! [Internal] - head 태그 안에 CSS 문법을 넣음- style 태그 사용- - 구조와 스타일이 섞이게 되므로 유지보수가 어렵다.- 별도의 CSS 파일을 관리하지 않아도 된다. 서버에 CSS 파일을 요청하기 위한 별도 요청을 보낼 필요가 없다. [External] - 별도의 .css 파일을 만들어 import - - 우선 순위 : Inline > Internal = External- 나중에 선언된 ..

- id : 고유한 속성. 여러 개를 써도 오류는 발생하지 않으므로 개발자가 의도적으로 id를 사용해야 함. 고유하게 식별하여 특정 처리를 하기 위함.- class : 중복 사용 가능. 어떤 CSS 클래스를 만들어 두어 같은 class를 가진 부분이 같은 CSS 스타일을 갖게 됨.

검색 키워드 : html structure design 웹 프론트엔드 개발자는 기획서나 디자인 파일을 받아 그것을 기반으로 HTML 개발을 시작한다.그러므로 주어진 화면을 보면서 구조를 분석하는 것이 중요하다. 영역을 크게 나누어 상단 / 본문 / 내비게이션 같이 분리한 후,각 영역 안에서 내용의 구조를 잡는다. 영역 안의 내용도 제각각일 것이고, 적절한 태그를 사용해야 한다. HTML 코드를 작성하면서 문서의 구조를 잡아나가는 것이 중요하다.

- 레이아웃을 구성하는 태그도 그 의미에 맞추어 사용한다.- header / footer / section 검색하면 잘 나온다. html layout tags.

- 태그는 그 의미에 맞추어 사용해야 한다. - 링크 / 이미지 / 목록 / 제목 등- anchor / img / ul / li / heading / p 등... - div 태그는 일반적인 영역을 표현할 때 많이 사용함 - 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요하다. 다 외울 필요는 없다! 검색 키워드 : html tags

[클라이언트 / 서버 구조] - 서버 : 서비스를 제공, 웹 서버 - 클라이언트 : 서버에 서비스를 요청하여 그 결과를 보여줌, 웹 브라우저 [DBMS] - Database Management System - 다수의 사용자들이 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어- MySQL, Oracle DB, MariaDB... [미들웨어] - 클라이언트와 DBMS 사이에 또다른 서버를 둠, 비즈니스 로직을 수행하는 곳 - 클라이언트 쪽 복잡한 로직이 미들웨어로 옮겨가면서 화면에 결과를 보여주는 역할만 수행할 수 있게 됨 [WAS] - Web Application Server - 일종의 미들웨어. 동적 컨텐츠를 제공. 웹 서버는 정적 컨텐츠를 제공.- 프로그램 실행 환경과 데이터베이스 접속 ..