본문 바로가기

전체 글168

HTML 목록 정렬되지 않은 HTML 목록 정렬되지 않은 목록은 태그로 시작합니다 . 각 목록 항목은 태그로 시작합니다 . 목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)로 표시됩니다. Coffee Tea Milk 정렬되지 않은 HTML 목록-목록 항목 마커 선택 CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는 데 사용됩니다. disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked 정렬 된 HTML 목록 정렬 된 .. 2020. 2. 10.
HTML 이미지 HTML 이미지 구문 HTML에서 이미지는 태그 로 정의됩니다 . 태그는 속성 만 포함하고, 닫는 태그가없는, 비어 있습니다. 이 src속성은 이미지의 URL (웹 주소)을 지정합니다. 대체 속성 이 alt속성은 사용자가 어떤 이유로 든 이미지를 볼 수없는 경우 (연결 속도 저하, src 속성 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지의 대체 텍스트를 제공합니다. alt속성 값은 이미지를 설명해야합니다. 브라우저가 이미지를 찾을 수 없으면 alt 속성 값이 표시됩니다 . 참고 :alt 속성이 필요합니다. 웹 페이지가 없으면 웹 페이지의 유효성이 올바르게 검사되지 않습니다. 다른 폴더의 이미지 지정하지 않으면 브라우저는 웹 페이지와 동일한 폴더에서 이미지를 찾을 것으로 예상합니다. 그러나 하.. 2020. 2. 10.
HTML 링크 링크는 거의 모든 웹 페이지에 있습니다. 링크를 사용하면 사용자가 페이지 간을 클릭 할 수 있습니다. HTML 링크-하이퍼 링크 HTML 링크는 하이퍼 링크입니다. 링크를 클릭하고 다른 문서로 이동할 수 있습니다. 링크 위로 마우스를 움직이면 마우스 화살표가 작은 손 모양으로 바뀝니다. 링크는 텍스트 일 ​​필요는 없습니다. 이미지 또는 다른 HTML 요소 일 수 있습니다. HTML 링크-구문 하이퍼 링크는 HTML 태그 로 정의됩니다 . Visit our HTML tutorial HTML 링크-대상 속성 이 target속성은 링크 된 문서를 열 위치를 지정합니다. target속성은 다음 값 중 하나를 사용할 수 있습니다 : _blank -링크 된 문서를 새 창이나 탭에서 엽니 다 _self -클릭 한 .. 2020. 2. 7.
HTML 텍스트 관련 요소 HTML 단락 HTML 요소는 단락을 정의합니다 . This is a paragraph. This is another paragraph. HTML 줄 바꿈 HTML 요소는 줄 바꿈을 정의합니다 . 새 단락을 시작하지 않고 줄 바꿈 (새 줄)을 원할 경우 사용하십시오 . 태그는 끝 태그가 없음을 의미 빈 태그입니다. This is a paragraph with line breaks. 아래 문장은 한줄로 표시됩니다. My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. HTML 요소 HTML 요소는 사전 형식화 된 텍스트를 정의합니다. 요소 내.. 2020. 2. 7.
HTML 제목 HTML 제목 제목은 to 태그 로 정의됩니다 . 가장 중요한 제목을 정의합니다. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 일반 문서를 HTML로 다음과 같은 규칙에 맞게 색인화 한다. H1 : 서비스명 H2 : 메인메뉴, 본문, 이용약관 등 H3 : 세부 컨텐츠, 핵심 컨텐츠 등 H4 : 서브 컨텐츠 H5, H6 : 헤딩요소의 파편화를 불러일으킬 여지가 있으므로 가급적 사용하지 않는다. 제목이 중요하다 검색 엔진은 표제를 사용하여 웹 페이지의 구조 및 컨텐츠를 색인화합니다. 사용자는 종종 제목으로 페이지를 훑어 봅니다. 문서 구조를 표시하려면 제목을 사용하는 것이 중요합니다. 제목은 주 제목에 사용되어야하고 그 뒤에 제목이 사용되며 그 .. 2020. 2. 7.
HTML 전체 태그 TagDescription Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation or an acronym Not supported in HTML5. Use instead. Defines an acronym Defines contact information for the author/owner of a document Not supported in HTML5. Use or instead. Defines an embedded applet Defines an area inside an image-map Defines an article Defines content aside from the page cont.. 2020. 2. 7.
HTML 블록 및 인라인 요소 블록요소, 인라인요소 블록요소 (Block Element) 줄을 바꿔 각각 독립된 줄에 표시된다. 별도의 CSS 컨트롤이 없다면 해당 문서 크기만큼의 너비를 가지며, 문서의 위에서부터 차곡차곡 쌓이는 형태로 표시된다. 인라인 요소와 텍스트 혹은 또 다른 블록요소를 포함 할 수 있다. 인라인요소 (Inline Element) 다른 인라인 요소와 같은 줄에 표시된다. 별도의 CSS컨트롤이 없다면 해당 문서의 좌측부터 우측으로 나열되는 형태로 표시된다. 또 다른 인라인 요소와 텍스트를 포함 할 수 있으나, 블록요소를 포함할 수는 없다. 모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다. 두 표시 값은 블록과 인라인입니다. 블록 레벨 요소 블록 수준 요소는 항상 새 줄에서 시작하여 사용 가능한 .. 2020. 2. 7.
HTML 속성 속성은 HTML 요소에 대한 추가 정보를 제공합니다. HTML 속성 모든 HTML 요소는 속성 을 가질 수 있습니다 속성 은 요소에 대한 추가 정보 를 제공합니다 속성은 항상 시작 태그에 지정됩니다 속성은 일반적으로 name = "value" 와 같은 이름 / 값 쌍으로 제공됩니다. alt Specifies an alternative text for an image, when the image cannot be displayed disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link id Specifies a unique id for an element src Spec.. 2020. 2. 7.
HTML 기본 태그 HTML 문서 모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 . HTML 문서 자체는로 시작 하고로 끝납니다 . HTML 문서에서 보이는 부분은와 사이 에 있습니다. My First Heading My first paragraph. HTML 제목 HTML 제목은 to 태그 로 정의됩니다 . 가장 중요한 제목을 정의합니다. 가장 중요한 제목을 정의합니다. This is heading 1 This is heading 2 This is heading 3 HTML 단락 HTML 단락은 태그 로 정의됩니다 . This is a paragraph. This is another paragraph. HTML 링크 HTML 링크는 태그 로 정의되고 링크 대상이 href속성에 지정되어 있습니다. 속성은 HTML .. 2020. 2. 7.
html이란? HTML이란 무엇입니까? HTML은 웹 페이지 작성을위한 표준 마크 업 언어입니다. HTML은 Hyper Text Markup Language의 약자 HTML은 웹 페이지의 구조를 설명합니다 HTML은 일련의 요소로 구성 HTML 요소는 브라우저에 내용을 표시하는 방법을 알려줍니다 HTML 요소는 태그로 표시됩니다 HTML 태그는 "제목", "단락", "표"등과 같은 콘텐츠를 레이블링합니다. 브라우저는 HTML 태그를 표시하지 않지만이를 사용하여 페이지의 컨텐츠를 렌더링합니다 간단한 HTML 문서 My First Heading My first paragraph. 선언은 HTML5가 될이 문서를 정의 요소는 HTML 페이지의 루트 요소이고 로 시작해서 로 끝납니다. 요소는 문서에 대한 메타 정보를 포함 요.. 2020. 2. 7.
와이어프레임/프로토타입 제작에 유용한 라이브러리 Kakao Oven Web / Free 다음 카카오에서 제작한 웹 기반 프로토타이핑 툴로 기본으로 제공되는 디자인 요소들이 편리한 사용을 도와주며, 직관적인 인터페이스를 갖추고 있어 초보 기획자에게 유용한 툴이다. 페이지 혹은 요소마다 링크를 걸어 웹 테스트 화면을 만들 수 있으며 아이디어 단계나 초기 기획 회의 단계에서 간편하게 사용이 가능하다. 모든 기능은 무료로 사용이 가능하다. https://ovenapp.io/ OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io Sketch Mac/Purchase Mac 기반의 와이어프레임, 프로토타이핑, 디자인 툴이다. 이미 많은 사용자가 사용하고 있는 주요 디자인 툴로 대부분의 웹/앱.. 2020. 2. 6.
구글 인터랙티브 디벨로퍼 김종민 https://blog.cmiscm.com/ Jongmin Kim Blog Interactive developer & designer Jongmin Kim's blog. blog.cmiscm.com DEVELOPER, DESIGNER, MAKER 개발자, 디자이너, 제작자 김종민은 국제적인 수상 경력에 빛나는 Interactive Developer & Designer로 현재 Google의 선임 UX 엔지니어로 일하면서 미래의 아이디어와 창의적인 작품을 개발하고 있습니다. 종민은 자신의 상업적인 업무보다는 개인의 업무로 더 잘 알려져 있으며, Form Follows Function 프로젝트는 HTML5가 얼마나 멀리 갈 수 있는지 강조하는“대화 형 경험”을 모으고 집중시키는 컬렉션입니다. 수상 경력에 빛나.. 2020. 2. 6.
FileZilla 설치하기 1. 파일질라 홈피 접속 https://filezilla-project.org/ FileZilla - The free FTP solution Overview Welcome to the homepage of FileZilla®, the free FTP solution. The FileZilla Client not only supports FTP, but also FTP over TLS (FTPS) and SFTP. It is open source software distributed free of charge under the terms of the GNU General Public Licens filezilla-project.org 2. Download FileZilla Client 다운로드 3. 일반 .. 2020. 2. 6.
닷홈 웹호스팅 가입하기 1. 웹호스팅이란? 세팅이 완료된 웹서버 일정공간 임대 웹서버를 직접 설치하지 않고도 인터넷에 홈페이지를 개설/운영할 수 있게 세팅이 완료된 웹서버의 일정공간을 임대하여, 사용자가 직접 서버를 운영하는 것과 같은 효과를 제공하는 네트워크 서비스입니다. 2. 대표 웹호스팅 사이트 - DOTHOME 닷홈의 [무제한 웹호스팅 Free]버전은 도메인만 연결하면 무료로 사용 가능하다. www.dothome.co.kr/web/premium/index.php 닷홈 - 호스팅은 닷홈 닷홈은 무제한 웹호스팅, 무료호스팅, 도메인, 홈페이지빌더, 무제한메일, SSL보안인증서, 서버호스팅, 코로케이션 서비스를 제공하고 있습니다. www.dothome.co.kr - CAFE24 cafe24는 우리나라에서 가장 많이 사용하는 .. 2020. 2. 6.
WDP 커리큘럼 웹퍼블리싱 & 웹디자인기능사 카카오톡 오픈 채팅방 open.kakao.com/o/g9xYYgxc 웹퍼블리싱 & 웹디자인기능사 #웹퍼블리싱 #웹디자인기능사 #웹표준 #HTML #CSS #웹접근성 open.kakao.com 교과목명 능력단위명 능력단위요소 훈련일정 평가일 평가방법 프로토타입 기초데이터 수집 및 스케치 프로토타입 게초데이터 수집 및 스케치 기초데이터 수집하기 레퍼런스 조사.분석하기, 아이디어 스케치하기 포트폴리오 프로토타입 제작 및 사용성 테스트 프로토타입 제작 및 사용성 테스트 프로토타입 제작하기 사용성 테스트하기 테스트 수정사항 반영하기 포트폴리오 디자인 구성요소 설계 디자인 구성요소 설계 스토리보드 설계하기 심미성 구성요소 설계하기 사용성 구성요소 설계하기 매체성 구성요소 설계하기 포트폴.. 2020. 2. 6.
2020년 웹디자인 기능사(큐넷), GTQ(KPC자격) 일정 웹디자인기능사(큐넷) http://www.q-net.or.kr/crf005.do?id=crf00503&gSite=Q&gId=&jmCd=7798&jmInfoDivCcd=B0&gbnn=gbnSubtab2 국가자격 종목별 상세정보 | Q-net www.q-net.or.kr GTQ (KPC자격) https://license.kpc.or.kr/nasec/qlfint/qlfint/selectGtqinfomg.do GTQ 그래픽기술자격 소개 잠시만 기다려 주세요 Loading... GTQ 그래픽기술자격 license.kpc.or.kr 2020. 2. 6.
웹디자인, 웹퍼블리싱 준비할 것들 1. 네이버카페 가입 https://cafe.naver.com/mocoding 인터랙티브웹 / 웹디자인기능사 / H... : 네이버 카페 웹과 모바일의 디자인과 코딩을 배우는 곳 cafe.naver.com 2. 프로그램 설치 디자인 편집 Adobe Photoshop https://www.adobe.com/kr/products/photoshop.html Adobe XD https://www.adobe.com/kr/products/xd.html sketch (MAC) https://www.sketch.com/ The digital design toolkit www.sketch.com 브라우저 https://www.google.com/intl/ko/chrome/ Chrome 웹브라우저 더욱 스마트해진 Goog.. 2020. 2. 6.
ATOM 설치 1. atom 설치하기 아래 링크에서 Download를 눌러 atom을 설치합니다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. atom 패키지 설치하기 emmet 약어를 이용하여 쉽고 빠르게 코딩할 수 있도록 도와줍니다. https://github.com/emmeti.. 2020. 1. 30.