[자바스크립트] <br/> 과 &nbsp 의 차이점 / a href의 활용

공부를 하다 보니 기본적인 부분이 헷갈리기 시작해서 정리해 보려고 한다. 

1. <br/> 과 &nbs;의 차이는 뭘까 

br 은 line break를 의미한다. 즉, 줄바꿈이다. html 에서 사용된다. (그래서 <>꺽쇠를 사용한다.)

nbsp는 non-breaking space의약자다. 즉, 띄어쓰기다. 공백을 1개 이상(여러개) 사용해야 할 때에 스페이스바 인식을 위해 사용한다.    

document.write("<br/><h1>for</h1>");

        for(i=1;i<10;i++){

            document.write(i+"<br/>");

        }

br의 사용 예

 

이렇게 간단한데 나는 왜 헷갈린 걸까?

아무래도 우연의 일치로 <br/>과 &nbsp; 가 줄바꿈이 된 걸 보고 후자를 줄바꿈 기능으로 혼동한 것 같다. 

참고로, <p>는 단락 설정으로, 자동으로 p 태그가 끝나면 단락을 나누며 엔터가 들어간다. 

 

2. <a href=~>에서의 a가 의미하는건 뭘까.

 location.href="http://www.daum.net";

위는 href 의 다른 이용방법

 

a 는 anchor 의 약자로, 닻(정박지) 이라는 뜻이다. 다른 문서 또는 같은 문서로의 이동을 의미할때 사용한다. 

href는 hyper reference 라는 뜻으로, 링크라는 뜻이다. 링크를 넣을 때에 어디에나 사용된다.  

이렇게 약자를 생각하고 나면 직관적으로 이해하기 쉬워진다.(그리고 좀 재밌어짐)

<a href + 절대주소 / 상대주소 / #(의미 없음) / id ... > 등을 넣고 이동하게 만들 수 있다. 

 

예시)

 a href=#

function add (){

            var header = document.createElement('h3');

            var textNode = document.createTextNode('내 이름은 김이박 입니다.');

            header.appendChild(textNode);

            //header에 textNode를 자식으로 붙이는 것이 appendNode

            document.body.appendChild(header);

        }

   <h2>문서 객체 생성하기</h2>

    <a href="#" onClick="add()">당신의 이름은 무엇입니까?</a>

  

 location.href

 버튼 선택시 페이지 이동

    <input type="button" value="페이지 이동" onclick="fn_chech()">

    <script>

        function fn_chech(){

            location.href="http://www.daum.net";

        }

    </script>

 

3. <span>태그와 <div>태그

span은 기간 이라는 뜻이다. 

div는 division의 약자로, 분할/분배라는 뜻이다. 둘 다 기능적으로는 주머니처럼 어디서부터~어디까지. 묶어주는 기능을 한다. 

둘의 차이점을 보자면, div는 줄바꿈이 들어 있지만, span은 없다. 즉, 다른 기능 없이 이 태그만 가지고는 줄바꿈을 만들 수 없다는 뜻이다. 

두 번째로는 이 주머니의 사이즈가 다르다. span은 이 문장'만'감싸지만, div 태그는 문장을 '포함'한 사각 박스를 의미하게 된다. 

   <div id="con2" style="border:3px solid blue; padding:5px">

        <div><span>첫번째</span>입니다.</div>

        <div><span>두번째</span>입니다.</div>

        <div><span>세번째</span>입니다.</div>

    </div>

위의 경우 div로 각각 감쌌기 때문에 줄바꿈이 있어 아래와 같은 결과가 나온다. 

첫번째입니다.
두번째입니다.
세번째입니다.

그러나 제이쿼리의 unwrap() 메서드를 사용하면 div 태그가 사라지므로, 아래와 같이 변한다. 

첫번째입니다. 두번째입니다. 세번째입니다. 

---

참고

https://luvris2.tistory.com/504

HTML - <br> 태그와   의 차이

https://velog.io/@muchogusto/a-href-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%9D%98%EB%AF%B8

a href="#" 무엇을 의미?

https://www.tcpschool.com/html-tag-attrs/a-href

코딩교육 티씨피스쿨