css3의 기능(셀렉터, 박스모델), 박스모델(마진, 패딩, 경계선)

css3의 기능

▶선택자(selector) : 스타일을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것.

▶박스모델(Box Model) : 모든 HTML 요소는 Box 형태의 영역을 가지고 있다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다.

웹 디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다.

▶HTML 요소 : 텍스트, 이미지, 동영상, 단락, 목록 등의 웹 페이지를 구성하고 있는 요소

▶경계선(border) : HTML 요소를 둘러싼 경계를 나타내는 선

▶마진(margin) : 경계선과 다른 외부의 요소와의 간격

▶패딩(padding) : 경계선과 HTML 요소 사이의 간격

▶배경과 경계 : CSS3는 그라데이션을 만들고, 여러 배경 이미지를 적용하고, 둥근 모서리를 만드는 기능을 포함하여 배경과 경계를 스타일링 하기 위한 더 많은 옵션을 제공

▶텍스트 효과 : CSS3는 텍스트 그림자, 텍스트 그라데이션 및 텍스트 래핑 제어하는 기능을 포함하여 텍스트 스타일을 위한 새로운 속성을 제공

▶변환 : CSS3는 회전, 축적, 스큐, 번역과 같은 새로운 변환 기능을 도입하여 요소의 모양, 크기, 위치를 조작할 수 있다.

▶애니메이션 및 전환 : CSS3는 애니메잇ㄴ 및 전환을 만들기 위한 새로운 속성을 제공하여 웹 페이지에 시각적 효과와 상호 작용을 추가할 수 있다.

▶미디어 쿼리 : CSS3는 다양한 화면 크기, 해상도 및 장치에 대해 다양한 스타일을 정의할 수 있는 미디어 쿼리를 도입.

※에릭 마이어(eric meyer)의 reset.css는 대표적인 reset 문서지만 자신의 환경에 맞춰서 하나씩 추가해 나가는 것이 좋다.

https://meyerweb.com/eric/tools/css/reset/

Box model

▶Content 는 요소에 실제로 들어가는 내용이 들어가는 영역이다. 이 영역의 크기는 width 와 height 속성으로 조정할 수 있다.

▶Padding 은 Content 와 Border 사이에 위치하며 , 요소의 내부 여백을 지정한다 . Padding 은 padding top, padding right, padding bottom, padding left 속성을 사용하여 각각의 면을 조절할 수 있다.

▶Border 는 요소의 외곽선을 지정하는 역할 . Border 는 border top, border right, border bottom, border left 속성으로 각 면을 조절할 수 있으며 스타일(style) , 두께(width) , 색상(color), 모서리의 둥굴기(radius) 등을 지정할수 있다.

▶Margin 은 Border 와 다른 요소들 사이의 간격을 지정하는 역할을 합니다 . Margin 은 margin top, margin right, margin bottom, margin left 속성을 사용하여 각 면을 조절할 수 있다.

▶margin :10px 20px; ⇒ 값을 두개 적으면 상·하값 / 좌·우값

▶3개의 값을 입력하면 상 / 좌·우 / 하

▶4개의 값을 입력하면 상/ 우 / 하 / 좌 ⇒ 시계방향

▶margin: 0px auto; or margin: 100px auto; ⇒ 가운데 정렬 가능(요소가 블록속성일 때)

→위 아래 간격은 0px 혹은 100px 거리를 두고 좌우는 컴퓨터가 알아서 맞춰주세요.

 

border, margin, padding

▶부모요소(element)에서의 패딩(padding)은 자녀요소(element)에겐 마진(margin)이다.

▶ [box-sizing : border-box;] : 선의 두께에 따라 px이 추가 될 수 있었는데 해당 명령에 따라 정해진 픽셀에 맞춰서 만들 수 있다.

 

문서의 스타일을 초기화 하는 이유?

▶브라우저가 기본적으로 적용하는 스타일을 제거, 웹 디자이너가 의도한 스타일링을 더 쉽게 할 수 있도록 하는것

▶브라우저마다 기본 제공 스타일이 다름. 기본 스타일 제거하지 않으면 웹디의 스타일을 적용하는데 어려움을 겪을 수 있다.