🔎 HTML (5-2)

서가희·2022년 4월 5일

HTML

목록 보기

6/6

1. 블록 레벨 요소

블록요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소들을 말함.
블록요소를 사용하면 라인이 바뀜.
블록요소는 블록요소와 인라인요소를 모두 포함할 수 있음(내가 헷갈렸던 것).
대표적인 블록 요소는 <article>, <header>, <nav>, <section>, <div>

2. 인라인 요소

인라인 요소는 컨텐츠 자신의 크기 만큼 영역을 가지는 요소를 말함.
인라인 요소들은 인라인 요소만 중첩이 가능.
인라인 요소의 정렬은 텍스트 정렬의 영향을 받음.
대표적인 인라인 요소로는 span, strong 등

<style>
        p {
            display: block;
            background-color: red;
        }
        span {
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <div class="one">
        <span>hello world</span>
        <span>hello world</span>
    </div>
</body>

블록요소 VS 인라인 요소

블록요소는 높이와 넓이 값 조절 ⭕ , 인라인 요소는 높이와 넓이 값 조절 ❌

인라인 요소는 높이와 넓이 값 조절이 안됨 👉 <display: block > , <display: inline-block > 을 사용

`display: inline-block`

높이 넓이 조정하나 옆으로 붙어 있고 싶을 때 사용

<style>
  p{
    display: block;
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
  }
  span{
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: teal;
  }
</style>
<body>
    <p>hello world</p>
    <span>hello world</span>
    <span>hello world</span>
</body>

😲 inline 요소의 문제점

span 박스들 사이의 공간이 생긴 이유는 ? span태그들 사이의 엔터키 때문에 발생

<body>
    <p>hello world</p>
    <span>hello world</span><span>hello world</span>
</body>

하지만 해결하기 위해 이런식으로 코딩은 ❌❌❌

👍 해결방법

font-size: 0; 일부 브라우저에서 안먹는 경우있음
enter 를 삭제 (like 위 코드 => 좋지못한방법)
-margin을 줌 . 폰트 종류가 달라지면 딱 맞아 떨어지지 않음 (아래 여백문제)
float

<style>
span{
    font-size: 1rem;
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  .one {
    font-size: 0; ✅✅✅
  }
</style>

<div class="one">
      <span>hello world</span>
      <span>hello world</span>
</div>

여백이 달라지는 문제점이 발생 (os 마다 다른 것 가타요)
폰트의 사이즈에 의해 여백이 달라지는 문제

<style>
.one {
	font-size: 0;
}
.two {
    display: inline;
    font-family: 'Rubik Wet Paint', cursive;
}
.three {
    line-height: 1;
    ✅✅ 1 == 16px
}
</style>

<body>
  <p>p</p>
 <div class="one">
  <span>span</span>
  <span>span</span>
 </div>


 <div class="three">
  <span class="two">H</span>ello
  <span class="two">H</span>ello
 </div>

</body>

좋은 방법 아니에요!! 👉 알아가기

☑ 추가 말씀

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <!-- Toast Editor 2.0.0과 의존성 -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  </head>
  <body>
    <!-- 해당 예제는 bootstrap 시간에 했었습니다. -->
    <div id="editor"></div>
    <script>
        const Editor = toastui.Editor;
 
        const editor = new Editor({
            el: document.querySelector('#editor'),
            height: '600px',
            initialEditType: 'markdown',
            previewStyle: 'vertical'
        });
        
        // editor.getHTML()
        // editor.getMarkdown()
    </script>
  </body>
</html>

div 태그이니까 버튼 눌렀을 때 submit 동작 못하는데 정상적으로 submit을 하고 있네 ?
👉 input hidden은 이럴 때 사용!!
input hidden 써서 input에 data 넣어줌. 제출되는 기능을 가져오기 위해 input 가져왔다고 생각하면 될 듯

🙆🏻‍♀️ 회고

요즘 너무너무 피곤하다 ㅠㅠ 흑 컨디션 조절 잘하기 ~.~

서가희

이전 포스트