CSS

cadading style sheet; html을 디자인하여 웹페이지를 다채롭게 꾸며준다. 스타일시트라고 칭하기도 한다.기본구조로는 inline styles(html의 열림태그에서 속성과 함께 사용된다) 과 stylesheets 가 있다.내부 스타일시트는 <sty

selector는 html의 구체적인 요소를 타겟한다. 요소선택자(특정 타입의 모든 HTML요소를 선택한다.)종종 tag name 이나 element selector 로 언급되며, < > 를 붙이지 않는다. p { color: red; } universal

폰트(typeface)1\. 서체font-family 속성(property)을 사용한다. 주의할 점은명시된 폰트는 반드시 사용자의 컴퓨터에 설치되어 있거나 사이트에 다운로드 되어져 있어야 한다. 웹세이프 폰트는 대부분의 브라우저와 운영체제에서 지원되는 글꼴 그룹이다.만

content boxwidth, height 속성으로 텍스트가 담긴 컨텐츠 박스의 가로 세로 크기를 정한다. 픽셀(px)로 크기가 결정되며 모든 장치에서 같은 크기로 보여진다. border액자 프레임이라고 생각하면 된다. width(보더의 두께.px로 세팅. thin,

margin collapse(마진 상쇄) 두 요소의 상하 마진이 겹치면 한쪽 마진만 적용된다. 이 경우 값이 큰쪽이 적용된다. min-width 속성은 요소박스의 최소 폭을 보장한다.max-width 속성은 요소박스의 최대 폭을 보장한다.min-height 위와 동일

overflow 속성컨텐츠가 박스 밖으로 흘러넘치는 것을 컨트롤 한다.가장 흔하게 사용되는 값은 아래와 같다. hidden : 오버플로우 되는 컨텐츠는 화면으로부터 숨겨진다. scroll : 요소박스에 스크롤바가 추가되어 오버플로우 된(나머지) 컨텐츠를 스크롤하여 볼

주요 웹브라우저는 외부 스타일시트가 없는 경우에 대비하여 기본 스타일시트를 갖고있다. 이 기본 스타일시트는 'user agent stylesheets' 라고 알려져 있는데 브라우저 기술용어다. 아무튼 기본 스타일시트는 margin과 padding에 기본값을 주는데 h

Visibility 속성이 속성으로 요소는 화면에서 숨겨질 수 있다. 속성 값으로는 아래값들이 있다. hidden — hides an element.visible — displays an element.collapse — collapses an element.\*\*

박스모델에서, 위 사진처럼 보더 두께와 패딩 크기가 박스 사이즈에 영향을 주어 원하는 박스 크기를 지정하는게 쉽지 않다. 그래서 box-sizing 속성을 이용하여 모든 박스모델을 재설정(reset)하여 새롭게 구체화할 수 있다.box-sizing 속성의 기본값은 co

브라우저는 CSS가 없는 HTML 문서의 요소를 왼쪽에서 오른쪽으로, 위에서 아래로 문서에 존재하는 것과 같은 순서로 렌더링한다. 이를 HTML에서 요소의 흐름이라고 한다. 다음과 같은 css 속성을 이용하여 웹페이지에 보여지는 요소의 포지션을 조정해줄 수 있다. 1

코드를 해석해서 모니터와 같은 화면에 출력하는 것을 렌더링(Rendering)이라고 한다.

HTML의 모든 요소는 형태적인 면에서 사각형 모양의 박스이다. 이런 박스를 배치하여 웹페이지 레이아웃을 만듭니다. 이것을 박스 모델(box model)이라고 하며, 박스형태로 웹페이지를 구성한다. 인라인요소말 그대로 하나의 줄 안에 포함되는 요소.줄 바꿈이 되지 않고

CSS에서 colors는 세가지로 표현될 수 있다. 일관적인 표현방식을 사용하는게 좋다. Named colors — 영어이름로 표현되는 컬러, keyword colors라고도 한다.https://developer.mozilla.org/en-US/docs/Web

모든 브라우저에서 지원하는 웹 세이프 폰트를 이용할 수 있지만무료 폰트 서비스(Google Fonts, https://fonts.google.com/ 참조 / Adobe Fonts, https://fonts.adobe.com/)를 이용할 수도 있다.

font-familiy 속성으로 폰트를 지정한다. 폰트 이름이 여러 단어로 구성된 경우 폰트이름을 ' ' 로 감싸준다. 모든 브라우저 상에서 나타날 수 있도록 web safe 폰트를 사용하는 것이 바람직하다.https://www.cssfontstack.com/

스크롤 생성 ul {overflow-y: scroll; }스크롤은 적용하면서 스크롤바 없애기 .ul::-webkit-scrollbar { display: none; / Chrome, Safari, Opera/}

특정 너비와 높이의 div 안에 이미지를 넣은 후 div의 overflow: hidden으로 설정해야 overflow가 활성화 된다.

flex와 마찬가지로 그리드를 포함하는 컨테이너를 display: grid 로 시작한다. 그리드 셀의 크기 지정grid-template-rowsgrid-template-columns repeat(반복횟수, 반복값) 함수는 반복값을 자동처리한다. grid-template