[HTML] <form>, 다양한 input type, 식별자(id, class, name), <a> vs <form>

식별자 id 고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 class 재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능 name form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 여러 개의 요소에 지정 가능 id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다. == css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다. name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다. 즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다. vs 두 태그의 공통점..

→2021.06.03

프로그래밍 언어/html

[HTML] 리스트 만들기 <ul>, <ol>, <li>

: unordered list (순서 없는 목록) 속성 disc : 검정원, default circle : 하얀원 square : 네모 none : 글자만 나타내기 : ordered list (순서 있는 목록) 속성 type : 순서를 어떤 식으로 표시할지 타입을 정할 수 있다. 1 a A i I start : 시작하고 싶은 번호를 정할 수 있다. default로 1부터 시작하지만, 100번 혹은 30번부터 시작하고 싶을 때 사용 list안에 list 또한 사용이 가능하다. 안에 사용 가능, 반대로도 사용이 가능하다. 예제1 : coffee tea milk coffee tea milk 예제2 : attribute coffee tea milk 예제3 : type coffee tea milk 예제3 : ty..

→2021.06.03

프로그래밍 언어/html

[HTML] 테이블 만들기 <table>tag, <tr>, <th>, <td>

테이블 만들기 태그 설명 테이블을 만드는 태그 테이블의 헤더부분을 만드는 태그 defalut값 : , 가운데정렬 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 속성 border : 테이블의 라인을 나타낸다. border설정을 안 하는 경우 테이블의 형태만 보인다. bgcolor : 테이블의 색상을 설정 행과 열의 색상도 따로 정할 수 있다. width : 테이블의 가로 크기를 설정 칼럼의 폭도 조절할 수 있다. height : 테이블의 세로 크기를 설정 colspan : 가로 합치기(열 합병) rowspan : 세로 합치기(세로 합병) rules : rows, cols, all 등등 다양한 속성 값들이 있다. rows는 테이블의 세로줄을 없애고 가로줄만 나타냄 cols는 테이블의 가로줄을 없애고 ..

→2021.06.03

프로그래밍 언어/html

[HTML]<img> 태그, src 속성, alt 속성, title 속성, image파일 종류

image파일 종류 jpg png gif bmp tiff tga 용량(작은순서) 1 3 2 6 4 5 압축율 1 x jpg : 용량이 제일 적은 만큼 퀄리티는 떨어진다. bmp : 압축이 불가. 원래는 안드로이드, 아이폰에서 사용했는데, bmp로 사용할 경우 투명 이미지(sprite) 처리를 따로 해줘야 하는 번거로움이 있어서 png를 사용한다. png : 안드로이드, 아이폰에서 주로 사용 (제일 마지막에 나옴) 투명처리가 들어가 있다. 문서에 이미지를 넣는 태그 src : 필수 특성이며, 이미지의 경로를 지정 img는 하드웨어에서 불러 오는것이 아니다. 즉, 하드웨어 상에 저장되어 있는 절대 경로를 입력해서 이미지를 불러올 경우 이미지를 찾아올 수 없을 것이다. 왜? 서버에서 불러오는 것이기 때문에 (..

→2021.06.03

프로그래밍 언어/html

[HTML] <a>태그 (anchor tag)

: anchor(link) 다른 웹사이트로 이동하는 링크 구글로 이동 구글로 이동 속성 href : 연결할 주소를 지정 target : 링크를 여는 방법 _self : 링크를 클릭한 해당 창에서 열기 (default) _blank : 링크를 새창으로 열기 _parent : 부모 창에서 열기 _top : 전체 브라우저 창에서 가장 상위의 창에서 열기 title : 해당 링크에 마우스 커서를 올렸을때 나오는 링크의 설명을 설정 실습 jhost 블로그로 이동(새창으로 열기) jhost 블로그로 이동(새창으로 열기)

→2021.06.03

프로그래밍 언어/html

[HTML] tag 안에서 사용하는 tag들(b, strong, em, mark, i, del, sub, sup)

글씨 굵기 두꺼운 텍스트 두꺼운 텍스트 강조 strong 텍스트 strong 텍스트 강조 나는 성공할 것입니다. 나는 성공할 것입니다. 강조 Hyper Text Markup Language Hyper Text Markup Language 이탤릭 텍스트 이탤릭 텍스트 이탤릭 텍스트 텍스트 중간선 이 문장은 삭제된 문장입니다. 이 문장은 삭제 된 문장입니다. 아래첨자 이것은 아래첨자입니다. 이것은 아래첨자입니다. 윗첨자 (수학공식표현시 많이 사용) 이것은 윗첨자입니다. 이것은 윗첨자입니다. 은 어느곳에서나 사용 가능하다.

→2021.06.02

프로그래밍 언어/html

[HTML] 폰트색설정, 배경색설정, 폰트설정, 글씨위치조절

문자열 색 설정 h1 tag color h1 tag color 배경색 설정 h2 tag color green h2 tag color green 글씨체 설정 h3 tag font h3 tag font 글씨 크기 설정 h4 tag h4 tag 글씨 위치 조절 여기가 p tag입니다 여기가 p tag입니다 1. 컴퓨터시스템 2. 프로그래밍 언어활용 part1 3. 응용SW기초 기술 활용part1 4. 화면구현 part2 5. SQL 활용 1. 컴퓨터시스템 2. 프로그래밍 언어활용 part1 3. 응용SW기초 기술 활용part1 4. 화면구현 part2 5. SQL 활용

→2021.06.02

프로그래밍 언어/html

[HTML] <br>(개행), <h>(제목), <p>(단락), <pre>

break : 개행 따로 종료태그가 필요하지 않은 태그입니다. 개행하는 태그 hello world hello world 결과 hello world hello world heading : 제목을 작성하는 태그 h1부터 h6까지 있으며, 숫자가 작을수록 글씨의 크기가 크다. H1 Tag H2 Tag H3 Tag H4 Tag H5 Tag H6 Tag 결과 H1 Tag H2 Tag H3 Tag H4 Tag H5 Tag H6 Tag Paragraph : 단락 한줄씩 나눠줄수 있는 태그 p태그 입니다. p태그 입니다 결과 p태그 입니다. p태그 입니다 Pre Formatted : 설정한 대로 나오는 태그 코드를 작성한대로 그대로 출력이 된다. 안녕하세요 여러분 같이 html 연습을 해봅시다. 화이팅! 결과 안녕하세..

→2021.06.02

프로그래밍 언어/html

[HTML] HTML이란? (구성요소, 기본구조)

HTML(HyperText Markup Language) 직역 : 텍스트를 띄우는 언어 웹사이트를 만드는 가장 기초가 되는 마크업 언어이며, 웹페이지의 내용과 구조를 담당하는 언어. 즉, 구조를 설계할 때 사용되는 언어로 웹 피이지를 위한 마크업 언어이다. HyperText? 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것 Markup? 마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다 출처 : 위키백과 구성요소 Elem..

→2021.06.02

프로그래밍 언어/html

HTML 수업자료

HTML 수업 전체적인 내용 노션 : https://www.notion.so/html-e3129abab9824e5a98d5891b8d28a1d8

→2021.06.02

티스토리툴바