분류 전체보기186 HTML5 기본정리 1 HTML5 변경사항 HTML5 기본 구조 HTML5에서는 DOCTYPE 선언이 매우 간단해졌다. 또한, 문자셋(character set)의 선언도 매우 간단해졌다. HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다. 이전의 기본 문자 인코딩 HTML5에 추가된 요소 및 타입 - 의미(semantic) 요소 : 참조 : https://www.w3schools.com/html/html5_browsers.asp HTML5 Semantic 요소 시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. 시멘틱 요소가 아닌 div, span 요.. 2020. 10. 3. HTML 확장 CSS, Javascript, html과 xhtml CSS (Cascading Style Sheet) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보일지에 대한 정의하는 언어이다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다. HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다. - 인라인 스타일(Inline style) - 내부 스타일 시트(Internal style sheet) - 외부 스타일 시트(External style sheet) 인라인 스타일 (inline style) 인라인 CSS이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. 이 글은 녹색이고 밑줄이 있습니다. 내부 스타일 .. 2020. 10. 3. HTML select, textarea, button, fieldset, label 선택 입력 select 요소 select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력 받을 수 있다. 콤보 박스라고도 하며, 풀다운 메뉴(pull-down menus)라고도 한다. option 요소는 드롭다운 리스트에 선택할 수 있는 각각의 옵션을 명시한다. 좋아하는 과일은? 사과 바나나 오렌지 딸기 selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다. option 요소 option 요소는 여러 항목 중에 선택 가능한 항목이다. option 요소에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 다르다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값.. 2020. 10. 3. HTML 입력폼(Forms), 타입(Type), 속성(Attributes) 입력폼 (form) 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. form 요소는 다음과 같은 문법으로 사용한다. action 속성 action 속성은 입력받은 데이터를 처리할 서버 상의 URL 주소를 명시한다. 전달받은 데이터를 처리하는 서버 프로그램을 폼 핸들러(form-handler)라고 한다. method 속성 method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과.. 2020. 10. 3. 네이버 스마트렌즈로 사진 찍어서 번역하기 Naver Smart Lens (네이버 스마트렌즈) 네이버 어플 중 스마트 렌즈를 알아보자. 휴대폰으로 사진을 찍어 인공지능(AI)으로 검색해서 정보를 제공하는 기능으로 상품이나 QR 코드 등 다양한 정보를 한 번에 확인할 수 있다. 그 중 번역 기능을 살펴보면 상품 설명이나 모니터에 나오는 외국어를 카메라로 찍으면 바로 번역해서 내용을 볼 수 있다. 현재는 네이버 스마트렌즈로 번역할 수 있는 외국어는 '영어', '중국어', '일본어'이다. 네이버 앱 설치 및 실행하기 '플레이 스토어'에서 네이버 앱을 검색하여 설치하고 실행해 본다. 설치된 앱을 실행하면 하단에 녹색 동그라미를 터치하면 앱 메뉴가 주위에 원형으로 나타난다. 그중에 좌측하단에 '렌즈'를 터치하여 스마트렌즈를 실행한다. 카메라 화면으로 넘어.. 2020. 10. 1. HTML 텍스트 요소 제목 (Headings) 제목 ~ 제목을 표현하는 태그를 에서 까지 제공한다. 가장 크기가 큰 태그부터 가장 작은 태그까지의 제목을 표현할 수 있다. 이 것은 제목1 입니다. 이 것은 제목2 입니다. 이 것은 제목3 입니다. 이 것은 제목4 입니다. 이 것은 제목5 입니다. 이 것은 제목6 입니다. ~ 태그의 위아래로는 약간의 여백이 자동으로 삽입된다. 제목은 중요하다. 검색 엔진은 제목를 사용하여 웹 페이지의 구조와 내용을 색인화한다. 사용자는 제목을 보고 페이지의 내용을 파악 하기에 문서 구조에 있어서 제목을 사용하는 것을 중요하다. 표제는 주 표제 다음에 표제 다음 덜 중요한 등으로 사용되어야 한다. 머리말에만 HTML 제목을 사용하기 바란다. 제목을 사용하여 텍스트를 크게 또는 굵게 표시하지 말아.. 2020. 9. 30. HTML 기본요소3, list(리스트), table(테이블) 리스트(List) 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다. HTML에서는 여러 요소들을 나열한 목록이나 명단을 표현 할 수 있는 태그를 제공하고 있다. - 순서가 있는 목록(ordered list) - 순서가 없는 목록(unordered list) - 정의 목록(definition list) 순서가 있는 목록 (ordered list) 순서가 있는 목록는 태그로 작성하고, 여기에 포함되는 각각의 리스트 요소는 태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 표시된다. HTML Java C++ CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다. - dec.. 2020. 9. 30. HTML 기본요소 2, link(링크), image(이미지) 링크 (link) 하이퍼링크(hyperlink)를 간단히 링크(link)라고 부르며, 태그로 표현 'a'는 앵커(Anchor)를 의미한다. 표현 : 링크제목 데니 target 속성 속성값 설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 열린다. _self 링크로 연결된 문서를 현재 프레임(frame)에서 열린다. (기본설정) _parent 링크로 연결된 문서를 부모 프레임(frame)에서 열린다. _top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 열린다. frame 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 열린다. _blank _self _parent _top frame 링크의 상태(state) 다음과 같이 4가지가 있다. 상태 설명 link 아직 한.. 2020. 9. 29. HTML 기본요소 1, meta tag(메타태그), color(색), background(배경) Meta Tag(메타태그) 정리 및 사용법 검색엔진 최적화(SEO)를 위해 중요한 요소인 Meta tag의 속성을 정리 해보자. 태그 요소는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서의 정보, 요약을 담고 있다. Meta tag 속성 정리 ■ 캐쉬 완료(파기) 시간 정의 ■ 최종 수정일을 정의 ■ 캐쉬가 되지 않게 하는 태그 , ■ 웹문서의 언어 설정 ■ 그림 위에 마우스 오버시 이미지 관련 툴바가 생기지 않음 ■ 페이지 이동 ■ 페이지 로딩시 트랜지션 효과(장면 전환 효과) ■ 문서의 제목 , ■ 문서에 대한 간략 한 설명 ■ 키워드 ■ 문서 작성자 ■ 문서의 발행 주체 ■ 문서의 관리자 ■ 문서의 카테고리 ■ 문서를 작성한 에디터 프로그램 ■ 문서 .. 2020. 9. 29. 구글 메시지를 이용, PC에서 문자 보내기 Google 메세지 이용, 내 PC에서 문자 보내기 휴대폰에서 문자를 보낼 때 작은 화면으로 문자를 보낼때 타자속도도 느리고 오타도 많이 발생한다. 장문의 문자를 보낼때는 특히 더 할텐데 내 책상에 키보드를 활용하면 좋을 것이다. 스마트폰과 동기화가 되기 때문에 문자를 보내면 PC와 폰 양쪽에서 기록을 확인할 수 있다. 구글 메세지 앱을 활용하여 컴퓨터와 동기화 하여 PC에서 문자를 보내보자 구글 메세지 앱은 무료 프로그램이다. 핸드폰 요금제가 무료 문자 갯수를 넘어서면 보낸만큼 스마트폰 요금에 청구되는 것이다. 설치하고 실행하기 휴대폰에서 'play 스토어'로 들어가 '구글 메세지'를 검색하여 설치하기를 한다. 구글 메시지 앱을 실행하면, 처음 '기본 SMS 앱 설정' 누르고 메시지 앱 변경에서 '예'.. 2020. 9. 29. HTML 공간 분할(layout, iframe, block & inline) Layout 레이아웃은 특정 공간에 여러 구성 요소를 효과적이고 효율적으로 배치하는 작업을 의미하며, 보기 좋게 구조화 하는 매우 중요한 요소이다. 주로 시맨틱 요소들이 사용되며, 시멘틱(Semantic) 요소는 웹페이지를 쉽게 이해할 수 있도록 정의된 의미론적 태그를 말한다. ● header 웹사이트 상단에 위치하며 주로 로고, 검색, 웹사이트의 이름 등을 표현한다. ● nav 네비게이션 바(Navigation Bar)를 의미하며 카테고리, 메뉴 등을 위치 시킨다. - header 안에 nav 가 포함될 수도 있으며 header 밖으로 나와 단독적으로 사용되기도 한다. ● aside 보통 웹사이트 양옆에 위치하며 본문과는 연관성이 떨어진 내용을 추가한다. ● section html 문서의 전체적인 내용.. 2020. 9. 28. 여기어때 잘난체 다운로드 및 설치 여기어때 잘난체 서체 다운로드 받기 잘난체는 여기어때의 BI 특징을 모티브로 하여 만들어졌다. 여기어때 BI의 가장 큰 특징인 기둥의 시작과 맺음을 그대로 서체에 녹여 내었으며 네모꼴의 꽉 찬 모듈로 BI가 주는 안정적인 느낌이 적용된 서체이다. ㅅ, ㅈ, ㅊ 과 같이 아래 두 획이 교차되는 자음 형태에 뛰고 있는 사람의 형상을 표현하여 여기어때 만의 브랜드 퍼스널리티인 '젊음', '위트'를 서체 속에 담고 있다. 한글 2,350자, 라틴 94자, 약물 986자를 산돌커뮤니케이션과 함께 개발, 각 글자마다 잘난체 만의 독특한 디자인 특징이 반영되어 있고, 굵은 웨이트로 제작되어 제목용 서체로 사용 하였을때 주목성과 가시성이 높은 서체이다. 다운로드 www.goodchoice.kr/font#is-fifth.. 2020. 9. 27. 포토샵으로 청바지 천 효과 문자 만들기 Adobe Photoshop으로 청바지 천 효과, 문자 만들기 800*600 픽셀의 새 문서를 만들기를 한다. 먼저 최종 레이어 창을 보자. 배경 레이어 만들기 전경색을 #83b7ca 로 설정하고 배경색을 #22576b로 설정 한 다음 '배경 레이어'를 전경색으로 채운다. 다음으로 데님 텍스쳐를 만들기 위해 몇가지 필터를 적용 할 것이다. 배경과 텍스트 모두 동일 텍스쳐가 사용된다. '필터/필터 갤러리/스케치 효과/하프톤 패턴' 선택, '크기를 1'로, '대비를 0'으로 변경하고 패턴 유형은 '점'을 선택한다. 다시 '필터/필터 갤러리/예술효과/문지르기 효과'를 선택, 다음과 같이 설정한다. '필터/필터갤러리/텍스처/그레인' 선택, 다음과 같이 설정하면 미묘한 노이즈가 추가되어 사실적으로 보인다. 배경 .. 2020. 9. 26. 포토샵 3D 불투명 아크릴 효과 문자 만들기 Adobe Photoshop 3D 도구를 이용한 불투명 아크릴 효과 만들기 포토샵의 3D 도구 및 설정과 조정 레이어를 활용하여 단순하고 평평하며 희미한 3D 텍스트 효과를 만들어 보자. 먼저 레이어 창을 보자 배경 및 3D 레이어 만들기 '새문서 만들기' 800*600 을 하여 레이어 스타일에서 '색상 오버레이' 색상 #530341 로 하여 배경 레이어를 만들었다. 새련된 느낌의 폰트로 'smarti' 를 입력하고 색상은 흰색으로 'smarti 텍스트 레이어' 를 만든다. 3D 레이어 생성하기 텍스트 레이어를 선택한 상태에서 3D창에서 새 3D 개체 만들기의 소스:선택한 레이어, 3D 돌출 선택 '만들기'를 누른다. 다음 3D 패널과 화면에서 '현재보기'를 더블클릭하여 속성창을 열고 다음과 같이 설정한.. 2020. 9. 25. 소상공인 새희망 자금 1차 지급 신청방법 소상공인 새희망 자금 신청 방법 2차 재난지원금을 신청하라는 문자가 왔다. 서류신청없이 문자를 받고 온라인으로 신청하면 된다. 소상공인 새희망 자금 문자 주 내용 안녕하세요. 귀하는 소상공인 새희망 자금 1차 지급 대상자입니다. 9월 24일부터 신청 홈페이지를 통해서 지원금을 신청할 수 있습니다. 사업자등록번호 끝자리가 짝수이면 짝수인 9월 24일에 신청을 하고 사업등록번호 끝자리가 홀수이면 9월25일에 신청을 하면 됩니다. 9월 26일인 토요일부터는 모든 분이 신청이 가능합니다. ■ 2차 소상공인 재난지원금 지원 내용 1. 지원대상 : 코로나19 확산으로 인한 피해 소상공인 2. 지원금액 : 100만원~200만원 3. 지원기준 : 안내문 참조 ■ 신청방법 포털사이트에서 '소상공인 새희망 자금'이나 '새.. 2020. 9. 25. 이전 1 ··· 7 8 9 10 11 12 13 다음
