분류 전체보기570

• 

  emmet 단축키 정리 1. 자식 : > - 자식 구조를 만들 때 사용 nav > ul > li 2. 형제 : + - 형제 구조를 만들 때 사용 h1 + p 3. 상위로 : ^ - 자식에서 다시 부로로 올라갈 때 사용 div > h1 + p ^ footer 4. 묶기 : () - 묶어서 곱하기 같은 것을 할 때 5. 곱하기: * - 여러개 반복할 때 ul > li * 5 > a ul > li > a*5 dl > (dt + dd) *5 6. 숫자 넣기 : $ - $ 갯수 만큼 자리수가 된다. - $$$ 는 세자리수 $$$$$ 는 다섯 자리수 ul > li.item$$*5 - $ 갈라져 있으면 갈라진 부분들에 각각 수가 놓인다. ul>(li.item$>a[#]{header $})*3 - 역순으로 하고 싶으면 $@- 로 한다. ul.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 

  table border=0 cellspacing=0 을 css로 만드는 방법 table 태그 속성으로 cellpadding, cellspacing 을 지정하는 경우가 있다. 이건 padding 속성을 넣게 되면 cellpadding은 처리 할 수 있지만, cellspacing은 변하지 않는다. 아래 그림은 스타일로 cellspacing 값을 준 경우와 뺀 경우의 결과물이다. 1. HTML 태그 작성하기 - table을 두개 만들어서 할 것이라 테이블 각각에 클래스 지정한다. cellspacing 값이 있는 경우는 table_border 로 하고, cellspacing 값이 0인 경우는 table_line 이라고 하자. 2. 각 테이블에 스타일 지정하기 - table 부분에 cellspacing을 대용할 스타일을 넣는 부분이므로 다음과 같이 2줄을 넣는다. - border-spac.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 

  브라켓의 실시간 미리 보기 처럼, atom에서 live server 설치 및 사용 방법 어도비사의 bracket에서 장점 중 한가지가 html 코딩할때 실시간 미리보기가 가능하다는 점이다. 물론 가끔 팅기는 경우도 있지만, 버그 없는 프로그램이 어디 있겠는가, 매번 open in browser할 필요 없이 변경 즉시 효과가 적용되니, 그 처럼 편한 것이 아니였다. atom에도 라이브 미리보기가 가능하다. 바로 atom-live-server 라는 패키지를 설치하면 된다. 1. atom-live-server 패키지 설치하기 - ⌘, 하여 Settings 창을 열고 Install을 클릭해서 live만 검색해도 상단에 atom-live-server가 표시된다. install을 클릭하여 설치한다. - 설치가 완료 되었으면 atom-live-server의 빈 공간을 클릭해서 패키지 상세 정보를 확인한.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 

  지정영역에 태그 및 속성 추가하기, atom-wrap-in-tag 설치하기 및 단축키 변경 방법 HTML 코딩을 하다 보면 영역 선택 후, 태그로 감싸야 할 경우가 종종 있다. 텍스트 본문의 일부 영역을 강조하기 위해 span으로 감싼다거나 em을 적용한다거나 할 때, 여는 위치 닫는 위치를 오가며 이중 작업하기는 편리하지 못하다. emmet에서 ctrl-alt-w 를 클릭하여 태그로 감쌀 수는 있지만 태그 외의 속성이나 클래스 등이 입력되면 태그로 감싸기가 중지된다. 이러한 부분 때문에 Atom-wrap-in-tag 라는 패키지를 설치하고 단축키 변경하는 방법에 대해서 기록해둔다. 1. Atom-wrap-in-tag 검색 및 설치 - ⌘, 클릭하여 Settings 접근 후 Install 클릭 wrap in tag 또는 wrap-in-tag 와 같이 키워드를 검색하고, sanusart의 atom-w.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 

  Edit > Lines > Auto Indent 에 단축키 지정하기 + ATOM 기존 단축키 확인하기 태그를 작성하다 보면, 태그를 정리해야 할 필요가 있다. 일반적으로 사용하지는 않는 것 같다. 그러니 ATOM 기본 EDIT 메뉴에 Lines > Auto Indent 메뉴는 있지만, 단축키가 없다. 1. ATOM 현재 설정 단축키 확인하는 방법 - ATOM > Preferences 를 클릭해서 Settings 창을 열거나, ⌘, 를 클릭하여, Settings 창을 열어 봅니다. - Keybindings 를 클릭하고 알고있는 단축키(ctrl-alt 와 같이), 명령어, 등 화면상의 내용을 입력해 봅니다. - 키 내용을 복사 하려면 KeyStroke 의 명령어 옆에 있는 복/붙 아이콘을 클릭하여 저장한다. - your keymap file 부분을 클릭하면 사용자 키 설정으로 연결된다. - keymap fi.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 

  HTML에서 플랫UI 컬러 색상표 제공해주는 사이트 정보 웹사이트에서 Flat UI 컬러를 선정해주거나 색상을 잡아주는 곳들 있습니다. 대표적으로 몇가지 적어보겠습니다. 색깔 선정이 어려우신 분께는 도움이 되실 수 있습니다. (flat) ui color, color system, color-wheel 등으로 검색해 볼 수 있습니다. 1. flatuicolors.com/ 2. 어도비 컬러스 3. CANVA 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 

  ATOM, emmet으로 html5 만들기 및 lang=en을 lang=ko 로 변경하는 방법 emmet이 설치된 ATOM 을 실행한 후 Cmd + N 하여 새파일을 만든다. Cms + S 하여 "저장하고싶은파일명.html" 과 같이 파일을 저장한다. html 확장자로 저장된 문서에서 ! 입력 후 탭 클릭 하면, HTML5기본 스니펫이 채워진다. 탭 클릭하면 수정할 부분들의 자리를 숑숑 움직여 준다. h1{내용입력} 에서 탭을 치면 내용입력 과 같이 태그로 변환된다. 다만 이상태로 브라우저에서 실행(f12) 할 경우 브라우저에서 번역 확인을 물어보게 된다. 원인은 기본 값 때문에 , 영어 문서를 컴퓨터 기본 언어로 변경할지 물어 보게 된다. 우리는 보통 한국어로 되어있을 테니 기본 부분을 로 변경하는 방법도 계속 말씀 드릴께요. 이 ! 후 탭 하여 자동완성하는 부분이 emmet 패키지에서 제공하는.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 

  ATOM 에 emmet and open-in-browsers 설치 및 설정하기 ATOM 에서 emmet 및 각종 플러그인 패키지를 설치하는 방법은 간단하다. 1. 시작화면 Welcome Guide 에서 Install a Package 클릭하거나 2. Cmd + Shift + P 클릭 후, install 을 검색했을때 Settings View: Install Packages And Theme를 클릭하거나 3. 작업바 ATOM - Preferences 클릭 후, Install 클릭 1. emmet 설치 및 설정 방법 - emmet 검색하여 emmet을 설치한다. - 설치 정보는 Packages의 설치 패키지의 Settings 를 클릭하면 단축키를 포함하여 일반적인 정보를 확인할 수 있다. 2. Open-in-Browsers 설치하기 - 코딩 내용을 브라우저에서 바로 확인하기 위한 용도.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 

  ATOM 다운로드 및 설치하기 서브라임텍스트 맥 버전 버그인지, emmit 버거인지, 젠코딩이 잘 먹히지 않는 증상이 계속 되어서, 서브라임텍스트 에디터에서 아톰 ATOM 에디터로 변경해서 사용해 보려 한다. 툴이 중요한 것은 아니지만, 에밋이 되다 안되다 하다 보니, 기본적인 코딩 입력에 신경을 쓰다 보니 전체적인 흐름을 계속 연습하지 못하게 되는 것 같다. 서브라임텍스트와 많이 유사해 보이지만, 용량은 훨씬 크다. ATOM 에 대한 자세한 설명은 모르겠지만, 깃헙과 연동되고 플러그인 관리가 서브라임보다 더 편리한 느낌이다. 1. ATOM 다운로드 SITE: https://atom.io/ 기본적으로 접속한 운영체제에 맞게 다운로드를 제공한다. Download 하여 클릭하면 100MB가 넘는 zip 파일이 다운로드 된다. 2. ATO.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 18.

• 메인보드 제조사별 부팅 순서 변경 메뉴 키 컴퓨터에 전원을 넣고 윈도우 부팅 하기 전에, 켜지자 마다 특수한 키를 클릭하게 되면, 부팅 순서를 변경할 수 있는 메뉴가 뜹니다. 다만, 컴퓨터 바이오스 설정 변경 단축키가 다른 것 처럼 부팅 순서 변경하는 기능 키도 다를 수 있습니다. 메인보드 // 단축키 ASROCK F11 ASUS F12 또는 F8 (2015년 미만은, F8) BIOSTAR F7 또는 F9 (최신은 F7) - 이엠텍, 앱솔루트, ESTAR FOXCONN ESC GIGABYTE F12 INTEL F10 MSI F11 메인보드 별 설정 들어가는 기능 단축키도 궁금하신가요? 윈도우ㆍ기타OS/Windows12 2020. 9. 17.