2013년 9월 17일 화요일

Head First HTML with CSS & XHTML 요약1

주요사이트 정리

약어 정리
  • HTML : HyperText Markup Language
  • CSS : Cascading Style Sheet
  • HTTP : HyperText Transfer Protocol
  • URL : Uniform Resource Locators
  • PNG : Portable Network Graphics
주요 반복 구문
  • style 태그 구문 : <head> 태그 하위에 추가
    <style type=”text/css”>     ...내용</style>
  • css 파일 외부 링크 : <head> 태그 하위에 추가
    <link type=”text/css” rel=”stylesheet” href=”    $url”/>
  • css link 속성 중 media 값 항목 :
    • screen : 컴퓨터 화면
    • print : 프린터 출력용 화면
    • handheld : 모바일 장치 와 휴대전화
    • tty : 텔레타이프와 터미널
    • tv : 텔레비젼
    • voice : 스피치 브라우저
    • projection : 슬라이드
주요 문자 속성
  • > : &gt;
  • < : &lt;
  • & : &amp;
주요 HTML Tag
  • <html> : 최상위
  • <title> : 페이지 제목
  • <head> : 머릿말
  • <body> : 내용
  • <h1> ~ <h6> : 제목1 - 제목6 , 블록 head
  • <p> : 문단 , 인라인 , paragraph
  • <style> : css 관련
  • <img> : 이미지를 표시하는 태그,빈태그 src=”url” , image,인라인
  • <em> : 강조 , emphasize,인라인
  • <a> : 링크, anchor (닻,앵커),인라인
  • <q> : 인용, quote (인라인)
  • <blockquote> : 인용 , 블록
  • <br> : 라인 브레이크 태그,빈 태그 , line break
  • <ul> : 순서화되지 않는 리스트 , unordered list
  • <ol> : 순서화된 리스트, ordered list
  • <li> : 리스트 항목, list item
  • <dl> : 정의 목록 , definition list
  • <dt> : 정의 용어 , definition term
  • <dd> : 정의 설명 , definition description
  • <address> : 연락처, 주소 정보를 알려주는 태그
  • <code> : 컴퓨터 프로그램 코드과 정보를 알려주는 태그
  • <pre> : 타이핑 한 결과 대로 보여주는 태그
  • <strong> : 특별한 강조를 하는 태그,(인라인)
  • <hr> : 수평선 ,horizontal rule
  • <div> : 블록를 그룹화 시킴
  • <span> : 인라인 그룹화 시킴
  • <table> : 테이블 태그
  • <th> : 테이블 제목 , table header
  • <tr> : 행 , table row
  • <td> : 정보 , table date
  • <caption> 테이블 캡션
주요 HTML 태그 속성
  • img의 src : 이미지 자원 위치를 알려 준다. URL 형식 ,source
  • style의 type : 종류, 관용구형태로 text/css 형태를 사용
  • href : 링크 위치를 알려줌. URL형식 , hyper reference
  • 모든 태그의 id : 엘리먼트를 구분 식별자,사용자가능 유형(A-z,하이픈,밑줄,콜론,..그러나 공백문자 제외)
  • 모든 태그의 class : 엘리먼트 그룹의 선택하기 위해서
  • a의 target : _blank 일 경우 새로운 창으로 링크 결과를 보여준다.
  • img의 alt : 이미지를 찾을 없을 때 설명 (alternative text describing)
  • img의 width,height : 이미지의 실제 크기를 넣어 줌.
주요 CSS 속성
  • margin : 밖쪽 여백 (top right bottom left)
    • margin-left : 왼쪽 바깥 여백 , 값 형태는 20px, 20%
    • margin-right : 오른쪽 바깥 여백
  • padding : 안쪽 여백 (top right bottom left) , 반시계 반향
  • color : 폰트색 변경 가능(전경색)
  • font : 관련 설정 (단일 설정: style weight size/line-height family)
    • font-family : 폰트 설정 , 값은 다중으로 가능 하면 ‘맑은 고딕'
    • font-size : 폰트 크기 (px,em,%)
    • font-weight : 폰트 굵기
    • font-style : 폰트 스타일 (italic,oblique)
    • line-height : 줄 간격 (em)
  • text-decoration : underline
  • text-align : 블록엘리먼트에 속한 텍스트를 정렬하기 위해서 정렬
      • center : 가운데 정렬
      • right : 오르쪽 정렬
      • left : 왼쪽 정렬
  • border : 경계선 관련 설정 , 선 두께,형식, 색
    • border-color : 경계선 색
    • border-width : 경계선 두께
      • thin , medium , thick
      • 1-6px
    • border-style : 경계선 종류(실선,점선)
      • solid : 실선
      • double : 이중선
      • groove : 홈이 있는 선
      • dotted : 점선
      • dashed : 긴 점선
      • inset : 안쪽들어간 3차원 느낌선
      • outset : 반쪽들어간 3차원 느낌선
      • ridge : 페이지 돌출형 느낌선
  • background : 관련 설정들 (단일 설정: color image repeat)
    • background-color : 바탕색 , 속성값은 #rr,gg,bb , white,gray,black
    • background-image : 배경 이미지 값예) url(images/background.gif)
    • background-repeat : 반복 여부 (
      • repeat : 기본값  
      • no-repeat : 반복 없음
      • repeat-x : x 축으로 반복
      • repeat-y : y 축으로 반복
      • inherit : 부모 상속
    • background-position : 이미지 위치 (top left) 위쪽 왼쪽
  • width : block 엘리먼트의 경우는 content의 너비만 설정함.
  • 속성값 중 !important : 저자 스타일을 재 정의 가능 함.
  • float : 흐름에 대한 정의 배치
  • clear : 흐름을 막는 역할을 수행한다.
  • 위치관련 속성
    • position : 위치 속성
      • static : 기본값 , float 속성을 사용가능 해짐.
      • absolute : 절대 좌표값을 잡을 수 있다.
      • fixed : 고정-브라우저 상대적 좌표 , 주로 광고를 표시 할때
      • relative : ?
    • top : 위로 부터 위치
    • left : 왼쪽으로 부터 위치
    • z-index : 층을 의미 값이 높을 수록 위쪽에 있음.
  • caption-side : 캡션 위치 설정 (bottom, top)
  • border-spacing : 셀사이의 공간
  • border-collapse : 테두리 혼합(collapse)
  • 리스트 관련 속성
    • list-style-type : 리스트의 marker 꾸미기
      • disc : 꽉찬동그라미
      • circle : 떵빈 동그라미
      • square : 네모난 상자
      • none : 없음.
    • list-style-image :  사용자 정의 marker url(URL)
    • list-style-position : 마커과의 위치
      • inside : 마커 밑
      • outside : 텍스트 밑에 마커가 옮
CSS 선택자 예제
  • 선택된 요소의 하위 요소까지 선택됨.
  • p : 단일 요소
  • h1,h2 :  여러 요소 선택
  • p.$className : p 요소 class가 $className인것
  • .$className : $className인 모든 요소
  • p.#$id : p 요소 중 id가 $id인것
  • #$id : 모든 요소중 id가 $id인것
  • div h2 : div h2 의미는 div가 부모 , h2 자식 즉 div요소중 h2 자식을 선택
  • #$id $emName : $id를 요소중에 엘리먼트 이름이 $emName를 선택(직계 자손은 아님)
    #$id > $emName - 이렇게 하면 직계 자손됨.
  • a:$status : $status에 선택 가능 , 아래 이외 상태들 focus , active
    예) a:link , a:visited , a:hover
HTML 문서 타입 정의

작성자: 시간:
라벨: , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)