단락(Paragraph)이란 내용을 끊어 구분할 수 있는 하나하나의 부분을 의미합니다. HTML에서는 라는 태그를 이용하여 이러한 단락을 표현합니다. 단락의 내용입니다. 띄어쓰기와 줄 내림 HTML 코드에서 띄어쓰기나 줄 내림을 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 영향이 없습니다. 여러 번의 띄어쓰기는 오직 한번의 띄어쓰기로만 인식하게 됩니다. 첫번째 줄입니다. 두번째 줄입니다. 과연 그대로 보여질까요? 저희는 위 소스를 통해서 첫번째 줄입니다. 두번째 줄입니다. 과연 그대로 보여질까요? 이와 같이 출력되기를 원하게 되실 겁니다. 하지만 실제로는 첫번째 줄입니다. 두번째 줄입니다. 과연 그대로 보여질까요? 이와 같이 보여지게 됩니다. 그렇다면 어떻게 해야 내가 원하는 방향으로 내용을 ..

HTML은 제목으로는 다양한 크기의 태그를 통해 표현합니다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 표현하실 수 있습니다. 제목1의 크기 제목2의 크기 제목3의 크기 제목4의 크기 제목5의 크기 제목6의 크기 이런 태그는 제목의 기능으로 중요한 역할을 하며 그외 기능을 수행하고 있습니다.. 여러 검색엔진은(SEO) 각 웹 사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집합니다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있습니다. 검색엔진에 사용하는 이라는 metadata와는 다른 요소입니다.

HTML 요소는 여러가지의 속성을 가질 수 있으며, 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공하게 됩니다. HTML 요소는 시작 태그로 시작해서 종료 태그로 끝납니다. 속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값으로 표현됩니다. 속성명은 언제나 소문자로 작성 HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다만, W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다. 속성값은 언제나 따옴표로 HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습다만, 속성값을 따옴표로 감싸지 않으면, 상황에 따라 오류가 발생할 수 있습니다. 사용예제 파란색 빨간색 글씨 크기 20px p : 태그이름 style : ..

제목 1 입니다. 제목 2 입니다. 제목 3 입니다. 본문 단락입니다. 위 문서는 HTML의 기본적인 구조입니다.저희가 코딩을 하기 위해서는 기본적인 구조를 이해하고 각 상황에 맞는 태그를 활용하여 코드를 정의하여야 합니다.  : 문서가 HTML5 임을 명시합니다.  : HTML 문서의 루트(root) 요소를 정의합니다. : HTML 문서의 metadata를 정의합니다.metadata(메타데이터)란?HTML 문서에 대한 정보이며, 브라우저에는 직접적으로 표현되지 않습니다., , , , 등의 태그들을 이용하여 문서의 제목, 스타일 등을 지정 할 수 있습니다. 은 브라우저의 툴바(toolbar)에 표시되며, 검색 엔진의 결과, 즐겨 찾기 등의 제목이 됩니다.: 브..

HTML이란 무엇일까?? HTML은 (HyperText Markup Language)의 약자로서, 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성되어 있습니다. 각각의 HTML 태그는 웹 페이지의 기능과 디자인을 결정합니다. 태그(tag) HTML 태그는 태그를 괄호()문자로 감싸서 나타냅니다. 태그는 시작과 종료의 이름이 동일하지만 종료에는 이름 앞에 / (슬러쉬)가 존재합니다. 과 같이 종료 태그가 없는 태그도 존재합니다. 이들을 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다. 작성 Html 을 작성하기 위해선 에디터 프로그램이나, 메모장 등을 활용하여 작성 하실 수 있으며, 확장자를 .html로 저장하신 후 웹 브라우저를 통하여 확인 하실 수 있습니다. 현재 H..

HTML은 웹 페이지를 만드는 데 사용하는 마크업 언어이며 매우 쉽게 배울 수 있습니다. Html에 들어가는 이미 정의된 태그와 속성을 통해 쉽게 하실 수 있습니다. html을 시작해 보겠습니다. 준비된 에디터 프로그램을 통해 차근차근 시작해 보겠습니다.

먼저 코딩을 하기 전에 내가 작성한 코드가 실제 웹 화면을 통해 결과물을 보면서 코딩을 할 프로그램이 필요할 것 입니다. 코딩을 한 결과물을 웹에서 보기 위해선 다양한 에디터 프로그램을 통하여 소스를 편집하고, 서버 접속 프로그램을 통하여 내가 만든 소스의 결과물을 서버에 업로드 함으로서 웹사이트의 화면이 보여지게 됩니다. 코딩을 하여 웹 화면에 결과물을 보여 주기 위해 준비물은 크게 3가지 정도가 있습니다. 1.호스팅 서버 : 가비아, 카페24, 닷홈 등 다양한 국내 호스팅 사이트에서 쉽게 서버를 구매하실 수 있습니다. 2.ftp 접속 프로그램 : 파일질라(FileZilla) https://filezilla-project.org/ 알드라이브 https://altools.co.kr/product/ALDR..

내가 만든 디자인으로 웹을 제작하기에 앞서 웹사이트를 기본적으로 구동 하기 위한 웹 표준 기술에 대하여 알아야 합니다. 작가 gstudioimagen 출처 Freepik html, css, javaScript 이 3가지를 웹 표준어라고 합니다. 이들은 웹사이트를 제작하기 위해선 필수로 알아야 하는 요소들 입니다. 그렇다면 위 3가지 요소는 어떤 역할을 할까요?? 복잡하게 생각 할 필요가 없습니다. 조물주가 되어 사람을 만든다고 생각해 봅시다. html : 뼈와 살을 만들고 (웹에서 콘텐츠를 구성하고 표시하는데 사용하는 마크업 언어 입니다.) css : 각각의 특징과 섬세한 디테일, 그리고 화장을 시켜 이쁘게 만들어줍니다. ([Cascading Style Sheets]는 html등 마크업 언어로 작성된 문..

이제 학교, 학원을 통해 교육을 마치고 WEB의 UI/UX 디자인을 관련하여 취업을 준비하거나 프리랜서로서 활동을 시작하고자 하는 디자이너들이 자신이 만든 웹사이트를 직접 개발하거나, 퍼블리셔에게 코딩을 요청하기 전에 알고 넘어가야 할 사항에 대하여 체크해 보고자 한다. 웹 디자이너라면 포토샵(Adobe Photoshop), 피그마(Figma), Adobe XD, Sketch 등의 디자인 Tool을 이용하여 나만의 결과물을 만들고 있을 것 입니다. 그렇다면 디자인을 할 때 어떤 점을 고려해야 할까요?? 반응형과 적응형에 관하여는 들어 보신 분도 계시고 생소하신 분들도 계실거라 생각이 듭니다. 반응형 vs 적응형 웹디자인 디자이너는 다양한 디바이스 환경에 맞춰 사이트를 디자인하게 되는데는 반응형과 적응형 ..