본문 바로가기

728x90

Front-end Developer

(21)
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)이다. 블록 요소와 인라인 요소를 그룹으..
3. HTML의 기본 구조 (html, meta, head, body) HTML의 기본 구조 - HTML 문서는 일정한 구조 안에서 작성이 된다. 이것을 기본 구조라고 한다. 첫 웹페이지 문구 작성 1. 문서형 정의 (DTD, Document type Definition) - 웹 브라우저가 처리할 HTML 문서가 어떤 문서인지 알려주는 것이다. HTML 문서는 최신 형식인 HTML5 문서 형식으로 해석한다. HTML5 등장 이후로 이전 버전 문서(html4) 형식을 정의할 필요가 없어졌으므로 로 DTD를 작성해 주면 된다. 2. html 태그 html태그는 문서의 시작과 끝을 의미한다. 따라서 html 태그 안에 작성을 해야 한다. 3. head태그 태그는 문서의 메타데이터(metadata)를 정의하는 영역이다. - 메타데이터란? HTML 문서에 대한 정보(data)로 웹 ..

728x90