[CSS] CSS 1장. css Box Model 계단식 및 상속

 

이번 시간에는 HTML을 더욱더 스타일링할 수 있는 CSS에 대해 배워보도롤 하겠습니다. CSS에서 배울 상자 모델, 캐스케이드 및 특수성, flexbox, grid, z-index 같은 CSS 기본사항을 배울것이고, 이러한 기본 사항과 함께 함수, 색상 유형, 그래디언트, 논리적 송석 및 상속에 대해서도 배워볼 것입니다.

 

1.CSS Box Model

 

html에 다음과 같은 코드가 있다고 가정하고 이 코드를 css로 꾸며보겠습니다.

<p>CSS Graph React Model</p>

// css 폴더 생성후 index.css 생성

p {
  width:150px;
  height: 100px;
  padding: 15px;
  border: 1px solide red;
}

박스 모델은 CSS의 핵심 기반이며, 작동 방식, CSS의 다른 측면에 의해 CSS가 영향을 받는 방식, 그리고 이를 제어하는 방법(중요함)을 이해하면 보다 예측 가능한 CSS를 작성하는 데 도움이 될 것입니다.

 

블록 및 인라인 박스

 

css에는 크게 두 가지 박스(block & Inline) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페ㅔ이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다. 박스가 블록으로 정의되면 다음과 같이 작동합니다.

 

• 박스는 인라인 방향으로 연장되어 상위 콘테이너에서 사용가능한 공간을 채우고 대부분 100%로 채우면서 상위 콘테이너 너비만큼 된다는 뜻
• 박스는 새 줄로 행갈이를 함
• width 속성과 height 속성이 존중됨
• padding 과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려남

디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(h1, p)와 같은 요소는 모두 기본 값으로 block을 사용함. 박스가 인라인으로 정의되면 다음과 같이 작동함

• 박스는 새 줄로 행갈이 X
• width 속성과 height 속성이 사용 X
• padding과 여백, 테두리는 다른 인라인 박스들이 당 박스로부터 멀어지지 않게함
• a 태그, <span>, <em> 및 <strong> 태그는 기본적으로 인라인으로 표시

내부 및 외부 디스플레이 유형

 

박스에는 내부 디스플레이 유형도 있으며 당 박스 내부의 요소를 배치하는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 일반 대열로 배치되며, 블록 및 인라인 요소와 마찬가지로 작동합니다. 그러나 flex와 display 값을 사용해 내부 디스플레이 유형을 변경할 수 있음

 

서로 다른 디스플레이 유형의 예

 

세 개의 서로 다른 HTML 요소가 있다고 가정하며, 외부 디스플레이 요소는 모두 block입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락으로 브라우저는 이걸 block box로 렌더링하며 단락은 새 줄에서 시작되고 확보된 너비 전체까지 확장될 것입니다.

 

두 번째는 display:flex를 사용해 배치된 목록으로, 컨테이너 내부의 항목의 대해 플렉스 레이아웃을 수립하나, 목록 자체는 블록 박스고 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 진행합니다.

 

바로 아래 block  수준의 단락을 하나 갖고 있고 그 안에 두 개의 <span> 요소가 있습니다. 이들 요소는 보통 inline 이나 그 중 하나에 블록 클래스가 있고, 우리가 그걸 미리 display:block으로 설정했습니다.

<p>I am a paragraph. A Short one</p>
    <ul>
        <li>Item One</li>
        <li>Item Second</li>
        <li>Item Third</li>
    </ul>
<p>I Am Another Paragraph, Some of the <span class="block">Words</span>have been wrapped in a <span>span Element</span></p>

p, ui {
    border: 2px solid rebeccapurple;
    padding: .5em;
}

.block, li {
    border: 2px solid blue;
    padding: .5em;

}

ul {
    display:flex;
    list-style: none;
}

.block {
    display:block;
}

 

다음은 inline 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락 <span>는 기본값으로 인라인으로 새 줄 행갈이를 강제하지 않고 inline-flex로 설정된 <ul> 요소도 갖고 있으며, 이는 몇 가지 플렉스 항목 주변에 인라인 박스를 생성합니다.

 

마지막으로 display:inline으로 설정된 두 단락이 있습니다. 인라인 플렉스 컨테이너와 단락은 모두 하나의 인라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하진 않습니다.

   <p>I am a paragraph. A Short one
    <span>words</span> have been wrapped in a 
    <span>span element</span>
    </p>

    <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
    </ul>

    <p class="inline">I am a photograph, A Short One</p>
    <p class="inline">I am another paragraph. Also short one</p>

2. 계단식과 상속

CSS가 HTML에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS의 가장 기본적인 개념인 계단식과 우선 순위 및 상속입니다. 이 부분을 알면 코드를 작성할때 덜 고통스러울 수 있습니다.

 

규칙 충돌

 

CSS는 Cascading Style Sheets의 약자로 CSS의 단어를 이해하는 데 있어 첫 번째 단어는 cascading입니다. 어느 시점에서, 프로젝트를 진행할 것인지 요소를 적용해야 할 CSS 가 작동하지 않는다는 것을 알게될 것이며, 일반적으로 계단식(cascde)와 밀접하게 관련된 우선순위(specificity) 개념은 충돌이 발생할때 적용되는 규칙을 제어하는 메커니즘입니다.

 

상속(inheritance)의 개념도 중요한데, 기본적으로 일부 CSS 속성은 현재 요소의 부모 요소에 설정된 값을 상속하나, 일부는 그렇지 않습니다. 또한 예상치 못한 오류가 발생할 수 있습니다.

 

2-1. 계단식(Cascade)

 

스타일 시트 cascade는 매우 간단한 수준에서 CSS 규칙의 순서가 중요하다는 의미입니다. 동일한 우선 수위를 갖는 두 규칙이 적용될 때, CSS에서 마지막에 나오는 규칙을 사용할 것입니다.

 

<h1>This is my heading.</h1>

h1 {
    color:red;
}

h1 {
    /* 마지막에 나오는 규칙 적용 */
    color: blue;
}

 

2-2. 우선 순위(Specificity)

 

우선 순위는 여러 규칙에 다른 선택지가 있지만, 여전히 동일한 요소에 적용될 수 있는 경우, 브라우저가 어떤 규칙을 적용할지 정하는 방법으로, 기본적으로 선택자의 선택이 얼마나 구체적인지 측정합니다.

 

<h1 class="spec">This is My Heading.</h1>

.spec {
    color:red;
}

h1 {
    color:blue;
}

 

2-3. 상속(Inhheritance)

 

상속은 부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속되며, 일부는 그렇지 않습니다. 예를 들어 요소의 색을 font-family로 설정하면, 다른 색상 및 글꼴 값을 직접 적용하지 않는 한, 해당 요소 내부의 모든 요소에도 해당 색상 및 글꼴로 스타일이 지정됩니다.

    <p>
        At the body has been set to Angry Man Frost Man Frost Whatever Focus.
    </p>
    <p>
        Children Bite Ban Pice Spice Chance Choice Coast Quest <span>Quit</span>
    </p>

body {
    color:blue;
}

span {
    color:#000;
}

 

참고 자료

CSS 구성 블록 - Web 개발 학습하기 | MDN

CSS-STR

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

`