<![CDATA[프리21교육센타]]> http://www.free21.net/xe/html5_basic ko Thu, 30 Apr 2026 06:39:09 +0900 Thu, 30 Apr 2026 06:39:09 +0900 XpressEngine <![CDATA[div태그(그룹태그,묶음태그)]]> http://www.free21.net/xe/1599 http://www.free21.net/xe/1599 http://www.free21.net/xe/1599#comment
div태그(그룹태그,묶음태그) : 블럭태그(쌓여지는 성질)
 
비슷한 종류,역활,위치의 컨텐츠를 묶어주는 경우에 필요
 
. div의미:division(분할)
. 기본형식 <div></div>
 
. div에 고유이름을 부여 id
. 기본틀만들기(float):상단,좌측,우측,하단 - 배치(css)
 
  css설정하기 : 이름{속성:값;}
 
 
 
/ div의 기본스타일
 
    투명
 
    옆으로 꽉참
]]> Thu, 11 May 2017 12:28:56 +0900 <![CDATA[마크업]]> http://www.free21.net/xe/1595 http://www.free21.net/xe/1595 http://www.free21.net/xe/1595#comment

마크업이란 컨텐츠의 의미,역활을 표시하는 것을 말하며

마크업하는데 쓰이는 언어가 마크업언어인 html이다

hyper

text

markup

language

]]> Wed, 10 May 2017 21:13:13 +0900 <![CDATA[ul,ol태그]]> http://www.free21.net/xe/1594 http://www.free21.net/xe/1594 http://www.free21.net/xe/1594#comment

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>

]]> Wed, 10 May 2017 21:11:13 +0900 <![CDATA[목록태그 li]]> http://www.free21.net/xe/1593 http://www.free21.net/xe/1593 http://www.free21.net/xe/1593#comment

li는 list,목록,항목

동급의 비교대상들을 li로 처리한다...

단일항목을 li로 처리할 수 있다,예를 들어 메뉴의 각 항목(회사소개,제품소개,고객센타)같은 경우는

단일컨텐츠이다

 

다중항목인 경우에도 li로 처리할 수 있다.

예를 들자면 인덱스의 news항목 갤러리항목등의 경우는

제목과 게시물항목등 여러개의 마크업된 컨텐츠가 들어있다 .

이 경우 전체를 하나의 항목을 보고 li로 마크업할 수 있는 것이다

]]> Wed, 10 May 2017 20:59:08 +0900 <![CDATA[링크 태그 a]]> http://www.free21.net/xe/1592 http://www.free21.net/xe/1592 http://www.free21.net/xe/1592#comment

문서연결태그 <a> anchor 닻

외부링크:다른html문서 연결.이동

<a href="ooo.html" target="_self">텍스트</a>

href="불러올 문서"

target="보여줄 창지정" : _self:현재 문서가 열린창에 ,_blank : 새창에

내부링크:현 문서내의 특정위치로 연결.이동

<a href="#top">ooo</a>

 #top : id가 top인 요소(마크업태그)

 내부링크사용시 id를 이용한다

]]> Wed, 10 May 2017 20:57:48 +0900 <![CDATA[이미지 태그 img]]> http://www.free21.net/xe/1591 http://www.free21.net/xe/1591 http://www.free21.net/xe/1591#comment

<img src="이미지명.확장자" alt="이미지대체텍스트" />

 

이미지태그는 쌍태그가 아닌 단독태그이며 이럴때는 <img />처럼 끝에 /를 표시한다

 

alt 는 대체텍스트로 이미지가 없을시 나타나는 글자로서 이미지에 대한 설명을 쓰면됨

 

이미지경로

 

1. 절대경로 : http://~ 시작하는 경로


2. 상대경로 : htm문서를 기준으로 이미지의 경로 지정
- htm문서와 같은 곳에 있을때 : src="화일명“
- htm문서의 하위폴더에 있을때 : src="폴더명/화일명“
- htm문서의 바깥에 있을때 : src="../화일명“

다시한번 요약하면 설계도인 htm문서를 기준으로 이미지의 위치 기재

]]> Wed, 10 May 2017 20:56:31 +0900 <![CDATA[마크업태그 규칙]]> http://www.free21.net/xe/1590 http://www.free21.net/xe/1590 http://www.free21.net/xe/1590#comment .
]]> Wed, 10 May 2017 20:56:04 +0900 <![CDATA[html문서 기본구조]]> http://www.free21.net/xe/1589 http://www.free21.net/xe/1589 http://www.free21.net/xe/1589#comment <!doctype html>
<html>
    <head>
       <meta charset="utf-8">
       <title>기본적인 문서정보</title>
    </head>
    <body>
      내용물
    </body>
</html>

 

   <head></head> 사이에는 문서에 대한 정보가 기재됨
   <body></body>사이에는 보여지는 내용물들이 담긴다

]]> Wed, 10 May 2017 20:46:33 +0900 <![CDATA[마크업태그 분류 : 블럭태그,인라인태그]]> http://www.free21.net/xe/1544 http://www.free21.net/xe/1544 http://www.free21.net/xe/1544#comment

마크업태그 -  블럭태그 / 인라인태그

 

/block tag

종류 : div,h1~h6,ul,li,ol,p

 

블럭은 사각형태를 말함

순차적으로 쌓임.옆에 다른 대상이 못옴(한층을 다 사용).기본적으로 꽉참

,너비,높이가 지정된다(여백을 줄수 있다)

 

/inline tag: 인라인태그 / 한줄에 배치가 됨,너비,높이(여백) 지정해도 적용되지 않음.
                a,img,span,strong,em....

 

inline태그에 너비,높이(여백)을 적용하려면
display:block를 적용

]]> Wed, 26 Apr 2017 16:37:39 +0900 <![CDATA[컨텐츠(내용)에 스타일 적용단계]]> http://www.free21.net/xe/1543 http://www.free21.net/xe/1543 http://www.free21.net/xe/1543#comment

컨텐츠(내용)에 스타일 적용단계

 

1html에서

  스타일 적용할 컨텐츠의  마크업명확인(경로..)


2 css파일에

   경로 마크업명{ } 입력

 

3 {}안에  속성:값 입력

 

 

스타일(속성)적용 순위

 http://cafe.naver.com/leesunhan/1010

1.위치설정

 

2. 글자스타일 설정

 

3 배경,테두리...

]]> Wed, 26 Apr 2017 16:36:29 +0900 <![CDATA[display]]> http://www.free21.net/xe/1542 http://www.free21.net/xe/1542 http://www.free21.net/xe/1542#comment display:inline은 블럭태그를 인라인태그로 변환(수평배치됨.너비X)

display:block는 인라인태그를 블럭태그로 변환(수직배치됨.너비지정)

display:inline-block는 한줄에 배치하면서 크기지정할 수 있다
                          * 사이가 띄어지는 것 해결하려면
                            </li>와 다음<li>사이에 마크업주석배치
]]> Wed, 26 Apr 2017 16:35:22 +0900 <![CDATA[스타일 지정 구문형식]]> http://www.free21.net/xe/1541 http://www.free21.net/xe/1541 http://www.free21.net/xe/1541#comment 스타일 지정 구문형식
마크업이름{
  속성:값;
  }
]]> Wed, 26 Apr 2017 15:17:41 +0900 <![CDATA[수평중앙정렬]]> http://www.free21.net/xe/1540 http://www.free21.net/xe/1540 http://www.free21.net/xe/1540#comment

수평중앙정렬

블럭태그     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으로 지정하면 된다. ***

 

]]> Wed, 26 Apr 2017 14:36:56 +0900 <![CDATA[마크업태그 - 블럭태그와 인라인태그]]> http://www.free21.net/xe/1539 http://www.free21.net/xe/1539 http://www.free21.net/xe/1539#comment

마크업태그 -  블럭태그 / 인라인태그

 

/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등...

]]> Wed, 26 Apr 2017 14:35:41 +0900 <![CDATA[html(문서)이란]]> http://www.free21.net/xe/1346 http://www.free21.net/xe/1346 http://www.free21.net/xe/1346#comment

html문서(*.html) html언어로 만들어진 문서 + 컨텐츠(text,image) -> 웹페이지

 

   html문서 - 확인

   한글문서(한글)
   - 명령문 -  

  

   html  언어:규칙,문법,단어(태그)

   hyper
   text
   markup
   language (언어)

]]> Wed, 05 Apr 2017 11:03:04 +0900 1