태그 검색 결과, 14
[CSS] 6. 링크에 스타일 적용
1. 스타일 링크 HTML 링크에는 다양한 CSS 속성을 적용시킬 수 있고 또한 상태마다 다른 스타일을 지정해 주는 게 가능하다. 아무 스타일도 지정해 주지 않았을 때의 기본 링크 스타일 2. 네 가지 링크 상태 1) a:link : 아직 방문하지 않은 링크2) a:visited : 방문한 링크3) a:hover : 마우스를 올려놓을 때의 링크4) a:active : 클릭하는 순간의 링크 순서의 규칙 - a:hover는 a:link와 a:visited 뒤에 와야 함 - a:active는 반드시 a:hover 뒤에 와아 함 - 순서를 지키지 않고 작성하면 스타일이 적용되지 않을 수 있음 3. text-decoration 적용 주로 링크의 밑줄을 제거할 때 사용한다. 1234567891011121314151..[CSS] 5. 폰트 설정하기
1. 폰트 패밀리 설정 (font-family) 텍스트의 폰트를 지정하는 속성이다. 경우에 따라 브라우저가 폰트를 지원하지 않거나 사용자가 가지고 있지 않을 경우해당 폰트가 표시되지 않는데, 이를 대비하여 여러 개의 폰트를 함께 지정해 주어야 한다. 브라우저는 첫 번째로 지정해준 폰트를 지원하지 않으면 자동으로 다음 폰트로 대체시킨다. 각 폰트는 쉼표로 구분하고, 폰트 이름에 공백이 존재한다면 큰따옴표로 묶어주어야 한다. - Serif(Times New Roman, Georgia) : 글자 끝에 삐침이 있다.- Sans-serif(Arial, Verdana) : 글자 끝에 삐침이 없다.- Monospace(Courier New, Lucida Console) : 모든 글자의 너비가 같다. 2. 폰트 크기 ..14. 글자 서식 지정과 특수 문자 표현
글자를 다양한 모습으로 나타내는 태그들 시작 태그와 종료 태그 사이에 서식을 지정할 텍스트를 넣어서 사용한다. 태그 : 텍스트를 굵게 표시함태그 : 텍스트를 굵게 표시함태그 : 텍스트를 이탤릭체로 표시함태그 : 텍스트를 이탤릭체로 표시함태그 : 텍스트에 밑줄을 표시함 : 텍스트를 강조함 : 텍스트를 조금 작게 표시함 : 삭제된 텍스트를 표시함 (취소선) : 추가된 텍스트를 표시함 (밑줄) : 텍스트를 아랫첨자로 표시함 : 텍스트를 윗첨자로 표시함 : 키보드 입력으로 표시함 : 컴퓨터 코드로 표시함 : 컴퓨터 프로그램의 샘플 출력을 표시함 : 변수를 표시함 * 브라우저 상에서 은 와 같이, 은 와 같이 보여지지만 의미상으로는 다르다. 과 은 표시하는 텍스트가 중요하다는 뜻을 추가적으로 담고 있다.* , ,..13. 양식 만들기 <form>
설명 HTML에서 태그는 사용자의 입력을 받아서, 입력 받은 데이터를 서버로 전달하는 역할을 합니다.웹 페이지에서 이 '폼'을 만드려면 태그를 사용해야 하고, 이 태그 안에서 , , , 등을 사용하여 페이지 상에서의 다양한 입력 양식을 나타낼 수 있습니다.보통 로그인 창이나 회원가입 창에서 이 태그를 사용한 것을 많이 볼 수 있습니다. 사용법 양식 정의1) - 사용자의 입력을 받기 위한 HTML 양식을 만듭니다. - 속성 속성 설명 accept-charset 전송되는 양식에 사용된 문자셋 지정 action 양식을 전송할 URL 지정 autocomplete 사용자가 이전에 입력한 값을 기반으로 브라우저가 양식을 자동으로 완성시킬지의 여부 autocomplete="on" - 자동 완성시킴, autocompl..12. <table>태그로 표 만들기
설명 테이블(Table)은 표·목록을 뜻합니다.웹 문서를 더욱 깔끔하게 만들고 정보를 조직적으로 나타내기 위해 테이블을 이용합니다.이 테이블 안에는 텍스트, 이미지, 목록, 다른 테이블이 오게 할 수도 있고 문서의 레이아웃을 테이블로 구성할 수도 있습니다. (하지만 레이아웃에 을 이용하는건 권장되고 있지 않습니다.)테이블을 만들기 위해 사용하는 각 태그들은 종료 태그를 써주어야 합니다. 사용법 1) HTML 테이블을 정의하며 테이블의 시작과 끝을 나타냅니다. 안에는 최소한 하나 이상의 , 요소를 가지고 있어야 합니다. 2) 테이블의 행을 나타냅니다. 하나 이상의 나 요소를 포함해야 합니다. 3) 테이블의 머릿글 셀을 나타냅니다. 예를 들어 표의 첫 번째 행이나 모든 첫 번째 열의 내용을 제목으로 나타내고..11. 내부 프레임 <iframe>
설명 iframe은 내부 프레임(inline frame)이라는 의미로, HTML문서의 특정 위치에 다른 HTML문서를 불러올 수 있는 태그입니다.현재 웹 문서에 또 다른 웹 문서를 삽입할 수 있습니다.만약 을 지원하지 않는 브라우저에서 처리하려면, 과 사이에 텍스트를 추가해야 합니다. 속성 속성 값 설명 HTML5 지원 name text iframe의 이름 지정 sandbox allow-forms/allow-pointer-lock/ allow-popups/allow-same-origin/ allow-scripts/allow-top-navigation iframe의 콘텐츠에 제한 설정 src URL iframe에서 표시할 문서 URL 지정 srcdoc HTML_code iframe에서 표시할 HTML콘텐츠..10. 멀티미디어 삽입하기
지난 글에서는 웹 문서에 이미지를 삽입하는 방법을 알아보았는데, 이번에는 영상, 음성, 플래시 파일과 같은 멀티미디어 개체를 삽입하는 방법을 알아보겠습니다. 01. 태그 설명 외부 응용 프로그램이나 플러그인에 대한 컨테이너를 정의합니다.동영상, 음악, 플래시 등의 멀티미디어의 삽입이 가능하며 종료 태그 없이 사용합니다. 속성 속성 값 설명 height pixels 컨텐츠의 높이 지정 src URL 삽입할 외부 파일의 주소 지정 type media_type 컨텐츠의 미디어 유형 지정 width pixels 컨텐츠의 너비 지정 예제 1) 아무 멀티미디어 파일을 준비합니다. 저는 Pixabay에서 저작권이 없는 동영상을 다운받았습니다. 2) html 편집기로 다음과 같이 작성합니다.12345678910 멀티미..9. 이미지맵 설정하기 <map>, <area>
01. 이미지맵(Image Map)이란? 하나의 이미지를 일정 구역으로 분할해, 각 영역에 하이퍼링크를 연결하여 특정 영역을 클릭하면 지정된 페이지로 이동할 수 있도록 하는것을 이미지맵이라 합니다.태그에 링크를 연결했을 경우 보통 하나의 이미지에는 하나의 URL만 연결하지만, 이미지맵을 이용하면 하나의 이미지를 여러 영역으로 나누어 여러 개의 링크를 설정할 수가 있습니다. 02. 이미지맵 만들기 웹 문서에서 이미지맵을 나타내기 위해선 태그와 태그가 필요합니다. 그와 함께 태그도 필요하고(이미지 삽입), 요소가 항상 태그 내부에 중첩된다는 특징도 있습니다. 태그 속성 속성 값 설명 name mapname 이미지맵의 이름 지정(필수 사항) 태그 속성 속성 값 설명 HTML5 지원 alt text 영역의 대체..8. 문서 연결 태그 <a>태그
01. 하이퍼링크란? 하이퍼텍스트 문서 내에서 페이지 간의 이동을 자유롭게 해주는 링크를 '하이퍼링크(hyperlink)'라고 부릅니다.여기서 연결할 수 있는 링크는 텍스트 뿐만 아니라 이미지와 같이 각종 멀티미디어 요소도 모두 연결이 가능합니다.웹 문서 내에서 나타나는 형태는 밑줄이 그어진 형태나 본문 글씨색과는 다른 색으로 표시되며, 마우스 포인터를 가져다 댈 경우 포인터의 모양이 바뀌게 됩니다.일반적으로 브라우저에서 방문하지 않은 링크는 파란색, 방문한 링크는 자주색, 활성된 링크는 빨간색 으로 나타납니다.(활성화된 링크란 마우스로 누르고 있는 상태를 뜻합니다.) 02. 하이퍼링크를 정의할 수 있는 태그 속성 속성 값 설명 HTML5 지원 download filename 링크 클릭 시 파일이 다운로..