본문 바로가기

728x90

Front-end Developer/HTML

(9)
6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 1. HTML의 부모, 자식, 형제 관계 HTML은 태그를 사용할 때 부모, 자식, 형제라고 하는 관계가 있다. 예를 들어 확인해보자. 부모안에 있는 자식이자 형제 태그 부모안에 있는 자식이자 형제 태그 코드에서 보면 태그 안에 부모안에 있는 자식이자 형제 태그 부모안에 있는 자식이자 형제 태그 나가 코드 수정이 필요한데 만약, 줄 바꿈과 들여쓰기가 되지 않은 코드를 만났다고 해보자. 보자마자 이게 무슨.... 부모, 자식, 형제 관계 파악도 안 될 것이며, 가독성 자체도 완전 최악일 것이다. 따라서 코드의 가독성을 위하여 우리는 줄 바꿈과 들여 쓰기를 적절하게 잘 사용하도록 하자. 긴 글 읽어주셔서 감사합니다. 부족한 설명은 댓글로 달아주시면 추가하도록 하겠습니다. 감사합니다. :) - 오늘 내 자신을..
4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> -텍스트는 일반적인 설명일 수 있고, 글의 제목이나 부제목일 수도 있다. 이번에는 텍스트를 작성할 때 어떤 태그를 사용하는지 배워 보도록 하자. 1. 태그 hn태그는 h1부터 h6 태그까지 총 6개가 있다. 여기서 h는 heading을 의미하며, n에 들어가는 숫자는 중요도를 나타낸다. 즉, 같은 h태그더라도 h1태그가 가장 중요하며 h6 태그는 상대적으로 덜 중요하다. 실행결과를 보며 한번 알아보자. 첫번째 Hello world! 두번째 Hello world! 세번째 Hello world! 네번째 Hello world! 다섯번째 Hello world! 여섯번째 Hello world! 실행결과를 보면 중요도가 가장 높은 h1 태그는 굵고 가장 크다. 밑으로 내려갈수록 작아지고 가늘어지는 것을 확인할 수 ..
5. Html의 <div> 태그 - HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다. 예를 들어, 네이버 페이지를 보면 알 수 있다. 검색 영역, 로그인 영역, 내용 영역, 등 관련 있는 요소들끼리 그룹이 되어있는 것을 확인할 수 있다. 웹페이지는 관련있는 그룹끼리 묶으면 레이아웃을 구성하기가 쉬워진다. 그리고 더 깔끔한 구조의 HTML 웹 페이지를 만들 수 있다. HTML에서는 이런 그룹 짓기 작업을 div와 span 태그로 수행한다. 공간 분할 태그 : 관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할 이라고한다. 대표적으로 , 태그를 공간 분할 태그라고도 한다. 1. div 태그 div 태그는 블록요소 (block-element)이다. 블록 요소와 인라인 요소를 그룹으..

728x90