gradient 색상값 찾기 http://www.color-hex.com/ http://www.color-hex.com/color/333333

박스 모델의 규격 엘리먼트를 문서에 배치하기 위해서는 margin, padding 그리고 border 속성으로 구성된 Box Model을 알고 있어야 합니다. 구성도 구분설명여백 (margin)부모 항목과 경계 사이의 간격 바깥쪽 여백 항상 투명한 배경경계 (border)블록의 외곽 경계선 테두리 두께 요소의 border프로퍼티로 배경 지정채워넣기 (padding)경계선와 내용(content) 사이의 간격 안쪽 여백 요소의 background프로퍼티로 배경지정내용 (content)HTML 문서의 실제 내용 요소의 background프로퍼티로 배경지정

Edge(엣지) 개발자 도구 실행하기우측 상단의 […] 버튼 클릭 >> [F12 개발자 도구]

How Browsers Work: Behind the scenes of modern web browsershttps://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 클라이언트 요청에 대한 결과인 HTML, CSS파일이 다운받아집니다.HTML은 파서를 통해 DOM트리구조로 변환되고 CSS도 파서를 통해 CSS 규칙을 해석을 하게 됩니다. HTML의 어떤 태그에 어떤 CSS 스타일을 적용해야 되는지에 대한 정보를 Render Tree로 만들어서 Layout과 Painting을 통해 특정 위치, 크기, 스타일로 Display되어 표시되게 됩니다.이 과정중 무언가 문제 있다면 원하는 형태로 표시가 되지 않게 됩니다.

FLEXBOX FROGGYCSS Flexbox 속성을 개구리를 통해 게임처럼 학습할 수 있는 사이트입니다.서로 다른 색을 가진 개구리를 잎사귀 위에 정확하게 배치해 가는 과정에서 flex-start, flex-end, center 등 Flexbox 주요 속성을 익힐 수 있습니다. http://flexboxfroggy.com/ 하단의 [한국어] 링크를 클릭하면 한글화된 사이트로 학습할 수 있습니다. http://flexboxfroggy.com/#ko

Firefox(파이어폭스) 개발자 도구 실행하기우측 상단의 샌드위치버튼 클릭 >> [개발자] [개발자 도구] 우측하단의 스패너 아이콘을 클릭하면 개발자 도구의 기능목록이 표시됩니다.