아톰에서 HTML5, CSS3 작성 중 레이아웃을 잡기 위해 float을 자주 사용하게 됩니다.
float:left 자동 완성 단축키
ffl 3단어를 넣고 탭 키를 누르게 되면 float:left가 자동 완성이 됩니다.
div 태그 여러개 한번에 코딩하는 단축키
부모 노드 아래에 자식 노드를 여러개 코딩해서 넣어야 할 경우에 사용하는 단축키입니다.
첫째 행을 복사해서도 사용할 수 있지만 Emmet 단축키를 사용하면 몇 글자만으로도 태그를 코딩할 수 있습니다.
.col$*6
- col1 ~ col6 클래스를 가지는 div 태그 6개를 생성합니다.
- $ : 1부터 순차적으로 숫자가 매겨집니다.
- *6 : 6개의 태그를 생성하게 합니다.
스타일시트 적용 방법
부모 자식간의 적용 방법, 동일한 태그 내의 여러개의 클래스에 대한 적용 방법, CSS3 적용하는 정석 방법입니다.
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
/**
* cont 클래스를 가지는 div와 하위 column 클래스를 가지는 노드에 대해서
* CSS3에서 스타일 지정할 때 노드 지정 방법
* div.cont div.column.col1 : 정석
* .cont .column.col1 : 앞의 div태그는 제외하고 작성하는 단축법
* .column.col1 : column 클래스와 동일 위치에 있는 col1클래스 노드 지정
* 하위 노드로 내려 갈 때는 각 클래스 사이에 한칸(스페이스)을 띄워서 구분한다.
*/
div.cont div.column.col1 { width: 280px; }
.cont .column.col1 { width: 280px; }
</style>
</head>
<body>
<div class="cont">
<div class="column col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
<div class="col5"></div>
<div class="col6"></div>
</div>
</body>
</html>
2019/12/18 - [유용한 활용팁] - CSS3 한줄 처리 방법, inherit 의미
CSS3 한줄 처리 방법, inherit 의미
CSS3로 프로그램 처리 없이 한 줄 처리를 하는 방법입니다. overflow, text-overflow, white-space를 사용하여 처리를 합니다. .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } CSS..
han288.tistory.com
2019/12/17 - [유용한 활용팁] - CSS3 float left로 인한 영역 깨짐 현상 처리 방법 및 last-child 사용법
CSS3 float left로 인한 영역 깨짐 현상 처리 방법 및 last-child 사용법
CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐 현상이 발생을 합니다. 이 에러를 잡기 위한 방법 4가지입니다. 1. 깨지는 영역에 float:left를 사용한다. - 모는 박스에 float:left를 사용해야 합니..
han288.tistory.com
2019/11/16 - [유용한 활용팁] - HTML5, CSS 편집기 아톰 Emmet 유용한 단축키 - A 태그 생성 방법
HTML5, CSS 편집기 아톰 Emmet 유용한 단축키 - A 태그 생성 방법
HTML5, CSS 편집기 아톰(Atom)에서 Emmet을 이용한 A태그(Tag) 생성 방법입니다. HTML5, CSS 편집기 아톰(Atom) Emmet A 태그(Tag) 단축키 a[#].icon$>span{icon$} + TAB HTML5, CSS 편집기 아톰(Atom) Emmet A..
han288.tistory.com
HTML5, CSS 편집기 아톰(Atom) Emmet 유용한 단축키 - HTML전문, DIV생성, CSS3 width/height/padding/margin 생성
아톰(Atom)을 사용하여 HTML5를 편집을 위해 Emmet 플러그인을 설치하였습니다. Emmet의 유용한 단축키 활용법입니다. HTML 전문 한번에 만들기 기본적으로 HTML 단축키를 사용하려면 해당 파일의 확장자가 .html..
han288.tistory.com
'유용한 활용팁' 카테고리의 다른 글
| JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리 (0) | 2019.12.21 |
|---|---|
| 무료 호스팅 사이트 DOTHOME 사양 및 용량 (4) | 2019.12.20 |
| CSS3 한줄 처리 방법, inherit 의미 (0) | 2019.12.18 |
| CSS3 float left로 인한 영역 깨짐 현상 처리 방법 및 last-child 사용법 (0) | 2019.12.17 |
| PHP MySQL Bulk Insert 방식으로 대량 INSERT 처리하기 (0) | 2019.12.14 |