print("HELLO WORLD :>")🐣

KEY WORD : CSS Framework / CSS Preprocessor / 디자인 시스템 > CSS Framework : 이미 만들어진 UI 규칙 세트 framework = 뼈대 + 규칙을 미리 만들어둔 것 . ( 버튼 디자인 / 여백 규칙 / 색상 체계 / 반응형 기준)사용하는 이유는 편해서가 아닌 통일하기 위해서대표적인 framework ( Bootstrap / Tailwind / Bulma / Skeleton) >> Bootstrap미리 정의된 HTML/CSS 기반의 UI 컴포넌트 제공일부 컴포넌트는 JavaScript 포함 ( 모달, 드롭다운 등)모바일 우선 접근 방식도입하여 다양한 화면 크기에 맞는 반응형 디자인을 쉽게 구현할 수 있음.추가적인 CSS코드 작성 없이 빠르게 UI를 구성다양..

KEY WORD : position / Grid 레이아웃 / responsive_web / viewport / Media Query / interactiveUI > responsive_web(반응형 웹) : 화면 크기에 따라 같은 페이지가 다른 모습으로 보이도록 만드는 것. pc, tablet, mobile 화면크기, 비율, 레이아웃이 변하게끔.@media (max-width:768px) { /* width가 768px 일때 적용 -> css cascade */ .card { padding : 12px; }}반응형 웹을 위한 조건 -> viewport = 브라우저가 생각하는 화면의 기준 폭 / 위치 : head 태그 안/* width=device-width -> 기기 폭 그대로 사용..

주요 키워드 CSS BOX MODEL / DISPLAY / BOX-SIZING / FLEXBOX / PARENT-CHILD 관계 / POSITION > HTML : 모든 요소는 사각형 박스 / 웹페이지의 구조를 표현하는 언어> CSS : 박스의 색과 위치 선정 / HTML이 어디에 어떻게 보일지를 정하는 규칙이다. CONTENT : 이미지, 텍스트 입력 공간PADDING : 배경색은 padding까지 포함BORDER : 박스를 감싸는 경계선MARGIN : 레이아웃 간격 조절의 핵심--> 실제 박스 크기(width) = content + padding + border > display 속성 : 박스의 행동 규칙과 그 안의 배치 규칙을 동시에 정한다. ->기본흐름을 정하는 속성display : block..