본문 바로가기

CSS

웹상으로 html css javascript 구현하는 사이트 http://jsfiddle.net/za74y/15/ 더보기
Image Replacement(리플레이스먼트), Image Sprite Image Replacement : 의미있는 어떤 요소를 이미지로 처리하고 요소에 해당하는 텍스트 넣되 시각적으로는 안보이게 하는 방법입니다.이 기법의 장점은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다. Image Sprite : 이미지 파일을 하나로 합쳐서 배경으로 처리하는 것으로 웹 문서 전송 속도를 높이는 기법 입니다. 더보기
display:inline-block http://blog.naver.com/ssunxf?Redirect=Log&logNo=120136619769 보통 메뉴를 마크업 할 땐 li로 나열, float를 줘서 일렬로 늘어트린 후 감싸고 있는 상위 엘르멘트에다 width를 지정하고 margin으로 중앙에 위치시크는 기법이 많이 사용된다. 그런데 메뉴가 더 추가 되거나 삭제되면 전체 가로 너비를 다시 지정해줘야 하는 문제가 발생하는데, 이런 단점을 보완한 기법이 있는데 바로 dispaly:inline과 display:inline-block에 그 해법이 있다. 홈 text-align:center; 로 inline 속성을 갖게 된 li를 중앙 정렬하되 중요한 것은, li에다 display:inline;을 , a에는 display:inline-block.. 더보기
개발자를 위한 div와 span의 적절한 사용법 출처 : http://blog.naver.com/ch4feel?Redirect=Log&logNo=61358620 1. HTML의 렌더링 방식 - HTML이 브라우저에 태그를 렌더링 할때에는 display 속성에 따른다 2. 우리가 알아야 할 display의 값은 block과 inline이다(이외에도 수많은 display방법이 있다) block : 박스모델을 적용받는 블럭요소 inline : 영역을 가지지 않고 한줄로 표시되는 인라인 요소 3. 모든 html 태그는 기본 display 값을 가지고 있다 block 요소 : div, p, form, ul, ol, li, h1~h6 등등 inline 요소 : span, img, a, label, input 등등 4. div와 span은 아무런 의미를 가지지 않.. 더보기
HTML5의 새로운 기능 Tag 설명 Description HTML5의 새로운 기능? New in HTML5? 지정 덧글 Specifies a comment 지정 문서 형식 Specifies the document type 에서 지정 하이퍼 링크 Specifies a hyperlink 지정하는 약어 Specifies an abbreviation 의 주소를 지정 요소 Specifies an address element 이미지 맵 안에서 지정하는 지역 Specifies an area inside an image map 지정하는 기사 Specifies an article 새로운 NEW 지정 페이지에 콘텐츠를 제쳐두고 콘텐츠 Specifies content aside from the page content 새로운 NEW 소리를 지정 콘.. 더보기
vertical-align 주는 방법 vertical-align을 주기 위해서 한 블록 안에 인라인 요소들이 모여 잇어야만 적용 된다.. 되는 예) 안되는 예) 더보기
scope scope="col"scope="col" scope="row"내용 내용 scope="row"내용 내용 table 코딩시 scope="col" 와 scope="row"를 보셨을겁니다. 일반사용자에게는 별의미가 없을수 있지만, 시각장애인들을 위한 접근성을 고려할때는 필요한 태그 입니다. 어떤 이미지인지 alt 태그에서 알수 있듯이.. th (제목이라는 정보)에 사용되는 속성이며, 세로(열) 일때는 scope="col" 가로(행) 일때는 scope="row" 로 사용하시면 됩니다. 더보기
가상클랙스 링크 걸 경우 순서대로 작성해야만 적용 됩니다 /*가상클랙스 링크 걸 경우*/ a{color:red;} a:link{color:blue; text-decoration:none;} /*링크요소에 색상을 블루로 바꾸고 언더라인을 없애다*/ a:hover{color:yellow;} /*링크요소에 마우스를 갖다대면 노란색으로 바뀐다*/ a:visited{color:green;} /*링크요소에 방문한 사이트 폰트색이 녹색으로 바뀐다*/ a:active{color:aqua;}/*링크요소에 마우스로 누르고 있는 순간 폰트 색상이 바뀐다*/ a:focus{background-color:yellow;}/*탭키로 이동시 선택된 폰트에 색상이 바뀐다*/ 더보기
overflow:hidden; 플룻요소의 컨텐츠가 들어 있을 경우, 플룻을 해제하기 위해 컨텐츠를 감싼 부분에 overflow:hidden이 쓰이기도 하는데, 컨텐츠의 크기가 유동적이라면 문제가 생길수 밖에 없습니다. 그 때 이 방법을 사용하는 겁니다. 또한 같은 맥락으로 사파리 브라우저에서 overflow:hidden 요소 땜에 컨텐츠가 밖으로 튀어나가는 오류를 해결할때도 사용합니다. class{zoom:1} class:after{content:".";display:block;font-size:0;height:0px;line-height:0;clear:both} 더보기
브라우저 호환성 검사를 위한 툴 MS사의 브라우저 호환성 검사를 위한 툴 IE Tetster : http://www.my-debugbar.com/wiki/ MultipleIES : http://tredosoft.com/Multiple_IE 더보기
CSS로 Table 디자인 하기 그룹웨어형식의 웹애플리케이션을 퍼블리싱하다가 보면 테이블들을 많이 사용하는데 코딩할때 마다 테이블들의 스타일시트들을 생성해줘야 할때가 있다. 귀찮아서 만들어놓은 CSS를 사용하고는 하는데 혹시나 괜찮은 CSS를 찾아보다가 CSS TABLE GALLERY를 찾았다. CSS하나 하나 다운로드 받아 처리하기 귀찮아서 정리해서 올려본다. [마크업] Flight Schedule Flight Number: From: To: Departure: Arrival: Total: 3 flights BA 3451 Heathrow Nuremberg 19:20 19:50 BA 1254 Luton Alicante 19:40 20:50 LH 331 Heathrow Hamburg 20:00 20:20 [CSS] table {borde.. 더보기
display의 속성과 ie에서 백그라운드 로딩문제 해결방안 display속성은 css에서 거의 TOP10안에 드는 핵심적인 요소중의 으뜸이라고 할 수 있다. html4에서는 모든 엘리먼트가 block요소와 inline요소로 분리되어 그 사용도가 더욱 의미 있게 되었으나 html5로 넘어가는 현 시점에서는 단순하게 블럭과 인라인 요소로만 구분 짓는 것은 무리라고 할 수 있을것이다. 먼저 display의 속성은 어떻게 되는지 부터 살펴보자 display: block - 인라인 박스로 만들어 준다. inline - 인라인 박스로 만들어 준다. inline-block - 블록박스로 만들면서 인라인 박스처럼 가로로 배열 된다. none - 박스를 만들지 않으며 시각적으로 완전히 보이지 않게 만든다. table - 블록레벨의 표로 만든다. inline-table - 인라인.. 더보기
CSS핵을 이용한 크로스브라우징 핵은 크로스브라우징에서 가능한 한 사용하지 않는게 좋다고들 말한다. 이유는 차 후 브라우저가 업데이트 되었을 시 자칫 핵 사용으로 인해 화면에 표기가 되지 않거나 오류가 발생할 수 있기 때문이라고 한다. 그러나 병맛 브라우저인 ie6과 7까지 배려한 크로스브라우징을 위해서는 핵을 사용하지 않고는 해결할 수 없는 불가피한 상황이 발생되기도 한다. .context_bar_form_field { height: 15px; // 모든 브라우저 #height: 15px; // IE 전용 _height: 21px; // IE6.0 과 이전버젼용 }우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 .. 더보기
웹 브라우저 호환성을 유지하기 위한 CSS 기법 흔히들 hack을 사용하지 않고 크로스브라우징을 해야한다고 말한다. 이유는 간단하다 새로 업그레이드 되는 브라우저에서 자칫 인식을 못하게 되면 새로 수정을 해야 하기 때문이다. 사실 ie를 제외한 타 브라우저는 브라우저에 접속하는 순간 바로 버전업이 되기 때문에 문제 될것이 없다. 문제는 바로 ie의 구 브라우저들이 꼴통이라는 점.. ie의 대표적인 ie6과 ie7같은 경우 상단한 버그를 가지고 있다. 코드를 잘 못 해석해서 개발자나 퍼블리셔를 골치 아프게 하는 요인중 하나이다. 그럼 요놈의 ie들을 어떻게 관리해줘야 골칫거리가 되지 않을까? 문제는 간단하다 ie를 담당하는 css만을 따로 제작해서 격리시켜주면 된다. 조건부 주석이라는 것인데.. 조건부 주석(Conditional Comment)이란 I.. 더보기
게시판 css 4.12 가계부 분류날짜내용 수입지출합계 일일 합계235,670원231,600원4,070원 기타4/12이전 잔액 - 4/11에서 넘어옴 40,000원40,000원 교통비4/12차비 - 지하철 + 버스 3,000원37,000원 식비4/12산채 비빔밥 - 맛있는 식당 8,000원29,000원 기타4/12복권 당첨 - 앗싸 로또! 45,670원74,670원 유흥비4/12당구장 - 장전동 ○○ 당구장 16,000원58,670원 지식/ 교양4/12소설책 구매 - 셜록 홈즈 Best 12,000원46,670원 식비4/12콩 다방 커피 - 카페 모카 5,000원41,670원 기타4/12출금 - 우리 은행 150,000원191,670원 식비4/12스테이크 - ☆☆ 스테이크 99,000원92,670원 유흥비4/12와인 .. 더보기
폼 form & 레이블 label 폼 (form) 기본틀 폼그룹의 제목(회원가입) # input - 문자 입력할수있는 박스나 체크버튼, 일반버튼등을 만들수있다. · input type="text" - 일반검색창 · input type="password" - 비밀번호창, 입력값이 ●으로 보여진다. (검색창에 글씨가 들어가있게 하려면.. value 값으로 넣어두면 됨. 물론 브라우저에서 지우고 쓸수있음!!) · input type="radio" - 예/아니오선택같이 하나에만 선택해야할때 사용. 원형버튼 · input type="checkbox" - 중복선택이 가능할때 사용. 사각버튼 (체크해두는것을 기본으로 하려면 체크하려는 값에만 checked="checked") · input type="file" - 파일첨부할때 빈 박스와, 찾아보기 버.. 더보기
줄바꿈 간격 line-height 텍스트로 글을 작성할때 워드나 한글문서에서는 엔터로 줄간격을 조절하죠~ 하지만 웹에서는 별도의 태그를 입력을 해줘야 합니다 만약 줄간격을 조절하지 않으면 답답하게 느껴지기 때문입니다 이번에는 줄일 바뀔때 간격을 조절하는 태그 line-height에 대해서 알아보겠습니다 입력방식은 총 3가지방법이 있는데요 line-height:숫자; line-height:숫자%; line-height:숫자px; 안녕하세요 css부분에서 줄간경에 대해 알아보도록 하겠습니다 입력에 따라서 차이가 나기 때문에 하나씩 살펴보기로 하겠습니다 1. line-height:숫자 만약 line-height:2 라고 입력을 하면 "글씨크기의 2배만큼 띄워라"라는 뜻인데요 작성된 첫줄에서 부터 생각을 하셔야 합니다 잘 이해가 안되시죠 ㅋ 저.. 더보기
input type 태그의 종류 //action값이 save.php이다.. 입력한 값이 save.php로 전송된다는 의미 회원 가입을 해 주세요 //input 의 type이 hidden인 경우, 브라우저 상에는 보이지 않는 숨겨진 값을 전송하겠다는 의미 이름 : // input="text" 인 경우 일반적인 한 줄 글상자를 뜻합니다. 비밀번호 : //input type이 "password"는 암호를 입력받을 때 사용하는 입력상자입니다. 결혼 여부 : 미혼 기혼 //input type="radio" 라디오 버튼은 하나만 체크할 수 있는 입력단추입니다. 차량 소유 : //input type="checkbox"에서 checkbox는 여러 개를 선택할 수 있습니다. 학벌 : //select name은 아래 풀다운 메뉴를 만들어 아래 의 값 중.. 더보기
display 1. div와 span div는 어케 돌아가는가 1 div는 어케 돌아가는가 2 div는 어케 돌아가는가 3 => 웹브라우저 에서는 아래와 같이 표시된다. div는 어케 돌아가는가 1 div는 어케 돌아가는가 2 div는 어케 돌아가는가 3 span 은... 1 span 은... 2/span> span 은... 3/span> => 웹브라우저 에서는 아래와 같이 표시된다. span 은... 1span 은... 2pan 은... 3 div와 span의 가장 큰 차이는 줄 바꿈 여부이다. div가 줄바꿈되는 이유는 css display속성 기본값이 block이고, span이 줄바꿈되지 않는 이유는 css display속성 기본값이 inline이기 때문이다. 이 두 설정을 반대로 해보자. div{display:.. 더보기
padding 값과 margin 값에 비교 더보기
text-decoration Text-Decoration 개요 : 이 속성은 요소의 글자에 밑줄(underline)이나 윗줄(overline), 취소선(line-through) 등의 꾸밈을 지정합니다. 줄을 그어 꾸미는 효과는 글자를 읽기 어렵게 할 수 있습니다. 영어와 달리, 한글은 글자가 밑줄과 윗줄과 겹칠 수 있기 때문입니다. "잘"이라는 글자를 예를 들면, 자음 "ㅈ"과 윗줄(overline)이 겹치고, 받침글자 "ㄹ"과 밑줄이 겹칩니다. 또한, 취소선(line-through)은 del 태그를 사용하는 게 바람직합니다. 정의 text-decoration 설명 값 none | [underline || overline || line-through || blink ] | inherit 기본값 none 적용대상 모든 요소 상속 안됨.. 더보기
Vertical-Align 출처: http://blog.naver.com/pet2r?Redirect=Log&logNo=10110159572 Vertical-Align 개요 : 이 속성은 요소의 베이스라인을 행 높이를 기준으로 수직 정렬한다. 정의 vertical - align 설명 값 baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit 기본값 baseline 적용대상 인라인 요소와 테이블 셀 요소 상속 안됨 백분율 자신의 line-height 를 참조 미디어 visual 값 값 설명 길이를 지정한다. '0'은 'baseline'과 같다 백분율(%)값을 지정한다. 'line-height'를 기준으로 계산되며, '0(%)'는 'bas.. 더보기
white-space 더보기

티스토리툴바