블록레벨 / 인라인 요소
-
블록 요소 : 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
표의 열들을 공통적으로 정의 하는 컬럼 그의 집합
0개의 댓글
관련 채용 정보
