728x90
반응형

Web Language/CSS || HTML 7

css 처리 우선 순위

# CSS 우선순위 : !important > 2.인라인 > 3.내부 > 4.외부 1. !important : 모든 style 규칙에 우선적용 사용법: {속성:속성값 !important;} ex) #test {float:left; margin:0 !important;} 2. 인라인 : 해당 테그에 바로 적용 ex) 인라인 CSS 3. 내부: 페이지 내에서 로 선언 ex) #test {font-size:12pt; color:gray;} 내부 CSS 4. 외부: 외부파일 불러옴 외부에 css파일을 만들고 사이에서 불러온다. ex)

textarea 박스 안에 라인 집어 넣기, 버튼에 이미지 넣기, 풍선도움말넣기

>> textarea 박스 안에 라인 집어 넣기 css 예제 내용 >> 버튼에 이미지 넣는 css 예제 .btn_img{ background:#9bb5d4 url(./img/btn_round_img.gif) no-repeat right 50%; padding:2px 10px 4px 0; width:55px; height:17px; font-family:굴림; font-size:9pt; color:#ff3333; border:0; } >> 풍선도움말 넣기 이미지 풍선도움말 ( alt 사용) 텍스트 풍선도움말 (title 사용 ) 네이버 텍스트에 풍선도움말넣기

반응형 웹 화면을 위한 설정방법

1. meta태그에 viewport설정 1) meta 태그에 viewport를 사용하여 브라우저 뷰포트의 너비와 배율을 제어. 2) 기기 독립적 픽셀에서 화면 너비에 맞추려면 width=device-width를 포함 3) 기기 독립적 픽셀과 CSS 픽셀 간에 1:1 관계를 설정하려면 initial-scale=1을 포함 ex) *** viewport에서 initial-scale 이외 속성 minimum-scale maximum-scale user-scalable 이들 속성은 사용자가 뷰포트를 확대/축소할 수 없음 2. 상대 너비 값 사용 : viewport 설정 후 width값을 %로 설정 3. CSS 미디어 쿼리 사용 ( css에 필터 적용 ) 1) 기기 특성을 기반으로 스타일을 적용하여 min-devi..

메타 태그 정리 - 기본메타태그, 기능메타태그, 로봇 설정, 로봇 검색엔진 최적화(SEO)

1. 기본 화면 정보 메타 태그 -> 로봇 검색 허용 범위 지정 *** 로봇 검색 허용 범위 설정값 - ALL : 로봇 검색을 허가함 - NONE : 로봇 검색을 허가하지 않음 - INDEX,FOLLOW : 현재 파일을 읽고 링크된 문서도 읽음 - NOINDEX,FOLLOW : 현재 파일을 읽지 않고 링크된 문서만 읽음 - INDEX,NOFOLLOW : 현재 파일을 읽고 링크된 문서는 무시 - NOINDEX,NOFOLLOW : 현재 파일을 읽지 않고 링크 문서도 무시 ****** 로봇 검색엔진 최적화(SEO) ****** 1) keyword - 한글 키워드와 영문 키워드를 함께 입력하는 것도 좋음 => , - 키워드를 무조건 많이 적은 것이 좋은게 아님. - 단어 반복해서 계속 넣을 경우 스팸처리 될 수..

본문 마크업, 의미에 맞는 시멘틱 메모

1) 헤더부분 - header : 로고, 네비게이션 등 => nav : 메인 네비게이션 ex) 메인 메뉴 company product portfolio contact us community 2) 본문부분 - div, section, article : 본문, 컨텐츠 => aside : 부가적인 주제 ex1) what's new 첫번째소식 두번째소식 세번째소식 ex2) 검색 폼 검색 검색 ex3) 어비 폰트 신청 무료 신청 free1 free2 3) 하단부분 - footer : 하단 => address : 연락처 ( 하단에서만 사용가능, 컨텐츠 블럭에서는 사용안함 ) ex) 개인정보 취급방침 이용약관 사이트맵 Ally의 서재 담당자 : Ally 대표홈페이지 : http://toally.tistory..

728x90
반응형