본문 바로가기

CSS

 (4)
[css] css 초기화 시키기 1. Reset CSS 디폴트로 설정되어 있는 스타일들 여백, 글씨 크기가 작업을 할때 방해를 합니다. 그렇기 때문에 원래있는 디자인들을 다시 취소해주는 코드를 다시 입력을 해주어야합니다. 즉, 기본적으로 태그가 가지고있는 크기, 간격, 여백, 색상 등을 통일 시켜주는 작업입니다. 아무것도 없는 형태로 만들어주어야하는데 css reset이라는 순수한 상태로 만들어주는 코드를 입력해주면됩니다. Eric Meyer 라는 사람이 만든 reset css를 사용합니다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, ifram..
[css] box model 1. Box-sizing 1-1. Content-Box (기본값) 기본값이며, width, height는 content의 영역만 해당 됩니다. 2-1. Border-Box box-sizing속성으로 width, height는 content, padding, border 를 합친 크기입니다. Border-Box 를 지정할수 있으며, 쓰기 편하기 때문에 요즘에 많이 쓰는 방법, 하지만 지원하지 않는 브라우저가 있기 떄문에 조심해서 써야합니다. 브라우저 호환성 2. 기본 반응형 웹 레이아웃 2-1. display inline block %로 2단 컬럼 레이아웃 만들기 css body { margin :0; font-size: 1em; } h1, p { margin: 0; } /* * { margin: 0; p..
의미 없는 텍스트 내용이 필요할 때 www.lipsum.com/feed/html Lorem Ipsum - All the facts - Lipsum generator Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus vulputate nunc a pharetra. Vestibulum luctus lorem sed rutrum semper. Nunc semper non enim et auctor. Mauris dapibus est iaculis ultrices tristique. Ut diam arcu, convallis et consequat www.lipsum.com
CSS 선택자(seletor) 개념 정리 & 종류 html css java 선택자(SELECTOR) 종류 1. 전체 셀렉터 (Universal) HTML 문서내의 모든 요소를 선택합니다. H1입니다. hello world! 결과 2. 태그 셀렉터 (Type Selector) 지정된 태그명을 가진 요소를 선택합니다. HEADER 안녕하세요 결과 3. ID 셀렉터 (ID Selector) 선택자 앞에 #태그를 붙여 사용합니다. 하나의 문서에 반드시 id는 하나밖에 사용하지못합니다. (재활용X) ID SELECTOR hello world! 결과 4. 클래스 셀렉터 (Class Selector) 클래스속성(Attribute)의 값을 지정하여 일치하는 요소들을 선택합니다. ID 셀렉터와 다르게 class 셀렉터는 중복될 수 있습니다. 안녕하세요 1 클래스입니다...

티스토리툴바