image의
src속성은 꼭 와야하는 속성(필수속성)
alt(대체문자) 속성 - 그림 대신 나오는 문자, 이미지가 제대로 동작했을 때는 실행이 안됨
title 속성 - 그림에 마우스를 올리면 뜨는 것(title)
image 에서는 text-align : center;이 지정되지 않음
margin으로 줌 => margin-left : 퍼센트값으로 줄 수도 있음.
margin : 50px auto; =>위아래, 좌우가 서로 묶여서 50px
inline요소에는 auto가 적용되지 않음
block요소에는 auto가 적용됨.
width : 퍼센트 값을 줄 수 있음.
margin : 20px auto; => 2개가 오면 상하는 20px, 좌우의 간격은 자동으로 정렬
margin : 20px auto 40px => 3개가 오면 위, 좌우, 아래 순으로 적용됨
margin : 20px => 1개를 주면 상하좌우 모두 20px 값의 마진을 적용
margin : 위 오른쪽 밑 왼쪽(4개가 나올 때)
한 문단 안에 일부분에 style을 적용하려면 - tag를 줘야 함
모양은 그대로인데 일부분에 tag를 주려면 =><span>태그
block요소: <h1> ~ <h6>, <pre>, <p>
제목을 설정,
(한 줄), 자동으로 줄바꿈
inline요소 : <img>, <span> 등
정해진 크기만큼 차지, 자동으로 줄이 바뀌지 않는다
테두리와 글자 사이의 여백 : padding
테두리 바깥쪽 여백 : margin
body *{ } => body태그의 모든 요소
<br> 강제 줄 바꿈(line break) 태그
<pre> 프로그래머가 입력한 그대로 화면에 표시하는 태그
<h1> ~ <h6> 헤딩(heading): 웹 페이지의 머리기사(headline)
텍스트 서식
<strong>…</strong> 텍스트를 강하게 표시한다. (원래 <b>태그, 현재는 strong태그 권장)
<em>…</em> 텍스트를 강조한다. (원래 <i>태그, <em>태그 권장
<code>…</code> 텍스트가 코드임을 표시한다.
<sup>…</sup> 위첨자(superscript)
<sub>…</sub> 아래첨자(subscript)
<hr> 태그를 사용하면 수평선을 그릴 수 있다.
텍스트 안에서 sytle로 태그를 주고 싶을 때 => span 태그 부여
<b>안녕</b> : 굵게
<strong></strong> : 강하게
font-weight : bold; - style에서 줄때
<i></i> : 기울임꼴
<em></em> : 강조
font-style : italic; - style에서 줄때
<sup> : 위로붙음
<sub> : 아래로 붙음
HTML은 여러 개의 공백이 이웃해 있더라도 하나의 공백으로 간주한다.
따라서 불가피하게 여러 개의 공백을 나타내고자 할 때는 를 여러 개 사용해야 한다.
한 줄 끝까지 적용되는 것 : block 요소
: 공백적용
non-breaking space의 약자로 공백 문자 한 개
< - <
> - >
" - "
& - &
h1,h2,p가 차지하는 영역은 왼쪽끝부터 오른쪽 끝 => 자동 정렬이 안 됨
<a> 하이퍼링크는 다른 문서로 점프할수 있는 단어나 이미지
<a href="http://www.google.com" target="_blank">구글 방문</a>
target은 선택속성
target 속성은 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는 지를 지정
target 설명
_blank 새로운 윈도우에서 새로운 페이지를 연다.
_self 현재 윈도우에 새로운 페이지를 적재한다.
_parent 부모 프레임에 새로운 페이지를 적재한다.
_top 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다.
생략시 self가 기본값.
<img> 이미지 : <img> 태그 사용
<img> 태그는 이미지를 웹페이지에 삽입할 때 사용한다.
src 속성은 이미지 파일 이름을 지정한다.
width, height 속성은 각각 이미지의 가로, 세로 크기를 나타낸다.
alt 속성은 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에, 표시되는 대체 텍스트(alternate text)를 지정
같은 문단에서 이동할 때 => a 태그에 id 사용
<p>안에 <div>가 포함되게 하는 것은 지양
<div>안에 <div>는 가능
<div> : 큰 단락 구분
vp> : 작은 단락 구분
<div>와 <span>
- HTML 요소는 <div>와 <span>을 이용해 묶을 수 있음
- <div>는 자체적으로 특별한 의미가 없으며 블록 수준의 요소로서 모든 HTML 요소를 묶는데 사용함
- <div>는 블록 수준의 요소이기 때문에 하나의 줄을 전부 차지함
- 주로 웹 페이지의 레이아웃을 작성하는데 사용한다.
- <span>은 자체적으로 특별한 의미가 없으며 인라인 요소로서 텍스트를 묶어 스타일을 적용할 때 사용함
- 인라인 요소는 자신이 필요한 크기만 차지하는 요소임
- 인라인 요소는 크기를 지정할 수 없다(width, height가 적용되지 않는다)
<div>은 "divide"의 약자로서 페이지를 논리적인 섹션으로 분리하는데 사용되는 태그
