본문 바로가기

HTML + CSS

 (25)
[HTML + CSS] border 테두리 border 1. border-width 2. border-style : solid(실선), dotted(점선), dashed(파선) 3. border- color 4. 한꺼번에 나타내기p {border: 1px solid #888;} 5. border 보이지 않게 하기 (예 : input처럼 기본적으로 border가 있는 경우)border: none;border: 0;
[HTML + CSS] Overflow overflowbox의 크기가 텍스트(이미지 포함)의 내용보다 작을 때 사용 1. overflow: visible (기본) box 바깥으로 넘치는 텍스트를 다 보여줌 2. overflow: hiddenbox 바깥의 내용은 보여주지 않고 숨김예) border-radius: 10px; 처리된 box에서 삐져 나오는 이미지의 직각 모서리는 overflow: hidden; 해 주면 사라진다.3. overflow: scroll box 바깥의 넘치는 내용을 스크롤바를 통해서 보여줌. 텍스트가 box 크기보다 크든지 작든지 상관없이 무조건 스크롤바가 생김 4. overflow: auto 텍스트가 box 크기 이하이면 그대로 보여주고, box보다 크면 스크롤바를 생성하여 보여줌
[HTML + CSS] font 설정하기(font-family) 1. 일반적인 폰트 적용1.1 종류Generic Font Family : serif, sans-serif, monospace, cursive, fantasy 등 serif : 획의 일부 끝이 돌출된 형태(삐침). 한글로는 바탕체, 명조체sans-serif : sans(없는) + serif(삐침). 영어 서체로는 Arial, Helvetica, 한글서체로는 돋움, 굴림, 맑은 고딕, 나눔 고딕monospace : 고정폭 글꼴. a와 i의 너비가 같은 것. 코딩할 때 오와 열을 맞추기 위해서 모노스페이스 글꼴 사용. 타자기가 등장했을 경우 키가 엉키게 되어 나타난 서체입니다. 한글은 보통 폭이 동일하고, 코딩은 주로 영어로 이루어지기 때문에 모노스페이스 글꼴은 주로 영문만 있습니다. ‘Courier New’..
[HTML + CSS] 서브라임 단축키, emmet HTMLhtml 문서로 저장후 ! + tab CSSbgc + tab : background-colorbgsi + tab : background-sizefosi + tab : font-sizeff + tab : font-familywth + tab: widthhht + tab: heighttgn + tab: text-alignvgn + tab: vertical-aligninbl + tab: inline-block 단축키 ctrl + X 커서 위치한 줄 지우기ctrl + ] 커서 위치한 줄 들여쓰기ctrl + [ 커서 위치한 줄 내어쓰기
[HTML + CSS] inline 요소 가운데 정렬 inline 요소 가운데 정렬 1. inline 요소는 가운데 정렬 X (img도 마찬가지) 2. inline 요소의 가운데 정렬 방법div 와 같은 block 요소로 감싸고, block 요소를 가운데 정렬한다. 3. img 는 block 요소로 전환해서 block 요소처럼 가운데 정렬하는 것이 좋다. img { display: block; margin: 0 auto; }
[HTML + CSS] font-weight font-weight 1. 표현수치 : 100, 200, 300, 400, 500, 600, 700, 800, 900 (※ 110, 350 등 100의 배수 가 아닌 것은 X ) text : bold, normal 등lighter = 100, normal = 400, bold = 700, bolder = 900 2. font 별로 지원할 수 있는 font-weight가 다르다. 즉, 어떤 폰트는 100, 400, 700만 지원할 수도 있다.
[HTML + CSS] block 요소의 가운데 정렬 BLOCK 요소의 가운데 정열 1. Block 요소 width 가운데 정열.block-element {width: 500px; // block 요소의 넓이값 지정margin: 0 auto; // top, bottom margin 은 0, left, right margin은 auto } 2. Block 요소 width 및 height 가운데 정열: 항상 화면의 중앙에 위치.block-element {width: 500px; height: 300px; position: absolute; top: 50%;left: 50%; margin-top: -150px; // 150px = block 요소의 height / 2 margin-left: -250px; // 250px = block 요소의 width / 2}
[HTML + CSS] 티스토리 reset.css @charset "UTF-8";/* reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none}fieldset,img{border:0 none}dl,ul,ol,menu,li {list-style:none}blockquote, q {quotes: none}blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}input,select,textarea,button {vertical..

티스토리툴바