본문 바로가기

Etc./HTML&CSS4

CSS Layout CSS Layout layout 작업 : 엘리먼트를 화면에 배치하는 것을 일컫음, Rendering 과정이라고도 한다. Element가 배치되는 방법 (position : static, relative, absolute) 주요 속성 display : block, inline, inline-block inline-block : inline과 달리 width, height, 상하 margin, padding 값을 가질 수 있다, 대표적으로 select 와 button 태그가 존재 position : static, absolute, relative, fixed float : left, right position 속성 엘리먼트의 배치를 단순한 상하, 좌우 배치에서 벗어날 수 있도록 돕는 속성값들이 존재 stat.. 2021. 7. 7.
CSS) 손가락 모양 커서, text 타입 input에 포커스시 파란선 효과 손가락 모양 커서 tag{ cursor: pointer; } input text 타입 태그에 클릭시 파란선 효과 주기 input[type="text"]:focus { outline: none; box-shadow: 0px 0px 5px #2392ce; border:1px solid #41b4ee; } 출처) https://stackoverflow.com/questions/13056207/textbox-css-hover-focus/13056286 2021. 7. 6.
HTML HTML 웹 컨텐츠의 구조와 의미를 결정한다 웹 브라우저 상에서 보여지도록 디자인된 문서를 작성하는 마크업 언어(어노테이션을 이용한 구조적 언어) W3C에서 표준을 정한다 참고) Doc : https://developer.mozilla.org/en-US/docs/Web/HTML Playground : http://jsbin.com/ 검증 지원 도구 : https://validator.w3.org/ HTML tag semantic 태그, 쓰임새에 맞게 적절한 태그를 이용 가독성, 검색의 편의, 시각장애인을 위한 음성 서비스 계층적 구조로 작성 Layout, BOX(구조) 엘리먼트들 header nav main section article : 반복적으로 사용하는 엘리먼트 aside footer div, sp.. 2021. 6. 28.
CSS(Cascading Style Sheets) 기본 CSS(Cascading Style Sheets), 종속형 시트 display block inline inline-block none : element가 아예 존재하지 않는 것처럼 보임 hidden : element가 존재(일부 공간이 할당됨)하나 화면에 보이지 않음 size 단위 px : Parent element와 무관하게 특정 크기를 지정 em : 모든 Parent element에 비례하여 크기가 조정됨 rem : Root HTML에 영향을 받아 비례적으로 크기가 조정됨 1rem = 16px, 3rem = 16 * 3px % : 바로 윗 Parent element에 비례하여 크기가 조정됨 Ref. https://www.youtube.com/watch?v=T1I9CsvHruQ&list=PLQFurmx.. 2021. 1. 31.