HTML

이종원·2021년 6월 17일

블록레벨 / 인라인 요소

블록 요소 : div ,h1, p
사용가능한 최대 가로 너비 사용
크기를 지정 할 수 있다
width: 100% height:0 로 시작
수직으로 쌓음
margin padding 위 아래 좌우 사용 가능하다
레이아웃을 잡는 용도
인라인 요소 : span, img
필요한 만큼의 너비만 사용
크기를 지정 할 수 없다 width, height 반응 X
width: 0 heigth: 0 로 시작
수평으로 쌓음
margin padding 위 아래 사용 할 수 없다
텍스트를 잡는 용도

그럼에도 불구하고

인라인요소를 블록요소로 바꾸고 싶다
display : block

블록요소를 인라인요소로 바꾸고 싶다
display: inline

태그 별 기능

block

영역을 설정하는 태그는 보통 block이다

**header :
소개나 탐색을 돕는 그룹 보통 최상단에 존재함
header 안에 header를 못 넣음 또 header, footer는 자식태그가 될수 없다
display : block

footer :
가장 가까운 구획된 콘텐츠 구획화 루트를 푸터를 넣음
보통 가장 하단에 있는 바 footer 또한 자식태그로 header와 footer를 못 넣음
display : block

h1 ~ h6 :
6단계의 문서 제목을 구현함 1이 가장 크고 6이 가장 작음
display : block

main :
문서의 주요 콘텐츠를 설정
display : block

article :
독립적인으로 구분되거나 재사용 가능한 영역을 설정
(기사, 신문, 매거진, 블로그)
일반적으로 h1~h6 를 포함하여 식별
작성일자오 시간을 time datetime 속성으로 작성
display : block

section :
문서의 일반적인 영역을 설정
일반적으로 h1~h6 를 포함하여 식별
display : block

aside
문서의 별도 콘텐트를 설정
(보통 광고나 기타 링크 등의 사이드바를 설정)
display : block

nav
다른페이지 링크를 제공하는 영역을 설정
display : block

address
body article footer 등의 연락처 정보를 제공하는 포함해서 사용
display : block

div
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
의미가 없기에 막 사용 가능함
Division 꾸미는 목적으로 사용
display : block

지금 까지 배운 태그를 코드로 작성해서 구조를 나타내보자 ("jsbin.com")

html 과 간단한 css

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>콘텐츠 구분 예제</title>
</head>
<body>
<header>
  <nav>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
    </ul>
  </nav>
</header>
  
 <main>
  <section>
    <h1>Section</h1>
    <article>
      <h2>Article1</h2>
      <p>Contents....</p>
    </article>
    
    <article>
      <h2>Article1</h2>
      <p>Contents....</p>
    </article>
    
    <article>
      <h2>Article1</h2>
      <p>Contents....</p>
    </article>
  </section>
  
  <aside>
    Aside
  </aside>
 </main>
  
  <footer>
    <address>
      <a href="mailto:asda@gmail.com">asda@gmail.com</a>
      <a href="tel:+8201012341234">01012341234</a>
    </address>
  </footer>
</body>

header {
  background: tomato;
  margin: 10px;
  padding: 20px;
}

header nav ul {
  display: flex;
 
}

header nav ul li {
 list-style: none;
  margin: 10px;
}

main {
  display: flex
}

section {
  width: 70%;
  background: tomato;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box
}

article {
  background: yellowgreen;
  margin-bottom: 10px;
  padding: 10px;
}

aside {
  width: 30%;
  background: tomato;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
}

footer {
  background: tomato;
  margin: 10px;
  padding: 20px;
}

footer address a {
    display: block; 
}

ol ul li
각 항목 li의 정렬된 목록 ol이나 정렬되지 않은 목록ul을 설정
순서가 필요한 경우 ol 순서가 필요하지 않는경우,ul
ol, ul의 자식으로는 li만 포함가능
li 만 단독적으로 사용할수 없으며 ol 또는 ul에 자식으로 포함되어야함

ol, ul {
display : block
}

li {
display:  list-item
}

ol의 속성
reversed : 항목을 역순으로 설정
start : 항목에 매겨지는 번호의 시작 값 (숫자)
type : 항목에 매겨지는 번호의 유형 (a, A, i ,I, 1)

li 의 속성
value: 항목의 순서를 설정(숫자)

보통은 ol 보다는 ul 태그를 많이 사용함 즉 순서에 집착하는 경우가 아니면 그냥 ul을 써도 무방함

dl dt dd
용어dt와 정의dd 쌍들의 영역 dl을 설정
dl은 dd dt만을 포함해야함
키와 값 형태로 표시할때 유용

<dl>
  <dt>용어</dt>
<dd>용어 설명</dd>
</dl>

dl dt dd 스타일링이 까다로워서 잘 안씀
이를 대신해서 ul태그로 사용함

<ul>
<li>
  <dfn>용어</dfn>
  <p>용어 설명</p>
  </li>
</ul>

p
하나의 문단(문장)을 설정
정보통신보조기기 등은 다음 문단으로 넘어갈수 있는 단축키 제공
display: block;

hr /
문단의 분리(주제에 의한)를 위해 설정
대부분의 경우 수평선으로 표시되나 의미적 관점으로만 사용해야 함

pre
서식이 미리 지정된 텍스트를 설정함
텍스트의 공백과 줄바꿈을 유지하여 표시할수 있음
서식과 양식을 그대로 출력함
display:block

blockquote
일반적인 인용문을 설정
display: block;

inline

글씨를 다루는 태그는 보통은 인라인이다

a
다른페이지 같은 페이지 위치 파일 이메일주소 등 다른 url로 연결할수 있게 해주는 하이퍼 링크
display: inline

a 속성
download : 파일을 다운로드하는 용도로 사용됨을 의미
href : 링크 url
hreflang: 링크 url 언어
rel : 현재 문서와의 관계
target : 링크 url의 표시 위치
_self(현재에서 열림) _blank(새로운 탭이 열림)
type : 링크 url의 mime 타입

abbr
약어 지정
tittle 속성으로 설명 가능함

b
문제가 다른 글자의 범위를 설정
특별한 의미를 가지지 않음
읽기 흐름에 도움을 주는 용도로 사용
다른 태그가 적합하지 않는경우 마지막 수단
기본적으로 글자가 두껍게 표시
display: inline

mark
시용자의 관심을 끌기 위해 하이라이팅을 할때 사용
형광펜을 사용하여 관심있는 부분표시하는 것과 같은 의미
기본적으로 노란색으로 표시
display: inline

em
단순한 의미 강조를 표시
중첩 가능
중첩 될수록 강조의 의미가 강해짐
글자가 기울어짐
display: inline

strong
의미의 중요성을 나타내기 위해 사용
기본적으로 글자가 두껍게 표시
display: inline

i
강조 태그 이외 표현할수 있는 적합한 의미가 아닌 경우 사용
평범한 글자 아이콘이나 특수기호 하기 위해 사용
display: inline

dfn
용어를 정의할때 사용
display: inline

cite
창작물에 대한 참조를 설정
(책 논문 영화 등 제목)
display: inline

q
짧은 인용문을 설정
긴 인용문은 blockquote
display: inline

u
밑줄이 있는 글자를 설정]
순수하게 꾸미는 용도
span로 활용이 가능합
display: inline

css 활용이 가능하다면 필요없다

code
컴퓨터 코드 범위를 설정
display: inline

kbd
텍스트 입력장치에서 사용자 입력을 나타내는 텍스트 범위 설정
display: inline

sup , sub
위 첨자와 아래 첨자를 설정
display: inline

time
날짜나 시간을 나타내기 위한 목적으로 사용
display: inline

time 속성
datatime: 유효한 날짜 문자

span
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
display: inline

br /
줄바꿈을 설정
display: inline

del
삭제된 텍스트의 범위를 지정
display: inline

del 속성
cite : 변경을 설명하는 리소스의 url
datetime : 변경이 일어난 유효한 날짜 문자

ins
새로 추가된(변경된) 텍스트의 범위를 지정
display: inline

ins 속성
cite : 변경을 설명하는 리소스의 url
datetime : 변경이 일어난 유효한 날짜 문자

표와 양식

table, tr, th td
데이터표 table의 행(줄/ tr)과 열(칸, 셀(cell)/ th td)을 생성
display: table
display: table-row 줄
display: table-cell 칸
예)

<table> //표영역
<t> // 줄
<th>타입</td> // head 칸
<th>값</td>
</tr>
<tr>
<td>알파벳</td>
<td>A</td>
</tr>
<tr>
<td>숫자</td>
<td>5</td>
</tr>
</table>

th 속성
abbr: 열에 대한 간단한 설명
headers : 관련된 하나 이상의 다른 머리글 칸
colpan : 확장하려는 열의 수
rowspan : 확장하려는 행의 수
scope : 자신이 누구의 머리글 칸 인지 명시

td 속성
header: 관련된 하나 이상의 다른 머리글 칸
colpan : 확장하려는 열의 수
rowspan : 확장하려는 행의 수

caption
표의 제목을 설정
열리는 테이블 태그 바로 다음에 작성해야함
테이블당 하나만 가능

colgroup, col
표의 열들을 공통적으로 정의 하는 컬럼 그의 집합

이종원

이전 포스트

반응형 웹(미디어 쿼리)

다음 포스트

HTML

블록레벨 / 인라인 요소

block

inline

반응형 웹(미디어 쿼리)

HTML

0개의 댓글