html
-
시맨틱 태그프로그래밍/HTML&CSS 2022. 9. 17. 09:51
시맨틱 태그란 브라우저나 개발자들에게 의미를 전달 할 수 있는 태그로서 문장 구조를 파악하는데 중요한 역할을 하는 태그를 의미한다. 일반적인 div 나 span 태그는 이름만으론 태그 내 어떤 내용이 있는지 알 수 없지만 시맨틱 태그를 사용하면 간략하게 이 태그가 어떤 의미를 지니고 있는지 알 수 있다. 시맨틱 태그는 위에 설명한 것처럼 태그의 내용을 유추할 수 있는 기능 외에 다른 기능들이 있다. 우선 검색 포털에서 시맨틱 태그는 검색 키워드로써 기능을 수행하여 검색에 용이하게 한다. 또 웹 접근성 측면에서 시작 장애인이 사용하는 스크린 리더기를 통해 웹 페이지의 구조를 알기 쉽게 한다. - 머리말 영역으로 제목, 로고, 이름, 검색창, 사이트 메뉴 등을 포함한다. - header의 위치에 따라 문서의..
-
블록(block) 요소와 인라인(inline) 요소프로그래밍/HTML&CSS 2022. 9. 1. 22:01
블록 요소 블록 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄 전체를 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻으로 따라서 블록 요소 좌 우로는 다른 요소가 올 수 없다. 블록 태그의 특징을 갖고 있는 태그로는 , , 등이 있다. 시간이란.. 내일 죽을 것처럼 오늘을 살고 열원히 살 것 처럼 내일을 꿈꾸어라. 인라인 요소 인라인 요소는 블록요소 달리 한줄 전체를 차지 않는다. 컨텐츠 만큼만 영역을 차지하지 않고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 여러개의 인라인 요소가 올 수 있다. 인라인 요소의 특징을 갖는 태그로는 , , 이 있다. 시간이란.. 내일 죽을 것처럼 오늘을 살고 열원히 살 것 처럼 내일을 꿈꾸어라.
-
input 태그프로그래밍/HTML&CSS 2022. 8. 24. 11:19
태그는 아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분에 주로 사용된다. 태그는 type 속성을 설정하여 속성값에 따라 입력 content를 변화시킨다. 대표적인 type 속성으로는 text, radio, checkbox 등이 있다. 아래에서 자세히 알아보자 type 속성 text는 문자를 입력 받는 글 상자의 기능을 제공한다. password는 비밀번호를 입력 받는 글상자의 기능을 제공한다. 회원가입 아이디 : 비밀번호 : size : 크기를 설정하는 속성 maxlength : 값의 최대길이를 설정하는 속성 placeholder : 입력전 특정 데이터를 입력하도록 안내하는 값을 설정 radio는 여러개의 옵션 중에서 단 하나의 옵션만을 입력 받을 수 있도록 하는 버튼의 기능..
-
form 태그프로그래밍/HTML&CSS 2022. 8. 23. 19:45
태그는 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그로, 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용한다. 태그는 몇가지 속성을 사용해서 입력 받은 자료를 서버로 전송시킬 방식과 서버에서 어떤 프로그램을 이용해여 처리할 것인지 지정할 수 있다. form 태그 속성 method 속성 method는 사용자가 입력한 내용을 서버 프로그램으로 어떻게 넘겨줄 것인지 방식을 지정한다. 대표적으로 GET , POST방식이 존재하며, GET 방식은 서버로 보낼 데이터를 URL에 실어서 전달하는 방식이고 POST방식은 데이터를 BODY에 묶어 전달하는 방식이다. ... 입력 요소 action 속성 action은 form 태그 안의 내용을 처리해 줄 서버를 지정하며, 도착지 URL를 입력한다.
-
하이퍼링크 태그프로그래밍/HTML&CSS 2022. 8. 21. 11:50
하이퍼링크란 다른 페이지나 사이트로 연결하는 링크로 웹 페이지에서 문자 혹은 이미지를 클릭했을 때 반응하여 사전에 연결해둔 페이지로 이동하는 기술이다. 하이퍼링크을 구현하기 위해서는 태그를 사용한다. 태그의 사용법을 알아보자. 링크에 사용될 문자 또는 이미지 href 안에는 상대 경로 혹은 절대경로, URL 를 입력하고 태그 사이에 문자 혹은 이미지를 삽입하여 구현한다. [1_하이퍼링크.html] 하이퍼링크 다음 서브페이지 위 와 같이 코드를 작성하였다면 "다음" 혹은 "다음 로고 이미지"를 클릭할시 다음 URL를 통해 다음 페이지로 이동하게된다. 그 아래는 다음 pages 폴더에 subpages.html이라는 다른 HTML 페이지를 만들어 "서브페이지" 혹은 "서브페이지 이미지" 를 클릭할 경우 sub..
-
테이블(table) 태그프로그래밍/HTML&CSS 2022. 8. 21. 11:30
테이블 태그는 데이터를 보기 좋게 정리하여 보여주는 표를 만드는 태그이다. 태그로 표의 시작과 끝을 선언해주고, 태그를 사용하여 테이블의 행(가로)를 만들어준다. 태그 안에는 해당태그가 포함할 열을 표현하는 태그를 위치시킨다. 태그는 태그와 태그를 포함하는데 태그는 열의 헤더(header) 역할을 하고 태그는 열의 내용(content) 역할을 한다. 1번째 제목 2번째 제목 1번째 셀 2번째 셀 1번째 셀 2번째 셀 colspan 속성 가로로 행(rows)을 합치는 방법으로 합치길 원하는 가로 행의 개수를 입력한다. rowspan 속성 세로로 열(column)을 합치는 방법으로 합치길 원하는 세로 열의 개수를 입력한다. 1번 셀 2번 셀 3번 셀 5번 셀 8번 셀 9번 셀 태그 표에 제목을 붙일 때 사용..
-