티스토리 뷰
HTML 태그에 대한 몇 가지 의문을 짚고 넘어가겠습니다
태그를 붙여넣기 하면서 몇 가지 의문점이 생긴 분들이 있을 것 같군요.
첫 번째로 HTML태그는 대문자로 작성하지 못할까요? 가령 <body></body>가 아니라 <BODY></BODY>로요.
물론 작성 가능합니다. <BODY></BODY>뿐만 아니라 <bODy></bODy>나 <body></BODy>로도 작성이 가능합니다. 하지만 브라우저의 해석기가 태그를 읽을 때 다 소문자로 읽기때문에 대문자를 쓰는건 비효율적이기도 하고, 소문자로 쓰는 것이 개발자모드를 켰을 때 더 찾기 쉬울뿐더러 다른 프로그래머들과 형식을 맞추는 것도 중요하기 때문에 소문자로 쓰시는 것이 좋습니다.
즉, 대문자로 쓸 수 있지만 소문자로 쓰시는 것이 훨씬 장점이 많습니다.
두 번째로 태그를 완전히 닫지 않은 상태에서 다른 태그들을 나열 할 수 있나요? 가령 <div><p>........</div></p>과 같은 형태로요.
html태그는 중첩될 수 있고, 중첩되는 것이 아주 중요한 태그입니다. 하지만 위 처럼 어중간한 형태로 중첩되지는 않습니다. <div><p>...</p></div>처럼 완전히 포함 해야만 합니다. 그래야 부모 - 자식 엘리멘트를 확실히 할 수 있습니다. 또한 형제 엘리먼트는 동위에 있는 엘리멘트를 뜻하는데, <div><h1>...</h1><p>...</p><div>의 경우엔 <div>태그는 <h1>태그와 <p>태그의 부모 엘리먼트이고, <h1>태그와 <p>태그는 형제 엘리먼트라고 할 수 있습니다.
<div> <h1>제목이 들어갑니다</h1> <p>본문이 들어갑니다</p> </div> <div> <h1>2번째 제목이 들어갑니다</h1> <p>2번째 본문이 들어갑니다</p> </div>
한 줄로 쓰는 것보다 위의 소스코드를 보시는게 훨씬 구분하기 쉬우실 겁니다.
각 <div>태그는 형제관계에 있고, 그 안의 <h1>태그와 <p>태그는 <div>태그의 자식 엘리먼트가 됩니다. 이 관계는 중첩되는 태그들이 생기면 계속해서 변한다고 생각하세요. <p>태그 안에 또 다른 태그가 생기면 <p>태그가 부모가 되고 그 안의 태그가 자식이 됩니다.
즉, 태그 안에 다른 태그가 완전히 포함되어야 올바른 형태입니다.
<img />와 <img>는 다른 것인가요 ?
형태만 약간 다를 뿐 똑같은 역할을 하는 태그입니다. html의 문법은 느슨한 점이 있기 때문에 어떤 식으로 써도 에러를 일으키지 않습니다.( <img/>와 같은 형태도 가능합니다! ) 두 형태 다 알아두시고 상황을 보고 사용하시면 됩니다. 나중에 배울 리액트의 경우는 <Component />의 형태니 미리 연습 겸 <img />의 형태로 사용하시는 것을 추천합니다.
즉, <img>나 <img /> 또는 <img/>로 써도 에러를 일으키지 않습니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| <div>태그와 <span>태그에 id와 class 속성 주기 (0) | 2017.12.14 |
|---|---|
| <input>태그, <a>태그, <ul>태그를 활용한 예시 (1) | 2017.12.13 |
| 기본 태그 설명 및 속성값 바꾸기 (0) | 2017.12.12 |
| HTML 입문 (0) | 2017.12.06 |
| 파일 확장명을 표시합시다.(윈도우10) (1) | 2017.12.03 |
댓글