<p></p> 태그 : 단락
paragraphs
단락의 전 후에 빈줄이 추가된다.
만약 <p> </p> p 테그안에 그냥 전부 다 넣어버리면 줄띄움이 안된다. <p> 테그를 여러개 써줘야 줄바꿈이 된다.
<br> 태그 : 강제 줄바꿈 ( line break)
닫는 태그가 없다.
<pre></pre> : previously formatted text
프로그래머가 입력한 그대로 화면에 표시하는 태그
내가 입력한 그대로 띄어쓰기 줄바꿈등등이 전부 그대로 나타나게 한다.
<h1></h1> ~ <h6></h6> 태그 : heading
글자크기가 지정되어 있다. 자동 줄바꿈이 적용된다.
텍스트 서식
<b> </b> 볼드체
<i> </i> 이탤릭체
// 참고 : <b>와 <i> 태그는 다른 모든 태그가 적절하지 않은 경우에만 사용 emp 더추천
<strong></strong> 텍스트 강하게
<em></em> 텍스르 강조 emphasize
<code> </code> 텍스트가 코드임을 표시한다.
<sup> </sup> 위첨자 (superscript)
<sub> </sub> 아래첨자 ( subscript )
<hr> horizon
닫는 태그가 없다.
수평선 그리기
특수문자
  ; non-breaking space 의 약자로 공백 문자 한개
< <
> >
" "
& &
리스트 : 항목 나열하는데 사용
<ul></ul> : 번호없는 리스트 (unordered list) •
<ol></ol> : 번호 있는 리스트 ( ordered list) 1, 2, 3
<dl></dl> : 정의 리스트 ( definition list )
리스트 항목 안에도 텍스트, 이미지, 링크 , 다른 리스트를 넣을 수 있다.
위에 있는 세개 안에 <li></li> 를 넣으면 된다.
<dl></dl> : 정의 리스트 ( definition list)
문단부분이 <dl></dl>
그 안에 큰 정의 <dt></dt>
그안에 내용 <dd></dd>
<a></a> 하이퍼링크(또는 링크)
<a href= "http://www.google.com" target="_balnk"> 구글 방문 </a>
href 속성은 링크의 목적지를 나타낸다.
구글방문은 클릭하는 부분
target="_balnk" 타겟 속성이 "_blank" 이므로 링크는 새로운 탭에서 열린다.
target 속성
각링크가 클릭되었을때 , 새로운 페이지가 어디에 열리는 지를 지정
1) _blank 새로운 윈도우에서 새로운 페이지를 연다.
2) _self 현재 윈도우에서 새로운페이지를 보여준다
3) _parent 부모 프레임에 새로운 페이지를 적재한다.
4) _top 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다.
id 속성
<a href="#section1"> 참고사항으로 가려면 여기를 클릭하세요</a>
<br><br><br>
<br><br><br>
<br><br><br>
<a id="section1">참고사항</a>
동일한 페이지 안에서도 점프 할 수 있는 기능
ex)
<h1>이순신</h1>
<a href="#lee1">어린시절</a>
밑에 글부분에
<h1 id="lee1">어린시절</h2>
이렇게 쓰면
웹에 표시될때 위에 어린시절이 링크로 걸려있고 그것을 클릭하면 밑에 부분에 있는 별칭 부분이 있는 부분으로 이동한다.
<img> 태그
<img> 태그는 이미지를 웹페이지에 삽입할 때 사용한다.
이미지를 웹페이지에 삽입할 때 사용한다.
<img src="seolak.jpg" width="300" height="230">
src 속성은 이미지 파일이름을 지정한다
width 가로크기
height 세로크기
alt 속성 (<img> 태그에서 )
브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에 그림대신 표시되는 대체 텍스트(alternate text)를 지정
예시 : <img src="house.jpg: alt="A Nice House">
외부 css 스타일 적용 : 틀 사용하기
<link rel="stylesheet" href="../css/public.css">
미리 만들어놓은 틀을 사용하는것
px
px는 % 로 사용하는 것과 다르게 px는 화면이 줄거나 늘려도 변함이 없다.
padding : 안쪽에 여백 주는것
( ex> padding-left : 50pxl solid green; )
margin : 바깥쪽에 여백 주는것
(ex) margin : 50 px; )
border
블럭요소와 인라인 요소
-블럭요소 : 화면의 가로 길이를 끝까지 차지하는 요소
ex) 자동으로 줄이바뀜
ex) h1~h6 , p , div, hr, pre, br 등등
-인라인요소 : 지정한 범위만큼만 차지한다.
ex) 자동으로 줄이 바뀌지 않는다.
ex) sup, sub, span b, i , em, strong , img
float : **블럭요소를 옆으로 배치하기 위해서 **가로길이를 조절해 줘야한다.
left or right 스타일을 지정한다.
예시
div{
float : left;
}
범위 크기 : div > p > span
auto 크기를 auto 로 지정해 줄 수 있다.
ul 번호 없는 리스트
ex)
<ul>
<li> <li>
<li> <li>
<li> <li>
</ul>
ol 번호 있는 리스트
li 는 listitem
: 텍스트. 이미지, 하이퍼링크 , 다른 리스트
id 사용하기
<div id ="dd">
</div>
해주고 위에 스타일 부분에
<style>
##dd{
}
</style>
요렇게 ##id이름 이렇게 해주면 그 아이디부분만 변경이 된다.
예시
div를 아래에 써주고
위에 <style></style> 부분에
div{
border : 1px solid blue;
//겉에 선
width : 150px;
//너비
height : auto;
//높이
padding : 10px;
//선 안쪽에서 남는부분
margin : 5px;
//선 바깥쪽 남는부분
float : left;
}
이렇게 적어주면 그부분만 바뀜
링크걸때 : 이미지로 vs 글자로
-글자로 링크걸기
<a href="https://www.naver.com/" target="_blank">네이버</a>
-이미지로 링크걸기
<a href="https://www.naver.com/" target="_blank"><img src="../images/네이버.jpg"></a>
링크 꾸미기 - 서로다른
<style>
a:link{ ( 처음)
color : red;
text-decorationL line-through;
}
a:visited{ ( 이미 방문된애 )
color : green;
text-decoration : none;
}
a:hover{ ( 마우스 올려놓을때 )
color : gray;
font-size : 1.5em;
text-decoration : underline;
}
a:active{ (누르는순간)
color : blue;
background : pink;
text-decoration : overline;
}
</style>
링크 꾸미기 - 전체 링크
a{
border : 1px solid blue;
margin : 10px;
margin-top : 20px;
padding : 10px;
letter-spacing: 20px;
}
letter-spacing 은 글자간격이다.
clear : both ;
float : left 속성이 만약 위에 있었다. 그것을 내가 지금부터 쓰고 싶은애는 적용 하기 싫을때
cleat : both ; 를 해준다. 이것은 블럭요소에서만 가능하다.
ex)
pre {
float : left;
}
div {
cleat : both ;
{
min-width : 1000px : 화면크기에 상관없이 내용 고정
: <style>태그 안에 써주면 전체 페이지에서 페이지를 작은창 또는 큰창으로 늘리고 줄여도
원래있던 애의 크기는 줄어들고 늘어나지 않고 늘 일정하다. 일반적인 페이지처럼
ex )
<style>
body{
min-width : 1000px
}
</style>
글씨 옆에 링크가 걸린 이미지를 넣어주기
<h2> 아메리카노 5000원
<a href="아메리카노.html">
<img src = "../images/아메리카노.jpg" alt="아메리카노">
</a>
</h2>
-<h2>는 블럭요소라서 글씨 옆에 그림을 넣어주려면 <h2> 태그 안에다 써주어야 한다.
<a href="아메리카노.html"> : 얘는 html 파일을 새로 만들어줘서 이미지에 링크를 만들고 그 링크를 따라가면 새로운 페이지로 가게 해주려고 하는것이다. 아메리카노 제목의 html 을 만들어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img {
width : 200px
height : 200px
}
</style>
</head>
<body>
<h2>아메리카노</h2>
<img src="../images/아메리카노.jpg" alt="아메리카노">
<img src="../images/카페라떼.jpg" alt="카페라떼">
</body>
</html>
-> 아메리카노 라는 파일이름의 html 파일 형식의 새로운 페이지를 제작했다.
이미지 태그를 넣어준다.
table
<table border = "1" > 꼭 써줘야 한다.
- 1또는 0 인데 0은 의미가 없다.
행을 표현 : <tr> ..</tr> row
제목 데이터 : <th>.. </th>
하나의 데이터 : <td> ... </td>
caption : 테이블의 제목
여러개의 table의 스타일을 각각 다르게 지정하기 위해서 id 를 부여한다.
table th { } 는 table 의 후선 th 를 선택한다는것
table > {} 는 table의 자식을 선택한다는 것
table 안에 있는 각각 데이터들 ( th, td ) <style> 주기
<style>
td, th {
width : 150px;
height : 50px;
text-align : center;
}
th {
background : lightblue;
}
</style>
table{
border-collapse : collapse ;
}
안적으면 기본이 border-collapse : separate 로 되어 있다.
separate 를 적어줄때 : 안에 있는 <td>가 각각 하나로 인식되서 칸각각이 줄이 두줄생기는데
collapse 를 적어줄때 : 칸과 칸사이 <td> 가 줄이 한개만 생긴다.
<table id="first" border="1">
border 는 없으면 안쪽에 테이블 선을 안만들어줌
text-align : center;
안에 있는 텍스트를 중간에 배치해준다.
ex)
body {
margin-left : 100px;
}
table 에 이름과 id 부여하기
<table id="first" border="1">
<caption>VIP리스트</caption>
<tr>
<th><th>
<td><td>
</tr>
<caption> 태그를 넣어주면 table의 제목을 부여해 주는것
<id="first"> 라고 하면
table id="first" 는 table의 이름을 부여해준다.
이름을 부여받은거로 스타일에서 꾸며줄 수 있다. , table의 제목도 꾸며줄 수 있다.
<style>
#first {
border : 5px solid red;
}
#first th {
background : light green;
}
#first caption {
font-size : 2.0em;
caption-size : bottom;
}
</style>
colspan, rowspan : 열과 행의 병합
-rowspan 행병합 (row span) : 행이 병합되는 것 . 세로로 병합
-colspan 열병합 (column span) : 열이 병합되는 것 . 가로로 병합
ex)
<tr>
<td colspan ="2"> 1 </td> 가로로 2개였던거가 1개로 병합된다.
: colspan은 가로로 병합
</tr>
ex)
<tr>
<td colspan="2" rowspan = "2"> 1 </td>
가로로 (colspan) 2개가 1개가 됬고 밑에 줄까지 (rowspan) 이 병합된다. 여기서 주의할 점은 아래로 row 병합이 됬기 때문에 아래에서는 써주지 않아야 한다. 만약 써주면
다음 <tr></tr> 부분 이상해 질 수 있다.
</tr>
iframe
: 웹페이지 안에서 다른 웹 페이지를 표시하고자 할 때 사용한다.
main 창에 inner 창이 있는것
<body>
1. html 파일안에( 실제적으로 보여주는 페이지) html 파일을 포함시킨다.
<iframe name ="ff" src="myhome.html"> </iframe>
name="ff" 로 iframe 의 이름을 설정해둬서 <style> </style> 안에서 뭔가를 꾸며줄것.
src="myhome.html"
html 문서 ( 우리가 계속 쓰는 문서 ) 중에 파일이름이 myhome으로 저장된 그 html 문서를 iframe 자리에 보여주겠다는 뜻
2. iframe의 name 의 값을 a 링크의 target 속성으로 지정한다.
<a href="카푸치노.html" target="ff">카푸치노</a>
기본적으로 iframe 자리 ( 우리가 지금작업하고 있는 홈페이지) 에는 "myhome.html" 이 입력되는데
2번째에 있는 글씨 ( 2번째는 링크니까 ) 를 누르면 iframe에 "카푸치노.html " 파일이
나온다는 뜻
</body>
3. <style></style> 안에서 iframe 크기를 지정하면 된다.
ex)
iframe {
width : 100%
height : 500px; S
}
<div> 와 <span>
html 요소는 <div> 와 <span> 을 이용해 묶을 수 있다.
<div >는 자체적으로 특별한 의미가 없으며 block 수준의 요소
하나의 줄을 전부 차지함
<span> 은 자체적으로 특별한 의미가 없으며 inline 요소로서 텍스트를 묶어 스타일을 적용할 때 사용한다.
인라인 요소는 자신이 필요한 크기만 차지 하는 요소다
inline 요소는 크기를 지정할 수 없다 ( width , height 가 적용 되지 않는다. )
inline 요소일때 block 요소일때 display 속성
span 태그는 inline 요소로 가로 세로 크기가 조절되지 않는다.
크기를 조절하기 위해서 display : inline-block ; 을 이용해서 스타일을 지정한다.
display : block(블럭요소 크기는 바뀌지만 줄이 바뀐다. ), inline(원래대로나온다 굳이 안써도됨 ), none(화면상에서 안보인다.), inline-block (줄이 안바뀌고 크기를 변경하고 싶다. )
ex>
span {
display : inline-block;
width : 200px;
height : 50px;
margin-top : 15px;
}
<div></div> 요소
body {
min-width : 1000px;
}
댓글
댓글 쓰기