Emmet설명.txt

1. Emmet? 강력한 자동 완성 기능 등으로 HTML 생성 속도

2. Emmet 구문 요소 (요소) 생성 생성 된 요소의 이름을 입력 tab하십시오. Emmet에는 미리 정해진 태그 이름이 없다 . , 아무 이름으로나 태그를 생성 할 수 있습니다.

3. 템플릿 열기와 사용자 정의 태그 입력 입력 html:5[tab] 또는 ![tab]

출력 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> 1 페이지

Emmet설명.txt

</html>

입력 <helloworld>

출력 <helloworld></helloworld>

4. 구조화하기 (Nesting operator) Emmet 문법을 활용하여 요소들의 구조를 간편 히 생성 할 수 있다.

(1) 자식 요소 : > > 사용하여 자식 요소를 생성 할 수있다. :

입력 div>ul>li

출력 <div> <ul> <li></li> <ul> <div>

2 페이지

Emmet설명.txt

(2) 형제 요소 : + +사용하여 한를 요소와 같은-step 에 위치한 요소를 생성 할 수있다.

입력 div+p+bq

출력 <div></div> <p></p> <blockquote></blockquote>

(3) 한 단계 위로 : ^ ^배치 단계가 완료됩니다.

입력 div+div>p>span+em^bq (span + emp 태그의 하위 단계에서 위치입 니다.)

출력 <div></div> <div> <p>

3 페이지

Emmet설명.txt <span></span> <em></em> </p> <blockquote></blockquote> </div>

더 많은 레벨을 올리 려면 필요한 만큼 ^ 을 사용하십시오 .

예시1 div+div>p>span+em^bq

결과1 <div></div> <div> <span> <p><span></span><em></em></p> <blockquote></blockquote> </span> </div>

예시2 div+div>p>span+em^^bq

결과2 <div></div> <div> <span> <p><span></span><em></em></p> 4 페이지

Emmet설명.txt

</span> <blockquote></blockquote> </div>

예시3 div+div>p>span+em^^^bq

결과3 <div></div> <div> <span> <p><span></span><em></em></p> </span> </div> <blockquote></blockquote>

(4) 곱셈 : * ** * ** 연산자를 사용하여 요소를 몇 번 출력 해야하는지 정의하십시오 .

입력 ul>li*5

출력 <ul> <li></li>

5 페이지

Emmet설명.txt

<li></li> <li></li> <li></li> <li></li> </ul>

입력 ul>li*3

출력 <ul> <li></li> <li></li> <li></li> </ul>

(5) 그룹화 : () 하위 약어를 복잡한 약어로 그룹화 하려면 () 를 사용하십시오 .

입력 div>(header>ul>li*2>a)+footer>p

출력 <div> <header>

6 페이지

Emmet설명.txt

<ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>

각 그룹은 약어 서브 트리를 포함하며 다음의 모든 요소는 그룹의 첫 번째 요소와 동일한 레 벨에 삽입됩니다 .

그룹을 서로 중첩시키고 * 연산자와 결합 할 수 있습니다.

입력 (div>dl>(dt+dd)*3)+footer>p

출력 <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>

7 페이지

Emmet설명.txt

</div> <footer> <p></p> </footer>

(6) 아이디와 클래스 elem #id elem .class 표기법을 사용하여 지정된 id 또는 클래스 속성을 가진 요소에 적 용하십시오.

div#header+div.page+div#footer.class1.class 2.class3

출력 <div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>

(7) 속성 연산자 맞춤 속성 [attr] 표기법을 사용하여 요소에 사용자 정의 속성을 추가하십시오 .

입력

8 페이지

Emmet설명.txt td[title="Hello world!" colspan=3]

출력 <td title="Hello world!" colspan="3"></td>

필요한만큼 속성을 배치하십시오. 속성 값을 지정할 필요가 없는 경우는

입력 td[colspan title]

출력 <td colspan="" title=""></td>

이 경우 각 빈 속성에 대해 탭 중지를 사용할 수 있습니다 .

작은 따옴표 나 큰 따옴표를 사용하여 속성 값 을 인용 할 수 있습니다. 속성 값에 공백이 없으면 값을 입력할 필요가 없습니다.

입력 td[title=hello colspan=3]

출력 <td title="hello" colspan="3"></td>

9 페이지

Emmet설명.txt

(8) 번호 : $ 숫자가있는 요소를 반복하려면 * 연산자와 함 께 $ 연산자를 사용하십시오 지역 정보 $요소의 이름 속성의 이름 또는 반 복 요소의 출력

입력 ul>li.item$*5

출력 <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> 에 행에 여러 $를 사용하여 패드 제로로 번호 입니다.

입력 ul>li.item$$$*4

출력 <ul> <li class="item001"></li> <li class="item002"></li> 10 페이지

Emmet설명.txt <li class="item003"></li> <li class="item004"></li> </ul>

(9) 번호 매기기 기준 및 방향 변경 @ 수정자를 사용하여 번호 방향 (오름차순 또 는 내림차순) 및 기준 (시작값)을 변경할 수 있다.

입력 ul>li.item$@-*5

출력 <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

카운터 기본값을 변경하려면 @N $에 추가하 십시오 .

입력 ul>li.item$@2*4

11 페이지

Emmet설명.txt

출력 <ul> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>

입력 ul>li.item$@-3*4

출력 <ul> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul>

(10) 텍스트 : {} 요소 에 텍스트 를 추가 하려면 {} 을 사용하 십시오 .

입력 a{Click me}

12 페이지

Emmet설명.txt

출력 <a href="">Click me</a>

13 페이지

 

'텍스트 화일' 카테고리의 다른 글

낙서  (0) 2021.03.30
홈페이지 설계시 고려할 것들  (0) 2021.03.30
트랜스폼  (0) 2021.03.30
웹 메타 필기  (0) 2021.03.30
화면설계 필기  (0) 2021.03.30

스플릿이미지
컬렙시블타입 체크박스 온/오프
≠아코디언타입 라디오
1. 위젯
2. 인터렉션
3. 기타

label input button a 인터렉션 요소 
중첩불가


12등분 
col3 col3 col3 col3 
col6  col6
col6  col3 col3 

37°30'24.3"N 127°02'04.6"E
37.506750, 127.034611

바탕 기조색

주조색 보조색

 

 

<!-- 16x16, 24x24, 32x32, 48x48, 64x64 -->

<link rel="shortcut icon" href="favicon.ico">

<link rel="shortcut icon" href="favicon.png">

<!-- 아이폰의 2.0 이상일 경우-->

<link rel="apple-touch-icon-precomposed" href="favicon-152.png">

<!-- IE를 사용하는 경우 -->

<meta name="msapplication-TileColor" content="#FFFFFF">

<meta name="msapplication-TileImage" content="favicon-144.png">

<!-- 파이어폭스, 오페라(크롬 일부)의 경우 썸네일로 제공될때 -->

<link rel="icon" href="favicon-16.png" sizes="16x16">

<link rel="icon" href="favicon-32.png" sizes="32x32">

<link rel="icon" href="favicon-48.png" sizes="48x48">

<link rel="icon" href="favicon-64.png" sizes="64x64">

<link rel="icon" href="favicon-64.png" sizes="128x128">

 

<!-- 최적화 -->

<link rel="stylesheet" href="reset.css">

<style>

/* font-family: 'Noto Sans KR', sans-serif; */

/* 초기화 설정 */

* { margin: 0; padding: 0; }

body, html { width: 100%; min-width:1280px; font-family: 'Noto Sans KR', sans-serif; }

ul { list-style: none; }

a { text-decoration: none; }

 

 

 

'텍스트 화일' 카테고리의 다른 글

엠멧  (0) 2021.03.30
홈페이지 설계시 고려할 것들  (0) 2021.03.30
트랜스폼  (0) 2021.03.30
웹 메타 필기  (0) 2021.03.30
화면설계 필기  (0) 2021.03.30

1)엘리먼트 구조(태그 구조 설계)

2)무드보드 제작
본인이 선택한 병원 라면 떠오르는 
단어, 감정, 색감, 디자인요소, 기능적 요소 등을 
이미지와 단어(글자-타이포그라피), 등을 조합하여 
하나의 그래프 형태로 보드에 그려낸 것 

3)스타일가이드 제작
본인이 선택한 병원의 주요색상(주조색, 기조색, 강조색, 배경색 등), 
(폰트, 글 꼴, 글자두께, 글자크기, 모양) 아이콘, 버튼, 도형, 로고, 
레이아웃 등을 사이트에 넣을 것을 계획하여 
표시해 놓은 문서 
(*디자인 가이드와는 다르게 화면 구조도를 구성하여 놓고, 
각 영역에 출력할 배경색, 글자색, 강조색, 
글꼴, 글자두께, 글자크기, 글자 모양, 아이콘, 내용 등을 미리 약속 하여 표기)

3-1)주요 색상
3-2)폰트
3-3)아이콘
3-4)버튼
3-5)로고 및 도형/불릿
3-6)레이아웃
3-7)레이아웃의 클래스명과 아이디명 정리

4) 코딩규칙 가이드 제작
4-1)기본규칙
4-2)웹표준 및 웹 접근성 규칙
4-3)사용자 정의 규칙
4-4) 사용자 스타일 정의 규칙
4-5)인터렉션 규칙

 

 

 

'텍스트 화일' 카테고리의 다른 글

엠멧  (0) 2021.03.30
낙서  (0) 2021.03.30
트랜스폼  (0) 2021.03.30
웹 메타 필기  (0) 2021.03.30
화면설계 필기  (0) 2021.03.30
transform(변형)
박스01
박스02
박스03
박스04
박스05
박스06
박스07
박스08
박스09
박스10
박스11
박스12
박스13
박스14
박스15
박스16

'텍스트 화일' 카테고리의 다른 글

낙서  (0) 2021.03.30
홈페이지 설계시 고려할 것들  (0) 2021.03.30
웹 메타 필기  (0) 2021.03.30
화면설계 필기  (0) 2021.03.30
필기 한거  (0) 2021.03.30

메타=문서정보

검색엔진 최적화

 

파비콘(Favicon)

 

도메인 등록대행

 

핀치 스트레치

 

16x16 24x24 32x32 48x48 64x64

 

트루타입폰트ttf ms /eot/ IE

오픈타입폰트otf apple /.woff/

 

저작권 등급

100% 프리

프리 포 퍼슨

도네이션웨어

 

웹폰트 1. 서버제공 폰트

2. 응용프리미엄폰트

 

폰트페이스규칙

 

div.wrap>(header.hd) (a.logo>img)+(nav.tnb>ul>li

 

figure

section

 

------

 

 

body>div.head>div.hd>div.???>div.tnb>div.position>ul>(li*3>ul>li*3>a)+(div.right_area>div.right_icon>li.side_lsit>div

 

link 하이퍼링크 xe아이콘

 

cdn방식

 

이중클래스 적용시에?

i.clss

 

 

 

<스타일> 공통스타일

 

주황영역 마진

 

 


사용자 html 자바스크립트 jsp 파이썬
javascript 라이브러리&프레임워크

리액트   앵귤러   뷰

 

 

 

'텍스트 화일' 카테고리의 다른 글

홈페이지 설계시 고려할 것들  (0) 2021.03.30
트랜스폼  (0) 2021.03.30
화면설계 필기  (0) 2021.03.30
필기 한거  (0) 2021.03.30
포지션  (0) 2021.03.30

1 구성요소 선정 (카드 소팅)

2 인터페이스의 흐름(키워드 흐름도)->
3 유저시나리오->
4 유스케이스->

5 네비게이션 설계도 또는 사이트맵


6 페이퍼 프로토타입
-------------------------------------여기까지
7 디지털 프로토타입-월요일
(초안 설계)

8 화면 설계도
-다음주

9 엘리먼트 화면 구조도
(태그구성도)

책임프로그래머 수석 pm일

--위 두가지는 별도의 ppt양식 배부--


6줄 4칸



<구매플래그> - 키워드 흐름

관련있는 클래스끼리 그룹핑


상품페이지 접속


상세페이지 선택사항 
수량

구매/장바구니
장바구니로 이동?
MOE


<글작성플래그>


DB 기능
<<<<구매&판매 / 회원 관련(가입 관리) 기능 / 게시판>>>>>
  게시판- 공지사항 QNA Review

관리자측면 사용시?- 수정보완
작성 수정 삭제

수정- 수정가능한 창 - 작성 마지막 상태로

글삭- 확인상태메세지 -'삭제' 입력 또는 삭제하시겠습니까


QNA 관리자는 A만 하면됨
A관련 요소
질문-답변하기창-답글작성-답글 추가작성 하기-DB답글 저장-
답변완료목록- 


review
리뷰목록

관리자는 리뷰를 삭제 작성자 조회만

리뷰삭제결과


관리자페이지
회원관리기능- 회원list- id클릭 - 회원 정보- 
회원강퇴, 문자보내기, 포인트 부여, 비밀번호 초기화-임시비밀번호
포인트 부여 입력창  - DB저장 - 다시 목록으로 



---메뉴만들기 IA 사이트링크?

카드소팅
무작위 찰칵
그룹핑 찰칵

구성요소 선정 -아이템
내가 진행할 프로젝으에 어떤 내용을 넣을 것인가

*인터페이스의 흐름 -키워드 흐름도 
ex)마이페이지 -로그인 - 입력창 -...

유저시나리오
*그림+단락

*페이퍼 프로토타입 = 저수준 프로토타입



*제목(메뉴 1-2-3차) 파일이름 

어떻게 만들었나..? 비고 칸=시간, 수단,  

1p ui 요구사항 확인; 구성요소 선정 - 키워드 흐름도 - 
  유저 시나리오 - 저수준 프로토타입- 

2p;   유스케이스 -IA- 

디지털 프로토타입-  엘리먼트 

 

 

 

 

 

 

 



관리자 - 글 등록(목록창 밑 버튼) 글등록 페이지 이동 - 작성완료 -
수정 
삭제

리뷰는 삭제권한만

리뷰 등록자 정보


리뷰 삭제, 삭제 결과 화면 후 리뷰 화면으로 복귀

qna 답변 등록하기 답변 완료메뉴 - qna 목록 복귀

 회원관리기능 - 회원목록/아이디 성명 연락처/ 아이디 클릭시 상세정보, 회원강퇴, 비밀번호 초기화,

포인트점수부여(포인트 입력창, , 문자보내기 기능 )

 

 

 

 

-------------------------------------------------------------

 

1. 구성요소 선정 (카드 소팅) 그룹핑 ->종이작성 
2. 인터페이스의 흐름(키워드 흐름도)-> 사진, 흐름 12개 이상

-3. 유저시나리오 (줄글)->  pt에 흐름도 그린후 필요설명을 작성
4. 유스케이스-> staruml 작성 (아직 x)
5. 네비게이션 설계도 또는 사이트맵-> 엑셀 작성
6. 페이퍼 프로토타입-> 종이작성
7. 디지털 프로토타입- oven, balsamic 작성 
(초안 설계)
-------------------------------------여기까지
8. 화면 설계도
-다음주
9. 엘리먼트 화면 구조도
(태그구성도)

책임프로그래머 수석 pm일
--위 7, 8 두가지는 별도의 ppt양식 배부--
카드소팅 - 6줄 4칸

<구매플래그> - 키워드 흐름 (관련있는 클래스끼리 그룹핑
상품페이지 접속
상세페이지 선택사항 
수량
구매/장바구니
장바구니로 이동?
MOE
<글작성플래그>
DB 기능
<<<<구매&판매 / 회원 관련(가입 관리) 기능 / 게시판>>>>>
  게시판- 공지사항 QNA Review
관리자측면 사용시?- 수정보완
작성 수정 삭제
수정- 수정가능한 창 - 작성 마지막 상태로
글삭- 확인상태메세지 -'삭제' 입력 또는 삭제하시겠습니까
QNA 관리자는 A만 하면됨
A관련 요소
질문-답변하기창-답글작성-답글 추가작성 하기-DB답글 저장-
답변완료목록- 

review
리뷰목록
관리자는 리뷰를 삭제 작성자 조회만
리뷰삭제결과
관리자페이지
흐름 -> 회원관리기능- 회원list- id클릭 - 회원 정보- 
관리자 기능 -> 회원강퇴, 문자보내기, 포인트 부여, 비밀번호 초기화-임시비밀번호

기능 흐름 -> 포인트 부여 입력창  - DB저장 - 다시 목록으로 

---메뉴만들기 IA 사이트링크?
카드소팅
무작위 찰칵
그룹핑 찰칵



-----------------------------

구성요소 선정 -아이템
내가 진행할 프로젝으에 어떤 내용을 넣을 것인가

*인터페이스의 흐름 -키워드 흐름도 
ex)마이페이지 -로그인 - 입력창 -...

유저시나리오
*그림+단락

*페이퍼 프로토타입 = 저수준 프로토타입



*제목(메뉴 1-2-3차) 파일이름 

어떻게 만들었나..? 비고 칸=시간, 수단,  

1p ui 요구사항 확인; 구성요소 선정 - 키워드 흐름도 - 
  유저 시나리오 - 저수준 프로토타입- 

2p;   유스케이스 -IA- 

디지털 프로토타입-  엘리먼트 


원본 캡처

---------------------------------------------------


리뷰 QNA 공지

상품 분류관리 재고관리


관리자 - 글 등록//(목록창 밑 버튼) 글등록 페이지 이동 - 작성완료 -
수정 
삭제

리뷰는 삭제권한만

리뷰 등록자 정보


리뷰 삭제, 삭제 결과 화면 후 리뷰 화면으로 복귀

qna 답변 등록하기 답변 완료메뉴 - qna 목록 복귀

 회원관리기능 - 회원목록/아이디 성명 연락처/ 아이디 클릭시 상세정보, 회원강퇴, 비밀번호 초기화,

포인트점수부여(포인트 입력창, , 문자보내기 기능 )

 

 

 


1.구성요소 선정-카드소팅
-1 그룹핑

2.유저시나리오
3. 유스케이스 표
4. 네비설계도
5. 페이퍼
6. 디지털
7.화면설계도
8.엘리먼트구조도
 

'텍스트 화일' 카테고리의 다른 글

홈페이지 설계시 고려할 것들  (0) 2021.03.30
트랜스폼  (0) 2021.03.30
웹 메타 필기  (0) 2021.03.30
필기 한거  (0) 2021.03.30
포지션  (0) 2021.03.30

+ Recent posts