Html&CSS/html4&css

0210_ 기본 태그 _Html4

.Epona. 2020. 2. 11. 04:06



#중요#
* 블록요소 / 인라인 요소 구분 
>>CSS, 크로스 브라우징 할때 알아야됨


* H 태그 = 제목 태그
 -H1 : 회사 로고 
 한국은 보통 회사 로고가 H1으로 태그 되어있음
 외국은 슬로건에 달기도 함
 -H2 : GNB
 -H3 : 탬 메뉴 

##블록요소 / 인라인 요소 ##

<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->

 

 <style type ="text/css">
  
    p{background-color: green}
    span{background-color: orange}
 </style>

 < /head>

<body>
    
   < p> 블록요소입니다.</p>
   < span>인라인요소입니다.</span>



# < ul>태그 :  순서가 필요 없는 목록

# < ol> 태그 : 순서가 있는 목록 (예: 실시간 순위 , 인기 도서 등)
        >> 거의 쓸일 없음
# < dl> : 어떤 용어에 해당하는 설명 (예: 네이버 사전 /)
 >>>> ul, li 태그 많이 씀

< p> 태그 : 문단 태그
  >>거의 쓸일이 없음 ( 카피라이트)
< br/> 태그 : 강제로 줄 바꿈  

태그 열고 닫고 없는 태그들 
br태그
메타 태그 
이미지 태그
회원가입할때 쓰는 인풋 태그

 

#이미지 태그

#링크 태그 : a 태그
 >> href는 a태그 에서만 씀

타이틀 : 마우스 오버시 툴팁
타겟 : 
 - _blank 새창으로 열리게 
 - _self 자기자신(기본값)
 - _parent, _top : 잘 안씀

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>-</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="keywords" content="-" />
    <meta name="description" content="-"/>
    <meta name="author" content="-"/>

        
<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->      
        
        
<style type ="text/css">
  
    p{background-color: green}
    span{background-color: orange}
    
</style>
    
        
    </head>

<body>

    <p> 블록요소입니다.</p>
    <span>인라인요소입니다.</span>
    
<!--    h1 ~ h6까지는 블록 요소 -->
    <h1>페이지에서 가장 중요한 제목: 로고</h1>
    <h2>두번째 제목</h2>
    <h3>세번째 제목</h3>
    <h4>네번째 제목</h4>
    <h5>다섯번째 제목</h5>
    <h6>여섯번째 제목</h6>
    
    <h1>페이지에서 가장 중요한 제목: 로고</h1>
    <h2>두번째 제목</h2>
    <h3>세번째 제목</h3>
    <h4>네번째 제목</h4>
    <h5>다섯번째 제목</h5>
    <h6>여섯번째 제목</h6>
    
<!--    순서가 없는 목록 ul : 블록 요소 -->
    <ul>
        <li>웹디자이너</li>
        <li>웹퍼블리셔</li>
        <li>프론트앤드개발</li>
    </ul>
    
    <!--ul태그:계층있게 만들 경우 ul 안에 li 안에 또 ul 넣으면 됨 -->
    <ul>
        <li>웹디자이너</li>
            <ul>
                <li>일러스트</li>
                <li>포토샵</li>
                <li>스케치 </li>
            </ul>
        <li>웹디자이너2</li>
            <ul>
                <li>일러스트2</li>
                <li>포토샵2</li>
                <li>스케치2 </li>
            </ul>
    </ul>

<!--    순서가 있는 목록 ol : 블록 요소 -->
    <!--    잘 안씀-->
    <ol>
        <li>국어 100점</li>
        <li>영어 90점</li>
        <li>독어 80점</li>
    
    </ol>
    
<!--    용어에 대한 설명/정의 dl : 블록 요소 -->
    <dl>
        <dt>웹표준</dt>
            <dd>웹을 사용하는 어떠한 기기에서든지 같게 표현이 되도록 하는 작업</dd>
        
        <dt>웹접근성</dt>
            <dd>누구나 웹을 사용할 수 있게 작업</dd>
    </dl>
    
<!--    문단 p : 블록 요소 , 강제 줄 바꿈 br -->
    <p>문단 태그입니다.</p>
    <p>문단 태그<br/>입니다.</p>
    <p>문단 태그<br/><br/>입니다.</p>
    
    
<!--    이미지 img : 인라인 요소 -->
    <img src="images/jongno_logo.gif" alt="사람중심명품도시 종로" width="153" height="45"/>
    <img src="images/jongno_logo.gif" alt="사람중심명품도시 종로" />
    
<!--    링크 a : 인라인 요소 
                a 태그에는 href태그는 a태그에만 쓸 수 있다-->
    <a href="http://www.naver.com">네이버 이동</a> 
    <a href="http://www.jongno.go.kr" title="새창" target="_blank">
        <img src="images/jongno_logo.gif" alt="사람중심 명품도시 종로"/>
 
       
</body>

</html>