너와 나의 개발 고리

float 속성 요소를 화면에 배치하는 position 속성과 또 다른 방법이다. float 속성은 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용하며 아래와 같은 용도에서 사용할 수 있다. 이미지 요소와 텍스트 요소 배치하기 블록 성격 요소를 인라인 성격 요소처럼 배치하기 형식) float:; 사용할 수 있는 속성값은 아래와 같다. 속성값 설명 n o n e float 속성을 적용하지 않습니다. l e f t 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치한다, r i g h t 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치한다. - 이미지 요소와 텍스트 요소 배치하기 이미지 요소와 ..

링크(link)는 문서와 문서 간 연결을 의미하며, 기본으로 a 태그를 사용한다. 사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다. 1. a 태그 a 태그는 HTML에서 내부나 외부 링크를 생성한다. 대상 경로를 의미하는 href 속성을 필수로 사용해야하며, 그 외의 target, title 속성을 선택해서 사용할 수 있다. - href 속성 href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다. 속성값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성값일 수 있다. 링크 - target 속성 target 속성은 a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정한다. 속성값으로 _blank, _parent, _self, _top을 사용할 수 있지만 _bl..

ul 태그 ul(unordered list) 태그는 순서가 없는 비순서형 목록을 생성할 때 사용하며 목록 내용은 li(list item)태그로 구성한다. 형식) 목록 내용 1 목록 내용 2 ........... 목록 내용 n ul 태그는 중첩해서 사용할 수 있는데 중첩시 초기 설정은 내부 태그는 흰 원 아이콘으로 변경된다. 태그의 기본 검은 원은 style 속성에 list-style-type 속성값을 삽입해서 작성한다. # ul 태그 목록 디자인 1. none : 목록 항목에 기호를 표시 하지 않는다. 2. disc : 목록 항목을 원으로 표시한다.(기본값) 3. circle : 목록 항목을 원 내부만 표시한다. 4. square : 목록 항목을 사각형으로 표시한다. 5. decimal : 목록 항목을 ..

목록(List)은 목차와 메뉴를 구성할 때 주로 사용하지만 그 외에도 웹 페이지의 다양한 곳에서 사용할 수 있다. 목록을 생성할 때 사용할 수 있는 태그로는 ul, ol, dl 태그가 있다. 1. ul 태그 ul(unordered list) 태그는 순서가 없는 비순서형 목록을 생성할 때 사용하며 목록 내용은 li(list item)태그로 구성한다. 형식) 목록 내용 1 목록 내용 2 ........... 목록 내용 n ul 태그는 중첩해서 사용할 수 있다. 2. ol 태그 ol(ordered list) 태그는 순서형 목록을 생성할 때 사용한다. ul 태그와 마찬가지로 li 태그로 목록 내용을 구성한다. 형식) 목록 내용 1 목록 내용 2 ........... 목록 내용 n ol 태그를 활용했을 때 목록내..

hn 태그 hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다. 형식) 제목 hn 태그는 h1 부터 h6 태그까지 있으며 여기서 h는 heading을 의미하며 n에 들어가는 숫자는 중요도를 나타낸다. 같은 hn 태그라고 하더라도 h1 태그가 가장 중요하며 h6 태그가 상대적으로 덜 중요하다. 실행결과를 보면 중요도가 가장 높은 h1 태그일 때 글자가 가장 크고 굵으며 h6 태그로 갈 수록 크기가 작아지고 가늘어지는 것을 확인할 수 있다. TIP 검색 엔진은 hn 태그를 검색할 때 h1 태그부터 단계적으로 검색하기 때문에 만약 h4 태그를 사용하지 않고 h1, h2, h3, h5, h6 태그를 사용한다면 검색 엔진은 h1 태그부터 단계적으로 태그를 검색하다가 h4 태그가 없으면 h5, h6 ..

HTML 문서는 일정한 구조 안에서 작성된다. DTD 문서형 정의(DTD, Document Type Definition)는 웹 브라우저가 처리할 HTML 문서가 어떤 문서형식을 따라야 하는지 알려주는 것으로 HTML 문서를 작성할 때 항상 처음에 넣어야 한다. html 태그 html 태그는 HTML문서의 시작과 끝을 의미한다. 따라서 모든 태그는 html 태그 안에 작성해야 한다. head 태그 head 태그는 HTML 문서의 메타데이터(metadata)를 정의하는 영역이다. 메타데이터란 HTML문서에 대한 정보(data)로, 웹브라우저에 직접 노출되지 않는다. 보통 meta, title, link, style, script 등의 태그를 사용하여 HTML 문서의 여러 정보를 정의한다. meta 태그 me..

태그 다양한 구성 요소를 정의하는 역할을 하며, HTML 문법을 이루는 가장 작은 단위이다. 기본 형식은 다음과 같이 홑화살표()사이에 태그명을 넣는 형태이다. 속성 태그에 어떤 의미나 기능을 보충하는 역할을 하는데 옵션이라고 생각해도 된다. 속성은 사용해도 되고 안해도 되고 여러개를 사용해도 된다. 하지만 태그 없이 단독으로 사용할 순 없으며 아래와 같이 속성명과 속성값으로 구성된다. 만약 html 태그만 사용했다면 'HTML 문서의 시작' 이라는 의미만 있었으나 함께 사용한 lang 속성 때문에 태그의 원래 의미에 속성의 의미가 더해져 '주 언어(lang)가 한글(ko)로 된 HTML 문서의 시작' 이라는 구체적인 의미를 가지게 된다. 문법 HTML은 태그와 속성으로 문법을 구성한다. 그리고 문법은 ..