분류 전체보기 썸네일형 리스트형 [renewal] 더보기 [renewal] 더보기 [branding] 더보기 [branding] 더보기 [branding] 더보기 기본태그연습 기본태그 설명 인라인 | 블록 br break line 줄 바꿈 태그 블록 p paragraph 문단 태그 블록 h headline text 제목태그 , 진하고, 크기가 크다. 블록 hr horizontal line 수평선 태그 블록 ol>li ordered list 순서가 있는 목록 태그이고 li(list)는 자식태그 블록 ul>li unordered list 순서가 없는 목록 태그이고 li(list)는 자식태그 블록 dl>dt+dd description list 정의목록, 자식으로 dt와 dd를 사용 블록 span 공간분할 인라인 div 공간분학 블록 img 이미지태그 필수속성 : src(이미지경로)와, alt(대체텍스트) 인라인(인라인블록) 오늘은 웹표준 배우는 첫번째 날입니다. 오늘은 웹표준 배우.. 더보기 텍스트 요소 모두 인라인요소에 해당함 텍스트 요소 인라인 | 블록 em 강조텍스트, 기울임체 인라인 strong 강조텍스트, 굵은체 인라인 mark 부분강조, 노란색표시 인라인 b 굵은체 인라인 small 작은글씨 인라인 sub 아래첨자 텍스트 인라인 sup 위첨자 텍스트 인라인 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. 웹페이지 제작 시 웹표준과 웹접근성을 준수합니다. COPYRIGHT © All rights reserved. 물의 화학식은 H 2O입니다. 100m 2 ※ strong은 중요한 택스트를 정의하기 위한 태그이며, b는 의미는 없고, 단순히 텍스트를 굵게 표현하는 태그이다. 더보기 a태그와 table태그 연습 세상 겁날 것이 없어 보이는 Friends City의 시크한 고양이 네오. 지금의 모습과는 다르게 지우고 싶은 어릴 적 기억들을 가지고 있습니다. 머리 때문에 항상 자신감 없는 학창시절을 보낸 네오. 어느 날 패션 잡지를 통해 알게 된 가발의 세계에 빠져 자신만의 가발을 만들게 되고 트렌드를 선도하게 됩니다. 이후 자신감으로 무장한 네오는 다양한 친구들을 만나게 되고 자는 순간까지도 가발을 내려놓지 않습니다. 오랫동안 네오의 모습을 지켜봐 왔던 프로도의 끊임없는 애정 공세를 지금까지도 받고 있지만, 쉽사리 마음을 주지 않습니다. 항상 주변을 맴도는 프로도를 귀찮아 하면서도 내심 그런 프로도의 모습을 귀여워 하는 네오는 오늘도 프로도의 이벤트를 기대하며 외출 준비를 합니다. 카카오프렌즈 스토리 컬러링 북 .. 더보기 table tag table 태그를 사용하여 데이터를 행과 열로 정렬할수 있다. table태그의 자식요소 table 테이블을 정의 tr 테이블 안의 행을 정의, row th 테이블 안에서 제목셀을 정의, header cell td 테이블 안의 열을 정의, cell caption 테이블 캡션(설명)을 정의 테이블 위 가운데 정렬됨 colgroup 테이블 내에서 한개 이상의 열을 그룹화 함 각 셀의 전체 스타일을 컬럼에 스타일을 적용하는 대신 반복 유용함 모든 및 요소 앞에 배치 col 열의 속성을 각각 정의 colgroup의 자식요소로 배치 thead 테이블 안에서 헤더 영역을 그룹화 함 tbody 테이블 안에서 컨텐츠 영역을 그룹화 함 tfoot 테이블 안에서 푸터영역을 그룹화 함 ※ 기본 테이블은 table의 자식요소로.. 더보기 a tag 링크는 거의 모든 웹 페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지간에 클릭 할 수 있습니다. syntax link text Visit Naver! 속성 attribute href 절대경로 www.naver.com/ 상대경로 sub.html 문서내 이동 #content #만 작성한 경우 문서의 최상단으로 이동 javascript:; 를 작성하면 최상단 이동을 막을 수 있다. 메일주소 링크 mailto:aaa@naver.com target _self 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 엽니다. _blank 새 창 또는 탭에서 문서를 엽니다. _parent 상위 프레임에서 문서를 엽니다. _top 창 전체에 문서를 엽니다. ※ target="_blank"로 작성하면, 스크린 리더에.. 더보기 [edit plus] 화면 확대축소, 인코딩, .bak생성 1. ctrl+mousewheel을 올리거나 내려서 화면을 확대/축소 한다. 이 기능이 되지 않을 때는 상단 보기(view) 메뉴에 들어가 [화면글꼴]에서 [ctrl+마우스휠로 확대]를 클릭하여 둔다. 고정으로 화면에서 글꼴을 정의할 때는 상단의 톱니바퀴모양의 설정버튼을 클릭하여 [기본설정]에 들어가, 좌측 항목에서 [일반>글꼴]을 선택하고 글자의 크기를 지정해 준다음 [확인]을 누른다. 2. 기본 인코딩을 변경하거나, .bak파일이 자동으로 생성되지 않게 하기 위해서는 아래 그림과 같이 [도구]>[기본설정](상단에도 아이콘이 있다)>[파일]>기본인코딩 : UTF-8로 설정, 저장시 백업파일 생성을 체크 해제해 둔다. 더보기 reference site [참고할만한 사이트] 여러분도 자유롭게 참고공유하고 싶은 사이트를 올려주세요(댓글/글쓰기OK) 좋은 사이트를 많이 보고 참고하세요~! 어워드 http://www.i-award.or.kr/web/ http://www.gdweb.co.kr/ https://www.jungle.co.kr/ 디자이너 블로그 https://www.pinterest.co.kr/ https://dribbble.com/ https://www.behance.net/ 일러스트 자료 공유 https://www.freepik.com/ https://www.flaticon.com/ http://www.deviantart.com/ https://www.redbubble.com/ http://abduzeedo.com/ 이미지소스 http://eve.. 더보기 HIG, xd mock-up Human Interface Guidelines developer.apple.com/design/resources/ Apple Design Resources Design apps quickly by using Sketch and Photoshop templates, plug-ins, and preconfigured UI elements. developer.apple.com freebiesui.com/xd-freebies/xd-mockups/iphone-x-clay-mockup-free/ iPhone X Clay Mockup Free - 1125x2436 High Quality Adobe Xd- FreebiesUI iPhone X Clay Mockup Free Enjoy high quality iPhone.. 더보기 zeplin 제플린의 장점은 디자이너가 제작한 화면의 모든 컴포넌트와 요소의 세부 값을 확인하는 데 상당히 효율적이다. 퍼블리셔나 개발자의 경우, 디자이너가 작업한 요소의 크기를 확인 하기 위해 탐색기에서 속성을 살펴본다든지, 포토샵과 같은 프로그램을 열어 확인해야 하는 번거로움이 있는데, 이러한 툴에 익숙하지 않은 개발자에게는 많은 도움을 준다. 또한 제플린은 여러가지 프로그램과 연동해서 사용할 수 있는 툴이다. 내부, 외부에 많은 플러그인이 있기 때문에 그래픽 프로그램을 잘 다루지 못하는 개발자들에게도 업무에 효율과 재미를 줄 수 있다. 이는 프로토타입 툴인 Adobe XD, Sketch 등에서 작업한 화면을 Plugin을 통해 제플린으로 내보낼 수 있는 방법이 있고, 그래픽 툴인 어도브 포토샵에서 Extenti.. 더보기 plug in introduce 플러그인 정리 Adobe XD에는 기본 툴과 패널 이외에도, 설치하여 확장메뉴처럼 활용할 수 있는 플러그인이 있다. 플러그인을 활용하면 문단의 글자를 채워 넣을수 있고, 아이콘이나 이미지를 불러와 사용할 수 있으며, 웹으로 내보내기가 가능해서, 기본 코딩을 확인 할 수도 있다. 이러한 여러가지 활용방향이 있기 때문에 XD로 프로토타입을 만들 때 유용한 플러그인을 설치 해 사용하면, 작업의 효율을 높일 수 있어 많은 도움이 된다. 플러그인은 계속 업데이트 되기 때문에, 최근 유용하게 사용하는 플러그인을 참고하여 아래와 같이 소개하도록 하겠다. 1. lorem ipsum : 더미텍스트를 생성한다. 프로토타입을 만들 때 글씨가 들어가야 하는 부분에 반드시 내용이 정확할 필요가 없을 때 임의로 글자를 넣어주는데.. 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 [renewal] 더보기 이전 1 2 3 4 5 6 7 다음
