본문 바로가기

💻WEB FrontEnd/HTML5

(9)

시맨틱 태그 을 기본으로 배운 내용입니다. 목차 1) 시맨틱 태그를 사용한 문서 구조 2) 시맨틱 태그를 지원하지 않는(IE8이하) 버전에서 사용하는 방법 2-1. HTML5 Shiv 사용법 2-2. 폴리필(pollyfill) 시맨틱 태그 시맨틱이란 '의미론적인', '의미가 통하는' 이라는 뜻이다. 웹 문서 레이아웃을 만들 때 시맨틱 코드를 사용하면, 소스만으로도 문서 내용을 알 수 있어서 사이트를 검색할 떄 필요한 내용을 정확히 찾을 수 있어 편리하다. 또한 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있다. 1) 시맨틱 태그를 사용한 문서 구조 태그 설명 위치 사용 내에 다음과 같은 소스를 추가하면 IE8이하 버전에서도 시맨틱 태글를 인식할 수 있다.*/ 2-2. Polly..

다양한 폼 요소들 을 기본으로 배운 내용입니다. 목차 1. 버튼 2. 계산 결과 보여주기 3. 진행 상태 보여주기 4. 값이 차지하는 크기 표시하기 1. 버튼 1) 버튼 넣기 - 태그 폼을 전송하거나 리셋하기 위한 버튼을 삽입할 때 사용한다. 내용 - 태그와 사용하는 속성들 속성 값 설명 submit 폼을 서버로 전송한다. reset 폼에 입력한 모든 내용을 초기화시킨다. button 버튼 형태만 만들 뿐 자체 기능은 없다. 2) 태그 vs 태그 웹 문서에서의 버튼은 과 태그를 이용해 삽입할 수 있다. 하지만 태그를 사용하면 태그를 이용했을 때와 달리 콘텐츠를 사용할 수 있기 때문에 아이콘을 추가할 수도 있고 CSS를 이용해 원하는 형태로 꾸밀 수 있다. 2. 계산 결과 보여주기 1) 태그 계산 결과를 화면에 보여주어야할..

폼, 드롭다운 목록 을 기본으로 배운 내용입니다. 목차 1. 폼 만들기 2. 사용자 입력을 위한 태그 3. 여러 데이터 나열해 보여 주기 폼은 대표적으로 웹 사이트의 로그인 화면이나 회원가입할 때 사용자가 입력할 수 있는 화면이다. 폼과 관련된 대부분의 작업은 정보를 저장하거나, 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 한다. 폼은 사용자가 입력정보를 입력하고 버튼을 클릭하면 그 내용이 웹 서버로 보내진다. 그럼 서버는 자신이 가지고 있는 데이터베이스에서 사용자가 보내 온 정보를 비교하고 그 결과를 브라우저에게 보낸다. 폼의 텍스트 상자나 버튼 같은 형태를 만드는 것은 HTML태그를 이용하고 그 폼에 입력한 정보를 처리하는 것은 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용한다. 1. 폼 만들..

하이퍼링크 태그 을 기본으로 배운 내용입니다. 목차 1) 링크 만들기 2) 앵커(anchor) 만들기 3) 이미지 맵 지정하기 링크 링크는 웹 문서와 다른 문서가 구별되는 가장 큰 특징이다. 텍스트를 클릭해 해당 페이지로 넘어갈 수 있고 이미지에 링크를 걸 수도 있으며 열고 있는 브라우저에서 해당 페이지로 이동하지 않고 새 창을 띄워 보여 줄 수도 있습니다. 1) 링크 만들기 //텍스트 링크 텍스트 //이미지 링크 - 태그와 사용하는 속성들 속성 설명 href 링크한 문서나 사이트의 주소를 입력한다. target 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다. 속성 값 _self : 기본값. 링크가 있는 화면에서 열린다. _blank : 링크 내용이 새 창이나 새 탭에서 열린다. _parent : 프레임을..

이미지 태그 을 기본으로 배운 내용입니다. 목차 1) 웹에서 사용하는 이미지 형식 2) 이미지 태그 이미지 1) 웹에서 사용하는 이미지 형식 - 비트맵 이미지(bitmap image) 작은 크기의 비트맵 이미지를 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해질 수 있다. 파일 형식 설명 GIF(Graphic Interchange Form) - 표시할 수 있는 색상 수가 최대 256가지뿐이다. - 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용된다. - 투명한 배경이나 움직이는 이미지를 만들 수 있다. JPG/JPEG(Joint Photographic Experts Group) - 사진을 위해 개발된 형식이다. - GIF보다 다양한 색상과 명암을 표현할 수 있..

텍스트, 목록, 표 관련 태그 을 기본으로 배운 내용입니다. 목차 1. 텍스트 관련 태그 2. 목록을 만드는 태그 3. 표를 만드는 태그 1. 텍스트 관련 태그 1) 텍스트를 덩어리로 묶어 주는 태그 태그 설명 제목 제목 표시하기 텍스트 단락 만들기 줄 바꾸기 분위기 전환을 위한 수평 줄 넣기 인용 내용 인용문 넣기 (줄이 바뀌어 나타남) 텍스트 - 입력하는 그대로 화면에 표시하기 - 이 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시될 수 있다. - , , 와 같은 태그를 사용해 프로그램 소스를 표시할 때도 이 태그와 함께 사용된다. 2) 텍스트를 한 줄로 표시하는 태그 태그 설명 굵게 강조할 텍스트 경고나 주의 사항같은 중요한 내용 강조 굵게 강조할 텍스트 문서의 키워드처럼 단순히 글씨를 굵게 표시 이탤릭체로 표..

웹 호스팅 웹 호스팅 서버의 종류 호스팅 서비스는 어떤 서비를 이용하느냐에 따라 윈도우 서버 호스팅과 리눅스 서버 호스팅으로 나뉜다. 윈도우 서버에서는 ASP난 ASP.NET 프로그래임 언어를 사용하고 리눅스 서버에서는 PHP 프로그래밍 언어를 사용하며 좀 더 대중적이고 저렴하다. 최근에는 클라우드 서버를 사용한 클라우드 서버 호스팅도 많이 사용한다. 1) 서버 호스팅 비교

HTML 문서 기본 구조, 특수 문자표 을 기본으로 배운 내용입니다. 목차 1. HTML 문서 기본구조 2. 특수 문자 사용 1. HTML 문서 기본 구조 1) 문서 유형을 지정하는 선언문이다. 2) 태그 웹 문서 시작을 알리는 태그이다. lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 태그 내부에는 문서 정보를 지정하는 태그와 실제 화면에 보이는 문서 내용을 입력하는 태그가 포함된다. 3) 태그 브라우저에게 정보를 주는 태그이다. 태그 안에서 가장 중요한 태그는 문서제목을 지정하는 태그이다. 4) 태그 웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정하는 태그이다. //1. 문자 세트 지정하기 : 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할 지 지정 //2. 모바일 기기 고려하기 //3. 인터넷..

웹 프로그래밍 작업을 위한 live server설치 을 기본으로 배운 내용입니다. 1. atom-live-server 설치 atom에서 atom-live-server를 설치한다. view code 클릭 후 나오는 코드들에서 [keymaps -> atom-live-server.cson]를 선택해 단축키를 확인한다. 아톰의 실행할 HTML코드로 돌아가서 [ctrl+alt+3]를 눌러서 작업한 페이지를 확인하면 인터넷 브라우저가 뜬다. 보안경고 기능차단 메시지의 액세스 허용을 눌러주면 live server를 사용할 수 있다. 2. live server 실행 아톰의 실행할 코드에서 [ctrl+alt+3]를 누르면 3000포트의 서버로 웹 페이지가 실행된다. 3. live server 종료 아톰의 서버를 실행한 코드에서 [ctrl+alt+q]를 누르면 웹 페이지의..

이전 1 다음

티스토리툴바