너와 나의 개발 고리

1. 텍스트 관련 태그 HTML에서 텍스트에 사용할 수 있는 태그 hn 태그 : 주제나 제목 성격의 텍스트를 작성할 때 p 태그 : 텍스트로 문장 또는 단락을 구성할 때 사용 br 태그 : 텍스트를 줄 바꿈 할때 사용 blockquote 태그 : 문단 단위의 인용문을 작성할 때 사용 q 태그 : 문장 단위의 짧은 인용문을 작성할 때 사용 ins 태그 : 추가할 텍스트를 표시할 때 사용 del 태그 : 삭제할 텍스트를 표시할 때 사용 sub 태그 : 아래 첨자를 표시할 때 사용 sup 태그 : 위 첨자를 표시할 때 사용 2. 그룹을 위한 태그 HTML에서 그룹화에 사용하는 태그로 div, span 태그가 있는데 이 태그들은 태그 자체에 어떠한 의미도 없다. 3. 목록을 만드는 태그 목록을 생성할 때는 ul..

표(table)는 웹 페이지에서 흔하게 볼 수 있는 2차원 격자 형태로 구성된 데이터를 의미한다. 표는 다음 그림처럼 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell) 로 구성된다 1. table 태그 HTML에서 표를 생성할 때는 table 태그를 사용한다. 폼과 마찬가지로 표 관련 태그는 모두 table 태그 안에서 사용한다. 형식) 2. caption 태그 HTML에서 표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정해 표를 만들때는 반드시 caption 태그를 사용해야한다. 표 제목 3. tr 태그 tr(table row) 태그는 표에서 행을 생성한다. tr 태그 하나는 행 하나를 생성하므로 행을 여러개 만들고 싶다면 tr태그를 여러번 사용하면 된다. 4. ..

1. button 태그 버튼 요소는 [폼 구성하기 1]에서 살펴봤듯이 input 태그에서 type 속성값을 submit, rest, button으로 지정해 생성할 수 있다 또한 별도의 button 태그로 생성할 수도 있다. button 태그도 마찬가지로 type 속성을 가진다 버튼 내용 type 속성값은 폼을 서버에 전송할 목적이면 submit, 상호작용 요소에 입력된 내용을 초기화 하는 버튼이면 reset, 단순한 버튼이면 button으로 지정한다 [input 태그로 생성한 버튼과 button 태그로 생성한 버튼은 뭐가 다른가?] button 태그는 input 태그로 생성할 수 있는 버튼 요소의 역할을 대신하기 위해 만들어진 태그로, input 태그보다 나중에 등장했다 button 태그도 input 태..

1. fieldset 태그/ legend 태그 form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해 그룹 지을 수 있다. fieldset 태그로 그룹을 지으면 그룹별로 박스모양의 테두리가 생성되며 이렇게 그룹 지은 요소들은 legend 태그로 이름을 붙일 수 있다 그룹 이름 위의 형식을 바탕으로 예시를 만들어 보았다 기본 정보 아이디 비밀번호 선택 정보 나이 추천인 2. textarea 태그 여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용한다. 웹 사이트에서 글을 작성할 사용하는 입력 요소는 대부분 textarea 태그로 생성한다. 형식) 초깃값 textarea를 활용한 예시는 아래와 같다 블로그 글쓰기 제목 내용 3. select, op..

1. form 태그 form태그는 폼 양식을 의미하는 태그로 HTML의 폼을 구성하는 태그는 모두 form태그 안에 작성한다. 형식) - action 속성 action 속성에는 form요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL주소를 적는다. - method 속성 method 속성에는 입력받은 값을 서버에 전송할 때 송신 방식을 적는데 속성값으로는 get 또는 post를 사용할 수 있다. 2. input 태그 input 태그에는 type, name, value 속성이 있는데, type 속성을 필수로 사용해야하고, name과 value 속성을 선택해서 사용할 수 있다. 형식) - type 속성 type 속성은 입력된 값에 따라 상호작용의 요소를 결정하는데 이래의 표에 정리해두었다 속..

1. strong태그 strong태그는 텍스트의 의미를 강조하고 싶을 때 사용하며 웹 브라우저에서 텍스트를 굵게 표시해 중요한 부분임을 표시할 수 있다 형식)중요한 의미가 있는 텍스트 strong 태그는 중첩이 가능하다 실행결과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다. 2. em태그 em(emphasis) 태그는 텍스트의 의미를 강조하고 싶을때 사용하며 em 태그를 사용하면 텍스트를 기울인 강조 효과를 낸다 형식)강조하고 싶은 텍스트 em 태그 중첩해서 사용가능하며, 중첩할수록 더욱 강조된다. 실행결과에서 강조 효과는 동일하지만 구조적으로 더욱 강조한다

링크(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 ..