마크다운(markdown)

1. 마크다운이란? 일반 텍스트 문서의 양식을 편집하는 문법, README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능 2. 기본문법 ※ 개행: 스페이스 2개 + 엔터 ※ 문단구분: 엔터 2번 ①. 제목 # 텍스트 #을 하나 쓰면 HTML의 태그를, #을 두개 쓰면 태그를 의미한다. 즉, #은 하나에서 여섯개까지 쓸 수 있고, #이 늘어날때마다 제목의 수준은 내려간다.(보통 글씨 크기가 작아진다.) ②. 번호 없는 리스트 -/+/* 텍스트 ③. 번호 있는 리스트 숫자. 리스트 ④. 기울인 글씨 (html의 태그) *텍스트* or _텍스트_ ⑤. 굵은 글씨 (html의 태그) **텍스트** ..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 23.
• textsms

[UX/UI] HTML 마크업 - http://www.subcide.com (2)

마크업 실습 참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/ skip navication Skip to content Main menu About Services Portfolio Contact us Enlighten Designs is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio. We are currently undergoing a 'face lift', so if you have any question..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML 마크업 - http://www.subcide.com (1)

마크업 실습 참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/ 그룹 마크업 div 만을 사용해서 마크업을 합니다 skip navication Skip to content Enlighten Designs Main menu About Contact Us Aside 섹션 마크업 브라우저 버전 < IE 9 인 경우에는 HTML5 요소가 제대로 적용되지 않을 수 있습니다. 따라서 아래 링크에서 제공하고있는 브라우저 버전호환을 도와주는 자바스크립트 파일을 사용하는 것으로 해결이 가능합니다. https://raw.githubusercontent.com/aFarkas/html5shiv/master/dist/html5shiv.min.js s..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 폼 컨트롤

폼의 양식 보통 요즘은 fieldset 테두리도 지우고, legend의 글자도 css로 없애는 편입니다 fieldset legend 버튼 : button | input 기능은 같지만, button에는 내부에 아이콘도 넣을 수 있고, 태그도 집어넣을 수 있기 때문에 디자인적인 면에서 많이 사용하는 편이다. 전송 한 줄 문자입력 : input label - for 속성과 input - id, name 속성을 동일하게 입력해야 합니다. input 태그가 가지는 대표적인 속성 1) disabled = "disabled" 2) placeholder = "입력 힌트 문장" 3) autofocus="autofocus" : 처음에 어디에 포커스를 둘지 설정 4) required="required" : 필수입력항목 지정..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 링크와 이미지

링크 하나씩 알아가는 블로그 하나씩 알아가는 블로그(새탭) 이미지 이미지 다운로드(IE 제외) webmaster@gmail.com 이미지 이미지에 대한 설명을 작성한다. 작성된 설명은 css를 통해서 보이지 않지만 style을 통해서 밀어내기만 했기 때문에 텍스트가 살아있어서 더 나은 웹 접근성을 확보할 수 있다. 이미지 맵 img의 usemap 값은 map의 id 속성을 참조하여 앞에 #을 붙여서 넣어줍니다. area의 coords 옵션에서의 좌표를 알아내기 위해서는 다음 절차를 따라야 합니다. 1. 해당하는 이미지를 포토샵으로 불러옵니다. 2. Window > info 메뉴를 클릭한 후 각 좌표를 알아냅니다. 3. 해당 좌표를 적어둡니다. 4. area의 태그에 coords 속성에 입력 후 테스트를 ..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 테이블 셀합치기

샘플 테이블 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 가로로 합치기 가로로 합치기 4 5 6 7 8 9 가로로 합치기 4 5 6 7 8 9 세로로 합치기 세로로 합치기 2 3 5 6 8 9 세로로 합치기 2 3 5 6 8 9 가로세로 원하는만큼 합치기 가로세로 원하는만큼 합치기 3 6 7 8 9 가로세로 원하는만큼 합치기 3 6 7 8 9 출처 : know-one-by-one.tistory.com/23

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 테이블을 구성하는 태그

테이블 레이아웃 테이블 헤더 th 태그를 사용하는 경우에는 scope 속성을 필수로 입력해주어야 합니다 테이블의 헤더 컬럼 테이블의 헤더 컬럼 테이블의 헤더 컬럼 테이블의 헤더 컬럼 테이블 데이터 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블의 데이터 컬럼 테이블 결과값 결과 컬럼 결과 컬럼 결과 컬럼 결과 컬럼 출처 : know-one-by-one.tistory.com/22

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 목록을 구성하는 태그

순서가 없는 목록 메뉴 1 메뉴 2 메뉴 3 서브메뉴 3-1 서브메뉴 3-2 서브메뉴 3-3 순서가 있는 목록 메뉴 1 메뉴 2 메뉴 3 서브메뉴 3-1 서브메뉴 3-2 서브메뉴 3-3 출처 : know-one-by-one.tistory.com/21

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML - 문장을 구성하는 태그

자주 사용하는 기호 문장을 강조 맛있었다 20,000원이다 피자를 먹었다 단어의 정의 세계무역기구 세계무역기구 용어의 축약 WTO WTO 노래, 영화, 그림 등의 제목 다음은 소설 대도시의 사랑법의 한 부분입니다. 앞에있는 내용의 부가설명 가격 : 200,000원 (부가세 별도) 가격 : 200,000원 (부가세 별도) 루비주석 Hello안녕 Hello안녕 水수魚어之지交교 水수 魚어 之지 交교 시간 오늘은 일요일입니다 2000년 01월 01일에 나무를 심었습니다 제목 h1~h6 태그 안에는 p 태그가 들어갈 수 없습니다 제목 제목 제목 제목 제목 제목 단락 p 태그 안에는 h1~h6 태그가 들어갈 수 없습니다 Lorem Ipsum is simply dummy text of the printing and ..

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms

[UX/UI] HTML 레이아웃 - 대분류

HTML 항상 이런형태로 구간을 나눈 다음 html 코드를 작성하는 것을 추천합니다. 다른 형태의 구조가 필요할 때도 있지만 처음 접하거나, 공부하는 입장에서는 특정 형식을 따라가는것이 더 안정감있게 코드를 작성할 수 있습니다 레이아웃 출처 : know-one-by-one.tistory.com/19

• format_list_bulleted Web Programing/UI, UX, html
• · 2021. 3. 16.
• textsms