마크업이란 컨텐츠의 의미,역활을 표시하는 것을 말하며
마크업하는데 쓰이는 언어가 마크업언어인 html이다
hyper
text
markup
language
]]>ul(unordered list - 순서없는 목록)
.표시
ul은 li들의 묶음
여러개의 li들이 있는 경우 ul로 묶어준다..단순히 묶음을 의미
컨텐츠를 포함하고 있는 것은 li이고 ul보다 더 중요하다.
li는 하나만 있을 수 없으며, ul은 하나의 li만 포함하는 경우는 없다.
ol(ordered list - 순서있는 목록)
1,2,3 표시
<h2>실시간 인기검색어</h2>
<ol>
<li>이선희</li>
<li>아이유</li>
<li>겨울왕국</li>
<li>에이핑크</li>
</ol>
li는 list,목록,항목
동급의 비교대상들을 li로 처리한다...
단일항목을 li로 처리할 수 있다,예를 들어 메뉴의 각 항목(회사소개,제품소개,고객센타)같은 경우는
단일컨텐츠이다
다중항목인 경우에도 li로 처리할 수 있다.
예를 들자면 인덱스의 news항목 갤러리항목등의 경우는
제목과 게시물항목등 여러개의 마크업된 컨텐츠가 들어있다 .
이 경우 전체를 하나의 항목을 보고 li로 마크업할 수 있는 것이다
]]>문서연결태그 <a> anchor 닻
외부링크:다른html문서 연결.이동
<a href="ooo.html" target="_self">텍스트</a>
href="불러올 문서"
target="보여줄 창지정" : _self:현재 문서가 열린창에 ,_blank : 새창에
내부링크:현 문서내의 특정위치로 연결.이동
<a href="#top">ooo</a>
#top : id가 top인 요소(마크업태그)
내부링크사용시 id를 이용한다
]]><img src="이미지명.확장자" alt="이미지대체텍스트" />
이미지태그는 쌍태그가 아닌 단독태그이며 이럴때는 <img />처럼 끝에 /를 표시한다
alt 는 대체텍스트로 이미지가 없을시 나타나는 글자로서 이미지에 대한 설명을 쓰면됨
이미지경로
1. 절대경로 : http://~ 시작하는 경로
2. 상대경로 : htm문서를 기준으로 이미지의 경로 지정
- htm문서와 같은 곳에 있을때 : src="화일명“
- htm문서의 하위폴더에 있을때 : src="폴더명/화일명“
- htm문서의 바깥에 있을때 : src="../화일명“
다시한번 요약하면 설계도인 htm문서를 기준으로 이미지의 위치 기재
<head></head> 사이에는 문서에 대한 정보가 기재됨
<body></body>사이에는 보여지는 내용물들이 담긴다
마크업태그 - 블럭태그 / 인라인태그
/block tag
종류 : div,h1~h6,ul,li,ol,p
블럭은 사각형태를 말함
순차적으로 쌓임.옆에 다른 대상이 못옴(한층을 다 사용).기본적으로 꽉참
,너비,높이가 지정된다(여백을 줄수 있다)
/inline tag: 인라인태그 / 한줄에 배치가 됨,너비,높이(여백) 지정해도 적용되지 않음.
a,img,span,strong,em....
inline태그에 너비,높이(여백)을 적용하려면
display:block를 적용
컨텐츠(내용)에 스타일 적용단계
1html에서
스타일 적용할 컨텐츠의 마크업명확인(경로..)
2 css파일에
경로 마크업명{ } 입력
3 {}안에 속성:값 입력
스타일(속성)적용 순위
http://cafe.naver.com/leesunhan/1010
1.위치설정
2. 글자스타일 설정
3 배경,테두리...
]]>수평중앙정렬
블럭태그 margin:0 auto; --> 대상(블럭태그) 자체가 중앙배치됨 (필히 블럭태그의 너비지정해야)
인라인태그 text-align:center; --> 대상안에 있는 인라인태그(텍스트나이미지)가 대상의 중앙에 배치가 됨
]]>div#wrap{
width:1000px;
margin: 0 auto;
}
h1{
text-align:center
}
2 ------------------------------------------------
display:table과 margin:0 auto를 이용하여 수평중앙정렬하기
/* display:table를 사용하면 블럭태그의 너비가 내용물만큼 자동줄어든다*/
--> ie8이하에서는 table명령이 안먹힌다..(위의 것을 사용해야 함)
<style type="text/css">
*{
margin:0;
padding:0;
}
ul.menu{
list-style:none;
border-top:2px solid gray;
height:100px;
outline:1px solid green;
margin:0 auto;
display:table;
}
ul.menu li{
float:left;
text-align:center;
border:1px solid red;
width:200px;
}
</style>
<ul class="menu">
<li>회사소개</li>
<li>제품소개</li>
<li>고객센타</li>
<li>주문상담</li>
<li>고객센타</li>
<li>주문상담</li>
</ul>
3--------------------------------------------------------------------------------------------------
ul의 너비를 줄이지 않고 li들을 중앙정렬하려면
li{inline-block;} ul{text-align:center;}
일단 확인하시고...
<style type="text/css">
*{
margin:0;
padding:0;
}
ul.menu{
list-style:none;
border-top:2px solid gray;
height:100px;
outline:1px solid green;
text-align;center;
}
ul.menu li{
display;inline-block;
text-align:center;
border:1px solid red;
width:200px;
}
</style>
<ul class="menu">
<li>회사소개</li>
<li>제품소개</li>
<li>고객센타</li>
<li>주문상담</li>
<li>고객센타</li>
<li>주문상담</li>
</ul>
4-----------------------------------------------------------------------------------------------------그런데 위의 것은 ie8이하에서는 작동되지 않는다
처리방법은 li{display:inline; zoom:1;} ul{text-align:center;}
<style type="text/css">
*{
margin:0;
padding:0;
}
ul.menu{
list-style:none;
border-top:2px solid gray;
height:100px;
outline:1px solid green;
text-align;center;
}
ul.menu li{
display;inline;zoom;1;
text-align:center;
border:1px solid red;
width:200px;
}
</style>
<ul class="menu">
<li>회사소개</li>
<li>제품소개</li>
<li>고객센타</li>
<li>주문상담</li>
<li>고객센타</li>
<li>주문상담</li>
</ul>*** li를 display:inline이나 display:inline-block로 처리시 li사이의 간격이 발생함
없애려면
ul에 font-size:0으로 지정하면 된다. ***
마크업태그 - 블럭태그 / 인라인태그
/block tag
종류 : div,h1~h6,ul,li,ol,p
블럭은 사각형태를 말함
순차적으로 쌓임.옆에 다른 대상이 못옴(한층을 다 사용).기본적으로 꽉참
,너비,높이가 지정된다(여백을 줄수 있다)
/inline tag: 인라인태그 / 한줄에 배치가 됨,너비,높이(여백) 지정해도 적용되지 않음.
a,img,span,strong,em....input
inline태그에 너비,높이(여백)을 적용하려면
display:block를 적용
블록 레벨 요소 (block-level elements)
- 블록레벨요소는 자신만의 영역을 가지고 있음.
- 영역을 직접 정할수 있음 (width, height, margin, padding 값 가능)
- 블록 레벨 요소 안에 인라인요소, 텍스트요소 포함가능
- div, p, h1,h2,h3,h4, dl, ul, li, ol, table 등
인라인 요소(inline elements)
- 인라인요소는 안에 있는 값의 크기에 따라 영역이 결정됨.
- 인라인 자체의 영역은 정할수 없음(width, height, margin 값 없음. padding 값은 가능)
- 인라인 요소 안에 텍스트요소는 가능하나 블록 레벨 요소 포함 불가능.
- span, strong, img, a ,iframe등...
]]>html문서(*.html) html언어로 만들어진 문서 + 컨텐츠(text,image) -> 웹페이지
html문서 - 확인
한글문서(한글)
- 명령문 -
html 언어:규칙,문법,단어(태그)
hyper
text
markup
language (언어)