Gentleman'study 젠틀맨

비디오(video) 요소 HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다. 비디오 요소의 속성 예제 control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다. 태그 사이에 존재하는 텍스..

닫는 태그가 없는 태그 일반적인 태그는 처럼 시작하면 처럼 닫아 주어야 합니다. 하지만 일부 태그는 닫지 않는 경우가 있는데 이를 닫는 태그가 없는 태그라고 합니다. 닫는 태그가 없는 태그들 등의 태그는 닫는 태그가 없는데, 그 이유는 태그 내부에 넣을 값이 없기 때문입니다. 기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다. 줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령을 적어 주어야 하며, HTML에서는 를 통하여 줄 바꿈을 합니다. 요소에 이미지를 넣습니다. src특성과 함께 사용해야 하며, 포함하고자하는 이미지로의 경로를 지정합니다. 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 ..

1. section 주제 별로 영역을 그룹화 하기 위해 사용 되며 주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다. 상품 소개 상품 1 상품 2 상품 3 2. article section 태그와 같이 주제 별로 영역을 그룹화할때 사용하지만 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다. 블로그 및 SNS 영역 / 뉴스 기사 / 신문 내용 등에 사용된다 블로그 글 포스팅 1 포스팅 2 포스팅 3 3. 차이점 article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다. section은 주제별로 구분한 그룹이다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 ..

비디오(video) 요소 HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다. 비디오 요소의 속성 예제 control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다. 태그 사이에 존재하는 텍스..

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티(entity)의 이름은 대소문자를 구분합니다. HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 엔티티 문자엔티티 이름16진수 엔티티 숫자설명 줄 바꿈 없는 공백 > > 보다 큰 & & & AND 기호 " " " 큰따옴표 ' ' ' 작은따옴표 발음 구별 부호(diacritical marks) 발음을 나타내..

그리드 시스템이란? 그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다. 그리드 시스템의 장점 디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로..

웹 표준이란? 웹 표준은 웹 접근성을 지키기 위한 표준입니다. 어떤 웹 브라우저를 사용하던, 모바일, 태블릿 등 어떤 화면 사이즈에서 웹을 이용하던 어려움 없이 이용하도록 하는 표준입니다. W3C라는 국제 웹 표준화 단체에서 발표한 자료들에 기반해 만들어집니다. 웹 표준을 지켰을 때 장점 소스의 통일화로 수정 및 운영관리 용이 다양한 브라우저, 휴대폰, PDA, 장애인 지원용 프로그램에서도 대응이 가능하기때문에 접근성이 향상 검색 로봇 수집을 통한 효휼적 노출과 같은 검색엔진 최적화 가능 효율적 소스를 통해 File size 축소 및 서버 저장 공간을 절약 CSS와 HTML 문서의 분리 등을 통해 페이지 로딩속도 향상과 같은 효율적인 마크업 가능 웹 접근성이란? 모두가 차별없이 웹에서 제공하는 정보를 이..

시멘틱 태그(semantic tag) 시멘틱 태그(semantic tag)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. HTML5에서 추가된 시멘틱 태그 HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다. 1. header 요소 2. nav 요소 3. main 요소 4. section 요소 5. articl..

HTML 링크(Link) 오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현합니다 문법 HTML 링크 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 예제 이 링크를 클릭해 보세요! 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. targer 속성 target 속성값설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _..

웹에서 이미지를 표현하는 방법은 3가지로 나눌 수 있습니다. HTML 태그를 통해서 : img 태그 (의미가 있는 이미지) CSS 속성을 통해 : background 속성 (의미가 없는 이미지) 이미지 스프라이트 : background와 ir 효과를 통해서 이미지를 표현 img 태그를 통해 img는 HTML 문서에 이미지를 삽입하는 태그입니다. 주요 속성은 src, alt, width, height, loading입니다. src alt width height loading 예제 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 값이 출력됩니다. width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율..

HTML 리스트 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공하고 있습니다. 순서가 없는 리스트(unordered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트(ul) 순서가 없는 리스트는 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다. - disc : 검..

테이블 만들기 table 테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그는 다음과 같은 태그들로 구성됩니다. 1. 태그는 테이블에서 열을 구분해 줍니다. 2. 태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다. 3. 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다. 참치 고래 상어 문어 오징어 고등어 CSS의 CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다. border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다. 위의 예제에서 테이블의 테두리(border)가 두 줄씩..

HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 블록(block)타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. p요소는 display 속성값이 블록인 요소입니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.요소는 주로 여러 요소들의 스타일을..