HTML5

( html ) 태그 구조 잘 짜는 노하우!!

비니_ 2021. 6. 14. 10:35
728x90


1. 텍스트와 태그가 직접 만나게 하지 않기


<a href=""><img src="img/f.png" alt="">Facebook</a>    X
<a href=""><img src="img/f.png" alt=""><span>Facebook</span></a>   O
                           ^
  div>a>img+span{글자넣기}  |  (엠잇구조)
 =div안에 a태그안에 img태그와 span태그
 
<엠잇표현>
> 부모자식관계
+ 연결관계, 형제관계
 
span에 style 주기.
 


2. 절대 텍스트랑 태그를 형제로 두지 않는다!!!***


    -> 글자는 포장지에 포장하기!!

 

<div>
     <span>
        <span>회사</span>
        <span>소개 </span>      -> 회사 와 소개 의 글자 색깔을 따로 지정할 수 있음.
    </span>
    <span> 찾아오는길</span>
</div>


  


(번외)


***글자에 해당되는 스타일만 a태그로 유전된다.
style 넣을때 글자에 관한거는 span말고 a태그에 넣으면 됨
 
 
#none -> 먹통
<a href="#none"> 링크 연결 안되게.
 
a태그에 #none
-> 현재페이지입니다 가 뜸

728x90