CSS Visual Rules , BOX Model / 코드카데미 프론트엔드 코스 #6

이전에는 HTML, CSS의 기초에 대해 설명 

이번에도 기초적인 내용이지만, Visual Rule 파트. 

 

먼저 Font Family부터 Opacity Text align 등의 기본적인 font 관련 내용을 요약하고 그 다음에 Box model에 관한 설명 

 

Font Family 

 Web safe fonts 라는 것을 사용하는것이 권장되고, 그것이 없으면 브라우저나 os에 따라 표시가 되지 않는 폰트가 있을 수 있음. 우리가 흔히 말하는 폰트, ~체가 Font Family임 , 만약 폰트의 이름이 두 어절이라면 ""를 사용해 묶어서 표기해야함. 

구문)

 font-family: 

 

Font weight 

 bold 등 글자 굵기 지정

 

Text align 

• left  좌측 정렬(parent element 기준으로함)
• center 가운데 정렬
• right 우측정렬
• justify 좌우를 균등하게 정렬

Color and Background color

 Color는 글자의 색깔, Background color는 글자 배경의 색깔 지정 

 

Background Image 

 background-image : url("링크");

 background-size : ;

 background-repeat:;

 

Opacity

 투명도 지정, 0이 제일 낮고 1이 제일 높음 

Important

강제로 실행시키는 문구, 특이도를 무시하고 사용하게 됨 

 !important로 붙여서 쓰면됨 

 

 

 !important can be applied to specific declarations, instead of full rules. It will override any style no matter how specific it is. As a result, it should almost never be used. Once !important is used, it is very hard to override

 

One justification for using !important is when working with multiple stylesheets. For example, if we are using the Bootstrap CSS framework and want to override the styles for one specific HTML element, we can use the !important property..

 

• The font-family property defines the typeface of an element.
• font-size controls the size of text displayed.
• font-weight defines how thin or thick text is displayed.
• The text-align property places text in the left, right, or center of its parent container.
• Text can have two different color attributes: color and background-color. color defines the color of the text, while background-color defines the color behind the text.
• CSS can make an element transparent with the opacity property.
• CSS can also set the background of an element to an image with the background-image property.
• The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override.

BOX Model

 예를들어 내가 특정 요소의 배경화면을 바꾼다고 하면, 그 배경화면은 그 요소 자체뿐아니라 그 요소 주위를 포함하여 적용된다. 그랬을 때에 우리 눈에 보이지 않는 그 '범위' 자체를 박스라고 한다. 기본적으로 아래 그림과 같다고 이해할 수 있다. 

 

Box model의 도식

 

 

 

BORDER 

보더 명령어는 세가지 부분으로 이뤄져서, 색깔, 픽셀, 스타일을 지정할 수 있다.

예시: border: solid 3px white;

 

<color에 관한 문서>

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

<color> - CSS: Cascading Style Sheets | MDN

<border 스타일에 관한 문서>

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values

border-style - CSS: Cascading Style Sheets | MDN

 

Border Radius

 가장자리 부분을 둥글게 만드는 명령, 하지만 아래와 같이 조절하면 (높이 , 너비 60px 및 border radius 50%) 완전한 원을 표시할 수 있다. 높이와 너비가 같기만 하면된다. 약간씩 조절하여 타원형을 만들 수도 있다. 

  height: 60px;
  width: 60px;
  border: 3px solid blue;
  border-radius: 50%;

 

 

Padding

 위의 도식대로, Content와 Border 사이를 패딩이라고 이른다. 패딩을 활용하면 content가 덜 답답하게 보이게 만 들 수 있다. 기본적으로 padding 명령어가 있고, 아래 네가지로 상하좌우를 지정해서 조절할 수도 있다. 

• padding-top
• padding-right
• padding-bottom
• padding-left

Padding shorthand 라는 기능은 위에 나온 4가지의 부수적인 표현들을 따로 입력할 필요 없이 픽셀을 숫자로 차례대로 입력하면 반영하는 기능이다. 다음과 같이 사용한다. 시계방향대로 배열되어 각각 top right bottom left 순서대로 쓴다. 

  padding: 6px 11px 4px 9px;

 

3가지가 쓰여있을 때는 각각 top , left랑right 함께, bottom 이렇게 쓰인다. 좌우가 같은 픽셀일 때 활용할 수 있다. 

  padding: 5px 10px 20px;

 

2가지의 property일 때는 각각 top, bottom 함께 그리고 left right 함께 쓰인다.

  padding: 5px 10px;

 

Margin

 박스 바깥의 공간을 말한다. 마찬가지로 아래 명령어를 통해 특정 사이드만을 조절할 수도 있다. 

• margin-top
• margin-right
• margin-bottom
• margin-left

또한 Padding과 마찬가지로 Shorthand property 로 쓰일 수 있어 간편하다. 규칙은 padding과 똑같다. 

 

Margin의 auto property를 이용하면, 개체를 중앙으로 정렬할 수 도있다. 

margin: 0 auto ;

위와 같이 쓰게 되면, top bottom은 0으로 left right는 자동으로 지정된다. 다만 이렇게 지정하여 가운데로 정렬하기 위해서는 해당 요소의 width가 정의되어야 하는데, 만약 정의가 되지 않는다면 그것이 소속된 요소의 크기를 따라가기 때문에 좌우 여백이 의미가 없이 꽉차게 되기 때문이다. 

 

auto가 작동하는 원리는 , A 요소가 속한 Margin의 최대 너비(가로너비)에서 그것이 속한 요소의 너비(마찬가지로 가로너비)를 빼고 2로 나눈 값을 margin left 와 margin right에 할당함으로서 가운데 정렬을 하게 하는 것이다. 

 

Margin Colapse

 4면의 margin이 있을텐데, 그 중 가로로 있는 좌우 margin을 horizontal margin이라고 하고, 상하로 있는 top bottom margin을 포괄하여 vertical margin이라고 한다. 이 중 horizontal margin은 두 요소가 좌우로 나란히 있을때 한쪽의 우측margin이 10px이고 또 다른 한쪽에 있는 요소의 좌측 margin이 10px일 때 두 요소의 사이에는 20px이라는 공간이 남게 되는 것을 의미한다. 즉 horizontal margin은 합해져서 계산된다.

 

Margin collpase 도식

 

 하지만 Vertical margin의 경우 보다 큰 쪽의 margin만으로 계산된다. 이 것을 margin colapse 라고 표현한다. 

Margin collapse에 관한 아티클을 소개한다. 

https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0

Margin Collapse in CSS: What, Why, and How

 

 

Min-width / Max-width 

 

 

 최대및 최소 너비에 제한을 둠으로서 , 화면에 표시될 때의 오류를 예방하게 해주는 것으로 이해하고있다. 이 명령어들은 우리가 보는 스크린화면을 줄이거나 키울 때 변화하는 정도를 제한해주는 역할을 한다. 

 

p {
  min-width: 300px;
  max-width: 600px;
}

이경우 p는 300이하로 줄지 않고, 600이상으로 커지지 않을 것이다. 

p {
  min-height: 150px;
  max-height: 300px;
}

hieght에도 마찬가지의 용법이 적용된다.

 

Overflow

특정 요소가 설정된 구획보다 크게 만들어져서, 그 구획 바깥으로 넘어갈 때 어떻게 표시할지 지정해주는 도구이다. 

 

 3가지의 property가 대표적으로 쓰이는데

hidden / scroll / visible 이다. 

hidden ; 초과되는 부분은 보이지 않게 함

scroll ; 스크롤바를 형성하여 추가된 부분은 스크롤로 더 볼 수 있게 한다.

visible; 이것이 기본값이고, 초과되더라도 전부 다 표시되게 한다. 

 

구문은 다음과 같다.

{

overflwow: scroll;

}

추가적인 용법인 x, y 등도 있다. 

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

 

 

Useragent Stylesheet / reset

 

 기본적으로 브라우저에서 제공하는 기본값을 의미하는데, 개발을 하기위해서는 이러한 것이 방해가 될 떄가 있다. 따라서 

* {
  margin: 0;
  padding: 0;
}

를활용하여 전체 초기화 후 개발을 진행 할 수 있다 .

 

Visibility

 Visibility를 사용하여 , 특정요소를 숨기거나, 표시하거나, collapse 할 수 있다.

 hidden, visible, collapse / none

 

none 과 hidden 의 차이점은 none의 경우 브라우저에서도 보이지 않고 , 공간도 사라진다는 점. hidden은 브라우저에서 보이지 않지만 공간은 남아있다는 점이 차이인 것 같다. 

 

 

Box model 변경

 1) 기본형 : content box model 

가장 기본적으로 사용되는 기본형의 box model로, 우리가 padding이나 border를 입력하면 그만큼포함되어 반영된다. 즉 우리가 입력한 width와 height와는 오차가 생기게 되는 방식이다. 

 box-sizing: content-box;

이렇게 쓴다. 이 문제를 해결 하기 위해 2번 방식이 있다. 

 

 2) 수정형 : border box model

위에서 말한 문제점을 해결하기위해, content의 크기를 자동으로 조절하는 방식이다. 자체적으로 border와 padding의 사이즈를 차감하여 content의 크기를 조절하고 따라서 우리가 입력한 width와 height에 맞게 된다. 주로 *를 사용하여 전체 스타일시트를 초기화 하는데 사용된다.

 

*{

box-sizing: border-box;

 

}