본문 바로가기

> HTML-CSS10

Float 기본 내용 정리 Float 요소를 좌우 방향으로 띄움(수평 정렬) css3에는 flex box가 도입됨 (flexible box) 최근 트렌드는 flex를 사용하는 편임 속성 값 none : 요소 띄움 없음 (기본값) left : 왼쪽으로 띄움 right : 오른쪽으로 띄움 신문 기사처럼 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다. 반면, 새롭게 만드는 요소가 겹치는 경우가 있다. Float Right - `float : right;` 은 우측 정렬과는 다르다. 순서가 뒤바뀜 - 요소 순서대로 우측에서 쌓기 시작하는 개념으로 이해하면 됨 해제(clear) - `float` 속성이 적용되지 않도록 지정(해제) ### 기본 원리 - `float: left`를 해제하려 한다면, 해.. 2021. 3. 7.
[HTML/CSS] 기본 input CSS 만들기 >> 기본적인 input CSS 만들기 .input--text { height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); font-size: 16px; } .input--text:focus { border-color: #51a7e8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } >>> 결과 - focus 없을 때 - focus 있을 때 출처 - fastcampus,.. 2020. 12. 31.
[HTML/CSS] 기본 버튼(button) CSS 만들기 >> 기본적인 버튼 CSS 만들기 .btn { position: relative; height: 35px; background: #eee linear-gradient(to bottom, #fcfcfc, #eee); border: 1px solid #d5d5d5; border-radius: 4px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; box-sizing: border-box; } .btn:hover::before { content: ""; position: absolute; top: 0; left: 0; widt.. 2020. 12. 31.
[HTML/CSS] 작명 규칙 (BEM) BEM = Block, Element, Modifier CSS 작명 규칙 1) - (하이픈 한 개) : 일반적인 이름 연결 ex) toggle-btn 2) -- (하이픈 두 개) : ~의 상태 ex) btn--success 3) __ (언더스코어 두 개) : ~의 일부분 ex) body__container 2020. 12. 31.

티스토리툴바