내 마음대로 적는 CSS -1 : 의사요소, 의사클래스, box-sizing, margin, overflow

*, ::after, ::before{
    box-sizing: border-box;
    margin: 0;
}

위 CSS 규칙은 '*' (모든요소), '::after', '::befre' 두 가지 의사요소(pseudo-element)에 적용합니다. 

 

규칙 내용은 먼저 'box-sizing' 속성을 'border-box'로 설정합니다. 요소의 총 너비와 높이를 계산할 시 패딩(padding)과 테두리(border) 너비를 포함시키도록 지시합니다. 

 

또한 'margin' 속성을 0으로 설정하여 기본 마진을 제거합니다. 

 

 

1. 의사요소 (pseudo-element)

 

의사요소란 CSS 선택자의 일종으로서, 선택한 요소의 일부분에 가상의 요소를 생성합니다. HTML 코드 상에는 존재하지 않지만 CSS를 사용해 내부 특정 위치에 스타일을 적용할 수 있습니다. 

 

가상 요소는 '::'로 시작하는 두 콜론(::)을 사용해 표시합니다. 이전에는 단일 콜론(:)을 사용했지만 최근 CSS명세에서는 의사 클래스와 구분하기위해 '::'를 사용하도록 변경되었습니다. 

 

의사 요소에는 '::before', '::after', '::first-letter', '::first-line' 등이 있습니다. 이러한 가상 요소를 사용하여 문서를 꾸밀 수 있습니다. 의사 요소를 사용하면 HTML 코드를 변경하지 않고도 요소의 특정 부분에 스타일을 적용할 수 있습니다. 

 

예를 들어 모든 요소의 콘텐츠 앞에 'Hello'를 삽입한다고 하면 

*::before {
  content: "Hello";
}

위의 코드는 전체선택자 '*' 가 HTML 문서 내 모든 요소를 선택하여 모든 요소의 콘텐츠 앞에 'Hello'가 삽입합니다. 

 

 

 

2. 의사 클래스(Pseudo-class)

 

CSS 의사 클래스는 객체 지향의 가상클래스와 구분됩니다. CSS 스타일링을 할 때에는 의사 클래스(pseudo-class)라고 하고, 객체 지향 프로그래밍에서는 가상 클래스(virtual class)를 사용합니다 둘은 서로 다른 개념이며 의사 클래스가 CSS에서 요소의 특정 상태를 선택하기위해  특정 상태에 있는 스타일을 적용하는데 사용하는 반면 가상 클래스는 인스턴스를 직접 생성할 수 없고 자식 클래스를 통해 구현되어야 하는 추상 클래스를 의미합니다.

 

의사(pseudo)와 가상(virtual)은 모두 그리스어에서 유래한 용어입니다. 한국어로 모두 '가상' 이라고 번역할 수 있기 때문에 의미상의 차이점을 짚기가 어렵습니다. 'virtual' 은 라틴어로 'virtus' 에서 파생되어 '우월함', '가치', '힘' 등을 의미합니다. 따라서 'virtual'은 객체 지향 프로그래밍에서 다형성을 통한 객체가 가진 잠재력을 나타냅니다. 즉, 클래스를 상속하여 새로운 클래스를 생성할 때 실제가 아닌 가상의 클래스를 생성하며 메소드 오버라이딩을 통해 재정의 할 수 있는 다형성(Polymorphism)을 의미합니다. 

 

반면 'pseudo' 는 그리스어의 'pseudos'에서 파생되어 '거짓', '가짜', '모조', '위조' 등을 의미합니다. 따라서 'pseudo'는 HTML,과 CSS에서 가짜나 모조의 상태를 나타내는 것으로 해석할 수 있습니다. 

 

 

의사 클래스와 의사 요소는 모두 CSS에서 사용되는 개념이지만 차이점이 존재합니다. 의사 클래스는 선택자와 함께 사용되어 요소의 특정 상태를 선택하는데 사용됩니다 의사 요소는 선택자에 존재하지 않는 가상의 요소를 생성하는데 사용됩니다. 

 

의사 클래스는 콜론(:)으로 시작해 특정 요소의 상태에 따라 스타일을 적용할 수 있습니다.

 

예를들어 링크 요소(a)는 일반적으로 색상과 밑줄이 적용됩니다. 하지만 방문한 링크의 요소가 다른 색상으로 변경하는 것이 더 좋을 수 있습니다. 이러한 경우 가상 클래스를 사용하여 방문한 링크 요소의 스타일을 재지정 할 수 있습니다. 가상 클래스에는 다음과 같은 것들이 있습니다.

 

1. :hover
마우스 커서가 요소 위에 올라갔을 때 적용되는 상태입니다. 이 의사 클래스는 주로 링크 요소에 사용되어 마우스 오버 상태에서 색상 등의 스타일을 변경하는데 사용됩니다.

a:hover {
  color: red;
}​

2. :active
마우스가 클릭한 순간의 요소가 활성화된 상태를 나타냅니다. 이 의사 클래스는 주로 버튼 요소 등에 사용되어  클릭한 상태에서 스타일을 변경하는데 사용됩니다. 

button:active {
  background-color: gray;
}​

3. :focus
요소에 마우스 커서가 위치해 포커스가 되었을 때 적용되는 상태입니다. 이 의사 클래스는 주로 입력 요소에 사용되어 포커스가 된 상태에서 스타일을 변경하는데 사용됩니다. 

input:focus {
	background-color: yellow;
}

4. :nth-child
요소의 자식 중 특정 인덱스를 가진 요소를 선택할 때 사용됩니다. 이 의사 클래스는 주로 리스트나 테이블 등 특정 위치에 있는 요소를 스타일링 할 때 사용됩니다.

li:nth-child(2) {
  font-weight: bold;
}

우리는 이제 전체선택자 '*', 가상요소 '::after', '::before'를 이해하게 되었습니다. 이제 CSS 속성에 대해 알아보겠습니다. 

 

 

 

 

3. CSS 속성 box-sizing 

'box-sizing' 속성은 CSS에서 박스 모델의 크기를 측정할 때의 방식을 지정하는 속성입니다.

 

일반적으로 HTML 요소의 너비와 높이는 해당 요소의 콘텐츠 영역(content area)의 크기에 따라 결정됩니다. 하지만 'box-sizing'속성을 사용하면 콘텐츠 영역 이외의 패딩(padding), 테두리(border), 여백(margin) 영역까지 포함하여 요소의 크기를 계산할 수 있습니다.

 

'box-sizing' 속성에는 기본값 'content-box' 외에도 'border-box', 'padding-box', 'inherit' 값을 사용할 수 있습니다.

● content-box: 기본값으로, 요소의 너비와 높이는 콘텐츠 영역(content area)의 크기에 따라 결정됩니다.
● border-box: 요소의 너비와 높이는 콘텐츠 영역, 패딩, 테두리(border)를 모두 포함한 크기로 계산됩니다.
● padding-box: 요소의 너비와 높이는 콘텐츠 영역과 패딩(padding)을 모두 포함한 크기로 계산됩니다.
● inherit: 부모 요소로부터 box-sizing 속성 값을 상속받습니다.

예를 들어, 'box-sizing: border-box;' 를 사용하면, 너비와 높이를 설정할 때 콘텐츠 영역, 패딩, 테두리를 모두 포함해 계산합니다. 이렇게 사용하면 200px의 박스를 만들 때 일일이 패딩, 테두리 값을 계산할 필요가 없어짐으로 박스 모델의 크기 계산을 간편하게 조정할 수 있습니다. 

출처 : https://www.tutorialrepublic.com/lib/images/css-box-model.png

4. CSS 속성 margin 

CSS margin 속성은 요소의 외부 여백을 설정합니다. 외부 여백이란 요소와 인접한 요소 사이의 공간을 의미하며, 요소가 페이지 레이아웃 내 어떻게 배치되는지에 영향을 미칩니다.

 

margin 속성은 다음과 같이 사용할 수 있습니다.

margin: 10px;​

 

위의 예시에서는 모든 방향(위, 아래, 왼쪽, 오른쪽)의 margin이 10px로 설정됩니다.

margin: 10px 5px;​

위의 예시에서는 위/아래 방향의 margin이 10px로, 왼쪽/오른쪽 방향의 margin이 5px로 설정됩니다. 

margin: 10px 5px 15px;​

위의 예시에서는 위 10px, 왼쪽/오른쪽 5px, 아래 15px로 margin이 설정됩니다.

margin: 10px 5px 15px 20px;​

위의 예시에서는 위10px, 오른쪽5px, 아래15px, 왼쪽20px로 margin이 설정됩니다. 

margin을 음수 값을 사용하면 인접한 요소와 일부분 겹치게 할 수도 있습니다. 다음 예제는 인접한 요소와 -10px 만큼 겹쳐지도록 설정되어 있습니다.

div {
  margin: -10px;
}

 

 

5. CSS 속성 margin과 그 외 더 내용들

1. margin collapse
두 개 이상의 인접한 요소의 margin은 더 큰 값으로 적용됩니다. 이를 margin collapse라고 합니다. margin collapse는 인접한 요소 간의 공간을 유지하기위해 사용됩니다. 일반적으로는 부모와 자식 요소 사이에서 발생합니다. 

<div style="margin-top: 30px">
  <p style="margin-top: 20px">Hello World</p>
</div>​

위 예시에서 부모 요소인 div와 자식 요소인 p 태그 모두 margin-top 값을 가지고 있습니다. 그러나 이 두개의 margin 값 중에서 더 큰 값이 적용이 됩니다. 이는 margin collapse 때문입니다. 따라서 p 태그의 margin-top 값은 30px으로 설정이 됩니다.


2. margin과 flexbox
flexbox 레이아웃에서는 margin 속성을 사용하여 요소 간의 공간을 설정하는 대신, justify-content 및 align-items 속성을 사용하여 요소를 정렬합니다. 하지만 margin 속성은 flexbox 레이아웃에서도 여전히 사용될 수 있으며, 특히 요소 간의 간격을 설정할 때 유용합니다. 아래 예시를 보겠습니다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}
.box {
  margin-right: 20px;
  width: 100px;
  height: 100px;
  background-color: blue;
}​

위 예시에서는 flexbox를 사용하여 container 클래스를 가진 div 요소 안의 box 클래스를 가진 div 요소를 배치합니다. 각각의 box 요소는 오른쪽에 20px의 마진을 가집니다. 이를 통해 요소 간의 간격을 설정할 수 있습니다.

3. margin과 box-sizing
box-sizing 속성이 content-box로 설정되어 있는 경우, 요소의 margin은 요소의 크기에 영향을 주지 않습니다. 그러나 box-sizing 속성이 border-box로 설정되어 있는 경우, 요소의 margin은 요소의 크기에 포함됩니다. 이는 요소의 크기를 정확하게 계산하기 위해 고려해야할 요소입니다. 아래 예시를 보겠습니다.

<div style="box-sizing: border-box; width: 200px; height: 200px; margin: 20px; border: 1px solid black;"></div>​

위 예시에서는 div 요소의 box-sizing 속성이 border-box로 설정되어 있으므로, margin 속성 값은 div 요소의 크기에 포함됩니다. 따라서 div 요소의 실제 크기는 width와 height 값에 margin 값인 20px을 추가한 크기인 240px x 240px입니다.

4. margin과 overflow
margin 값을 사용하다보면 부모 요소의 크기를 초과해 자식요소가 벗어나는 경우가 있습니다. 이 때, margin과 overflow 속성을 함께 사용할 경우 자식요소의 벗어난 영역을 자르거나 스크롤을 추가해 보여줄 수 있습니다. 아래 예시를 보겠습니다. 

<div class="container">
    <div class="box"></div>
</div>

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-color: red;
}

.box {
    width: 100px;
    height: 100px;
    margin-left: 150px;
    background-color: blue;
}

부모 요소인 컨테이너 디브는 크기가 200px * 200px 입니다. 하지만 자식 요소인 박스 디브의 경우 margin-left가 150px로 설정되어 있으므로 width와 height 값에 margin-left 값인 150px을 추가한 250px * 100px 이기 때문에 부모요소로부터 벗어나게 됩니다. 이 때 overflow 속성을 사용하면 벗어난 div 요소를 자르게 됩니다. 

5. margin과 성능
margin을 설정한 요소의 갯수가 많아진다면 브라우저는 이 요소들의 배치를 계산하는데 더 많은 시간을 소요하게 됩니다. 따라서 불필요한 margin을 제거하거나 최소한으로 유지하는 것이 좋습니다.

 

6. overflow

CSS overflow 속성은 요소의 내용이 지정한 크기를 벗어난 경우 어떻게 처리할지를 정하는 속성입니다. 네 가지값을 가질 수 있으며 각 값에 따라 요소의 내용이 다르게 표시됩니다.

1. overflow: visible;
기본값입니다. 내용이 지정한 크기를 벗어나도 그대로 표시됩니다. 
예를 들어, 아래의 코드에서는 box 클래스를 가진 div 요소의 너비가 100px, 높이가 100px로 설정되어 있으며, 그 내부에는 content라는 텍스트가 포함되어 있습니다. 이 때, overflow 속성을 visible로 설정하면, content 텍스트가 box 요소의 크기를 벗어나도 그대로 표시됩니다.

2. overflow: hidden;
내용이 지정한 크기를 벗어난 경우 숨김처리 됩니다. 크기를 벗어난 부분은 표시되지 않습니다.

3. overflow: scroll;
내용이 지정한 크기를 벗어날 경우 스크롤바가 표시됩니다. 

4. overflow: auto;
내용이 지정한 크기를 벗어날 경우 스크롤바가 표시됩니다. 벗어나지 않은 경우 스크롤바가 표시되지 않습니다.