반응형

웹 디자인/HTML · CSS 8

[HTML·CSS] div태그로 화면 공간 분할하기

HTML에서 div 태그는 주로 웹사이트의 레이아웃 구조를 설계하고 화면을 분할할 때 쓰인다. 과거 웹사이트에서는 table 태그로 공간 분할을 많이 했지만 요즘엔 div 태그를 이용한다고 한다. 하지만 div 태그는 하나의 공간을 의미하는 태그로 정확히 어떤 역할을 하는지 알 수가 없다. 그로인해 HTML5에서 레이아웃 관련 새로운 태그들이 추가되었다. 추가된 태그는 다음과 같다. 태그 설명 header 웹사이트의 메타데이터를 담고 있고, 페이지의 타이틀을 보여주는 부분 nav 페이지 이동할 때 이용하는 부분 aside 본문 옆에 존재하면서 주로 광고나 카테고리 목록으로 이용하는 부분 section 본문을 여러 개 포함하고 있는 부분 article 본문의 주내용이 들어가는 부분 footer 웹사이트의 ..

[HTML/CSS] <video> 태그로 간단한 동영상 설정하기(iframe 태그)

광고 매체의 홈페이지를 접속하면 메인 화면에서 자동으로 재생되는 동영상을 흔하게 볼 수 있습니다. 이번 포스팅은 태그를 이용해서 간단한 동영상을 띄워보겠습니다. 저번 이미지 태그 포스팅에서도 말씀드렸지만 저작권에 주의해서 사용해주셔야합니다. HTML을 이용해서 동영상을 띄우는 방법은 두 가지가 있습니다. 태그 유튜브에 게시된 동영상을 가져와서 출력 태그 직접 가지고 있는 동영상 파일을 출력 video 태그 기본 구조 태그는 주로 태그와 함께 사용합니다. 속성 설명 autoplay 자동 재생 ※ 지정할 경우 preload는 무시 controls 제어 컨트롤러 표시 crossorigin 외부의 특정한 사이트에서 동영상을 가져올 때 동일한 출처인지 확인 여부 loop 반복 재생 preload 사용자의 사용 여..

[HTML/CSS] table 태그로 표 만들기 (tr, th, td 태그)

이번에 알아볼 기본 태그는 태그입니다. 표를 만드는 대표적인 태그로 , 과 태그를 이용해서 표의 행과 열, 너비/높이 등을 설정할 수 있습니다. 각 각의 태그가 어떤 역할을 하고, 어떤 구조로 표가 만들어지는에 대해서 알아보겠습니다. 기본 구조 표를 만드는 태그의 기본 구조입니다. 태그는 행, , 태그는 열을 정의하는 태그입니다. 표 제목1 표 제목2 표 내용1 표 내용2 표는 어디 간 거지? 위의 코드를 실행해보면 실제로 표는 온데간데없고, 글자만 두둥실 떠다니는 것을 볼 수 있습니다. 이상한 게 아니고 정상입니다! 표의 테두리를 설정해주기 위해선 태그를 사용해야 합니다. 태그를 이용하면 시각적으로 다양한 기능을 사용할 수 있습니다. 이번 포스팅에서는 가볍게 표의 테두리를 설정하는 방법만 알고 넘어가겠..

[HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그)

오늘은 a 태그와 이미지 태그에 대해서 알아보겠습니다. 요즘 쇼핑몰, 뉴스 등 이미지를 사용하지 않는 곳이 없습니다. 하지만 이미지를 사용하실 때는 주의할 점이 있습니다. 바로 "저작권"입니다. 개인적으로 이용하는 것이 아닌 상업적으로 이용하려는 이미지는 항상 저작권을 주의해야합니다. 이미지뿐만 아니라 글꼴, 동영상 등 모든 것들에는 저작권이 있습니다. 항상 주의하시고 사용하시길 바랍니다. 1. 이미지 태그 이미지 태그 속성 의미 src 이미지 경로 width 이미지 너비 height 이미지 높이 title 이미지 풍선 도움말 border 이미지 테두리 두께 alt 이미지가 로딩이 되지 않았을 때 보여주는 텍스트 이미지태그를 사용하는 방법 절대 경로와 상대 경로 이미지 태그에 src 속성에는 이미지 경로..

[HTML/CSS] 기본적인 글꼴 태그 알아보기

이번 포스팅은 태그 안에 들어가는 기본적인 태그들 중에 글꼴 태그를 위주로 알아보겠습니다. HTML에도 한글, 엑셀, 파워포인트 등에서 볼 수 있는 [텍스트 진하게], [텍스트 기울기], [밑줄] 등의 다양한 글꼴 기능을 사용할 수 있습니다. 1. 줄바꿈 태그 과 공백 nbsp; 두부 블로그에서 HTML을 배우자! 두부블로그에서 HTML을 배우자! 두부 블로그에서 자바스크립트를 배우자! 위의 코드를 보면 알 수 있듯이 태그에서 아무리 'spacebar'와 'Enter'키를 눌러도 웹브라우저 상에서는 변화가 없습니다. 그렇다면 줄바꿈을 할 수 없는 걸까요? 아닙니다! 태그를 이용해서 줄 바꿈을 할 수 있습니다. 또한, 여러번의 공백에도 불구하고 웹브라우저 상에서는 단 한 번의 공백만 이루어졌습니다. 이러한..

[HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등)

HTML에는 가장 기본적이면서도 필수적인 태그가 몇 가지 존재합니다. 웹 브라우저에서 사용자들에게 보이는 것에 관여를 하지 않지만, HTML을 사용하는 개발자들의 암묵적인 약속과 같은 태그이기에 지켜주는 것이 좋습니다. 어떤 형식으로 파일이 작성되었는지 알려주는 태그 웹페이지의 정보를 담거나 외부 자료들을 해당 문서에서 사용하기 위해 링크하는 태그들을 담는 태그 웹페이젱서 실제로 사용자가 볼 수 있는 부분을 담는 태그 title, meta 태그 등 h, p, img, i 태그 등 주석 처리 프로그래밍을 하면서 메모를 하는 경우가 빈번하게 발생합니다. 그런 경우에 주석 처리를 해서 코드에 설명을 추가한다거나 메모를 해둘 수 있습니다. 주석 처리는 웹브라우저가 해석하지 않으므로 브라우저 화면에서는 확인할 수..

[HTML/CSS] 블록과 인라인 요소 태그 종류와 특징

HTML에는 다양한 태그가 있습니다. 많은 태그들을 이용해서 사용자에게 보여줄 디자인과 기능을 만들어냅니다. 태그는 크게 보면 블록 요소와 인라인 요소, 두 가지로 나눌 수 있습니다. 이름만 들으면 감이 잘 안오시죠? 블록 요소는 쉽게 말해서 '자동 줄 바꿈'이 되는 태그, 반대로 인라인 요소는 줄 바꿈 기능이 없습니다. 그러면 지금부터 두 가지 요소에 대해서 알아보겠습니다. 블록 요소 자동 줄 바꿈 기본적으로 너비(width) 100% 값을 가짐 너비(width) 와 높이(height) 설정 가능 margin 과 padding 설정 가능 종류 : article, canvas, audio, vidio, h, div, figure, footer, header, ol, ul, table, p 등이 존재 블록..

[HTML/CSS] 편집 프로그램 Sublime Text 다운로드 및 사용법

자바스크립트는 인터프리트 형태의 객체 지향 프로그래밍 언어로 코드가 작성된 순서대로 실행됩니다. 객체를 기반으로 하는 언어로 HTML과 CSS와 같이 사용되며, 프론트 엔드 분야에서 손꼽히는 언어입니다. 클라이언트 쪽에서 실행되는 코드이므로 개발자 도구(F12)에 공개되어 보안에 취약한 단점을 가지고 있지만 쉽게 배울 수 있는 장점을 가지고 있습니다. 접근이 쉬운만큼 다양한 편집 프로그램이 존재한다. HTML과 CSS, JavaScript를 편집하는 프로그램은 엄청 다양하고, 무료로 제공하는 프로그램들도 많습니다. 그 중에서 실무자들이 많이 쓰는 무료 프로그램을 몇 가지 소개하겠습니다. Sublime Text Brackets ATOM OS, Window, Linux 지원 OS, Window, Linux ..

반응형