[HTML] progress, 시맨틱 태그

1. progress 태그 - 진행 정도를 나타내는 태그 - onclick은 자바스크립트로 버튼을 클릭했을 때 행동할 것을 정의한다. - id가 'pg'인 값을 증가하고 감소한다는 뜻으로 진행 버튼을 누르면 10을 증가시키고 감소 버튼을 누르면 10을 감소시켜 progress 태그에 나타내준다. 2. 시맨틱 태그 - HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미를 가지는 태그를 제공 - 검색 엔진에 노출되고 싶으면 시맨틱 태그를 사용하는 것이 좋음 non-semantic 태그 내용 - 해당 태그 안에 들어가는 내용의 의미를 크게 유추하기 힘듦 semantic 태그 내용 - 특정 형태의 글이 포함될 것이라는 유추가 가능 3. 시맨틱 태그 종류 header 상단부 / 로고, 머릿말, 검색창, ..

[HTML] form(input, textarae, select) 태그, fieldset, legend

1. form 태그 - 웹 페이지 내에서 사용자로부터 입력을 받은 후 데이터를 모아서 다른 페이지로 전송할 때 사용하는 태그 여러 입력들(input, textarea, select ...) 2. input 태그 - 사용자에게 입력받기 위해 사용하는 태그로 form 태그 안에 속해 있는 태그 type 속성 그 외 속성들 예시 - method는 get과 post 방식이 있는데 get은 주소창에 데이터가 쓰여지고 post는 안 쓰여진다. - type을 생략하면 자동으로 text 타입이 된다. - radio에서 같은 세트로 하고 싶다면 name을 같게 해야 한다. 속성에 checked를 써주면 그 요소가 체크가 된 상태로 페이지가 시작한다. - checkbox는 중복 선택이 가능하다. 그리고 다른 name으로 ..

[HTML] 페이지 책갈피, HTML 요소(block, inline), iframe(inline frame)

1. 페이지 책갈피 - 현재 페이지에서 이동하고 싶은 부분으로 이동하는 법 - 요소에 id 속성을 이용해서 간단한 책갈피를 만들 수 있음 - 책갈피를 통해 가고 싶은 위치의 요소에 id 속성으로 특정한 문자열을 부여해주면 다른 태그에서 href에 가고 싶은 곳의 "#아이디명"으로 작성해 주며 클릭 시 그곳으로 이동함 2. HTML 요소 블록 레벨 요소 - 웹 페이지 상에 블록을 만들어지는 요소 - 코드상에 한 줄로 이어서 써도 앞뒤 요소 사이에 새로운 줄을 만들어주며 새로운 줄에서 요소가 시작됨 - 면의 특징 - display 속성 값이 block인 요소는 해당 라인 전체를 차지함 - 스타일을 임의로 부여하면 이어서 표현 가능 ex) p, h1 ~ h6, ol, ul, div ... 인라인 요소 - 블록..

[HTML] 테이블 태그, hr 태그

1. 테이블 - 표 내용 혹은 내용 내용 ... ... - tr : 행(table row) - th : 컬럼명, 컬럼제목(table header) - td : 열, 내용(table data) - 기본적으로 테이블을 만들면 테두리가 없다. 그래서 table 태그 속성에 border = "1"을 줘서 테두리를 만들어준다. - 이렇게 되면 th에서 테두리 하나, td에서 테두리 하나 그래서 테두리가 두겹이 되어 버린다. - 그렇기에 한겹이 되게 하기 위해서는 태그(CSS)를 이용해 border-collapse : collapse; 로 설정해주면 된다. * 태그는 가로줄을 긋게 해주는 태그이다. 2. 병합과 캡션 열 병합(좌우 칸 합치기) - 오른쪽에 있는 셀들을 개수만큼 잡아먹으며 병합 - colspan = ..

[HTML] 단일 태그, HTML 태그(이미지 태그, 하이퍼링크)

1. 단일 태그 - 빈 요소, void 요소(Empty Elements) 라고도 하며 여는 태그와 닫는 태그 사이가 없는 요소 - 주로 문서에 무언가를 첨부하기 위해 사용됨 2. 이미지 태그 웹 페이지에서 주로 사용되는 이미지의 종류 jpg(jpeg) - 휴대폰 사진, 카메라 사진, 배경 이미지 등 - 가장 널리 쓰이는 이미지 포맷 - 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합 gif - 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일 - 여러 장의 이미지를 한개의 파일에 저장할 수 있음(움짤, 애니메이션) - 8비트(256색상) 컬러만 지원 png - gif의 대체 포맷으로 개발 - 8비트, 24비트 컬러 이미지 처리 - w3c 권장 포맷 - 알파..

[HTML] HTML 제어문자, 태그(h, br, 서식 태그, 리스트 태그)

1. HTML의 제어문자 > (greater than) & & (ampersand) " " 공백(띄어쓰기) (HTML은 공백을 아무리 쳐도 한번으로만 인식함) ⓒ © 2. 단락 태그(Paragraph Tag) - 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하고 문단이라고 부름 - 태그를 이용해서 단락을 표현 3. 태그와 태그 - 태그는 ~ 까지 있으며 제목을 표기할 때 사용하는 태그 - 태그는 디자인 때문에 쓰는 것이 아니라 의미를 부여하기 위해 사용 - 태그는 HTML 줄바꿈 태그 4. 서식 태그 , 진하게 , 기울이기 형광처리 가로줄(중간) 밑줄 , 위첨자, 아래첨자 - , / , 의 차이는 웹 접근성에 따라 접근성에 더 중요한 것들을 / 으로 함 5. 리스트 태그 순서 없는 리스트..

[HTML] HTML이란?

1. HTML - HTML은 프로그래밍 언어가 아닌 마크업 언어 - 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 마크업 언어 - 마크업 언어란 우리가 보는 웹페이지가 어떻게 구조화되어있는지 표기해서 브라우저에게 알려주는 역할을 하는 언어 (집의 골격 - 문의 개수, 창문 개수, ...) 2. HTML의 요소(태그) ①②Hello HTML!③ ① 여는 태그(Opening Tag) : 요소의 이름(p)과 열과 닫는 꺽쇠 괄호로 구성되어 있음 ② 내용(Content) : 단순한 텍스트 ③ 닫는 태그(Closing Tag) : 요소의 이름 앞에 /(슬래쉬)가 있다. - 위에 것들을 통틀어서 요소라고 함 - 요소의 이름은 대소문자를 구분하지 않지만 가독성에 있어서 소문자로 작성하는 것을 권장 내포된 요소(..

[HTML] 인코딩(Encoding), www, 웹 표준(Web Standard), 웹 접근성

1. 인코딩(Encoding) - 문자를 표현, 해석하기 위한 방식, 방법들 EUC-KR - 완성형, 만들어져 있는 완성된 글자를 찾아옴 - 가~힣 UTF-8 - 조합형, 글자를 만들기 위한 요소들을 하나씩 찾아와서 조합 - 힗 ㅎㅣㄹㅎ( * 실제로는 아님 ) 2. www(World Wide Web) - 인터넷에 연결된 전 세계 컴퓨터들을 통해 정보를 공유할 수 있는 정보 공간 - W3C(WWW Consortium) : WWW를 위한 표준을 제정하고 관리하는 중립적인 기관 3. 웹 표준(Web Standard) HTML(HyperText Markup Language) - 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 마크업 언어 - 마크업 언어란 태그 방법 체계를 의미하며 태그를 이용해서 문서나 데..

[HTML] 웹(Web), 프로토콜(Protocol), 도메인(Domain)

1. 웹 - 요청과 응답이 일어나는 장소 서버와 클라이언트 - 클라이언트 : 서버에게 자신이 원하는 요청을 보냄 - 서버 : 클라이언트에게 요청받은 서비스를 제공 HTTPD(Http Daemon) - 웹 서버 백그라운드에서 실행된 채 대기하고 있는 프로그램 - 요청이 들어오기를 대기하다가 실제로 요청이 들어오면 서버를 깨워줌 웹 컨테이너 - 클라이언트로부터 정적인 요청이 오면 서버에서 정적인 파일을 그냥 보내주면 됨 - 하지만 동적 요청이 오면 정적인 파일로부터 동적인 응답이 나올 수 없음, 그래서 웹 컨테이너 필요 - 동적인 데이터 요청(DB 접근 연산)이 들어왔을 때 서버가 연산을 요청하는 곳 - 이후 연산이 끝나면 정제된 데이터로 서버에 돌려줌 WAS(Web Application Server) - ..