코딩 기록들

[FrontEnd] 6. Margin collapsing, Width & Height, Display & Visibility 본문

FrontEnd Programming

[FrontEnd] 6. Margin collapsing, Width & Height, Display & Visibility

코딩펭귄 2024. 3. 7. 12:47

Margin collapsing

- Margin 을 가진 엘리먼트가 나란히 있을 때, 중첩된 Margin은 제거된다(Margin이 더 큰 쪽으로 덮어씌운다)

 

Width & Height

- Inline Element를 제외한 Block Element, Inline-Block Element의 폭(width)과 높이(height)를 지정할 수 있다

- 높이와 너비는 항상 부모 Element의 영역 내에서만 할당된다. (부모 width가 300px이라면, 자식의 width에 100% 주면 300px이 된다)

width와 height는 Percent로도 값을 지정할 수 있다

 

- width 는 100%를 줄 수 있지만, height는 100% 주기 힘들다

- 만약, div의 높이를 100%로 설정하면? : 아무변화도 생기지 않는다 (

body의 높이가 컨텐츠의 길이만큼'만' 차지하고, body의 높이를 100%로 설정해도, html의 높이가 컨텐츠의 높이만큼만 차지하기 때문!)

  --> html을 100%로 맞춰줘야 브라우저의 100%를 쓴다 (아래이미지)

 

 

 

Calc()

heieght 계산시 calc 이용하면 깔끔하게 처리할수있다!

전체길이 - 마진 - header - paginator - footer 해주면(빼기연산) 전체화면이 맞춰지게된다

https://developer.mozilla.org/ko/docs/Web/CSS/calc

/* property: calc(expression) */
width: calc(100% - 80px);

 

 

 

 

Display & Visibility

Block display tag

- 태그를 쓰면 전체줄을 다 차지함 ex.div, p, ol, li, headline 태그

- width를 주지않더라도, element가 전체의 길이(너비)를 차지함(tag = tag(width:100%) = tag(width auto))

 

 

Inline display Tag -> 잘 안씀

- 엘리먼트가 자기 태그의 내용(컨텐츠영역)만큼만 폭 차지함 : block tag와 정 반대!

- width, height 적용할수 없음 (-> 잘 안씀)

- ex.span

- element가 더 있다면 옆으로 붙음 ( 길이가 벗어나게되면 밑줄로 떨어짐)

- block 과 달리 한줄에 정보들 나열

 

Inline-block display tag

- element가 컨텐츠의 영역만큼 차지함

-  'width & height' 를 주고싶은 Inline-block

- ex. button, label, textarea

- block 과 달리 한줄에 정보들 나열

  • display: inline-block;
  • vertical-align: top;

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display 실습</title>
    <link rel="stylesheet" href="./styles/display.css">
</head>
<body>
    
    <h1>Block elements는 부모엘리먼트 내에서 한줄을 모두 차지하는 태그다.</h1>
    <div>Div</div>
    <p>P</p>
    <ul>
        <li>UL:LI</li>
        <li>UL:LI</li>
        <li>UL:LI</li>
    </ul>
    <ol>
        <li>OL:LI</li>
        <li>OL:LI</li>
        <li>OL:LI</li>
    </ol>

    <!--일직선 줄그어주는 태그 : <hr /> -->
    <hr /> 

    <h1>Inline elements</h1>
    <p>Inline Element는 컨텐츠의 길이만큼 공간을 차지한다</p>
    <p>여러개의 Inline Element가 한공간에 있을경우, 옆으로 나열된다</p>
    <p>Inline Element는 width, height를 적용할 수 없다</p>
    <span>SPAN</span>
    <span>SPAN</span>
    <span>SPAN</span>
    <span>SPAN</span>
    <span>SPAN</span>
    <span>SPAN</span>

    <!-- div안에 여러개의 span이 잔뜩 있으면, 밑공간(줄)로 떨어진다  -->
    <div>
        <span>SPAN</span>
        <span>SPAN</span>
        <span>SPAN</span>
        <span>SPAN</span>
        <span>SPAN</span>
        <span>SPAN</span>
    </div>

    <hr />

    <h1>Inline-Block elements</h1>
    <p>Inline-Block element는 Inline Element와 동일하다.</p>
    <p>단, width 와 height를 조정할수있는 차이가 있다.</p>
    <button>Button</button>
    <label>레이블</label>
    <input />
    <textarea></textarea>

</body>
</html>

 

#display.css

/* block element
사이즈를 줄여도 나머지 공간은 마진으로 채워짐 */
div{
    width:50%;
}
p{
    width:10%
}

/* inline element */
span{
    width:1000px;
    height:1000px;
}

/*inline-block element*/
button{
    width:300px;
    height:200px;
}

 

결과)

 

 

 

'FrontEnd Programming' 카테고리의 다른 글

[FrontEnd] 9. Position, Background  (3) 2024.03.08
[FrontEnd] 7. Text decoration, Box align, Pseudo class & Pseudo element  (0) 2024.03.07
[FrontEnd] 5. CSS  (3) 2024.03.06
[FrontEnd] 4. HTML 공통 Attributes, 공통Event  (0) 2024.03.06
[FrontEnd] 3. HTML 태그 상세2(video, audio, sementic)  (0) 2024.03.06
'FrontEnd Programming' Related Articles more