'help/html,css'에 해당되는 글 2건

.class : class="class" 의 모든 요소를 선택

#id : id="id" 의 모든 요소를 선택

:link : 링크 선택자는 html에서 모든 링크들을 선택.

background :  모든 background 속성을 한번에 선언할 수 있다. ex) div{background:#ff0000 url(bg.gif) top left no-repeat}

background-color : 배경의 색상을 지정. 

background-image : 배경의 이미지를 지정.

background-position : 배경의 위치를 지정.

border : 요소에 테두리 효과를 주는 것. color, width, style.  ex) div { border:solid 2px #ff0000; }

height : 요소의 높이값을 지정. 

         속성 : auto - 기본값, 브라우저의 높이에 따라 자동으로 설정.

                % -  요소가 포함된 영역의 퍼센트 값으로 계산.         ex) div { height:50px; }

font : 모든 폰트 속성을 하나로 정의. font-size,font-family 는 필수 값. ex) div { font:italic small-caption bold 12px arial,sans-serif; }

       line-height 속성은 선(텍스트 줄) 사이의 간격을 정의한다. 

       속성  font-weigth - 폰트의 굵기를 지정. 

                           bold (두껍게)  ex) { font-weight:bold; }

margin : top right bottom left ( 10px 10px 10px 10px )             ex) div { margin:10px 20px; }

         auto - 브라우저가 자동으로 계산하여 중앙에 오게 위치.  

padding : top right bottom left ( 10px 10px 10px 10p )   ex) div { padding:10px 20px; }

clear : float 된 요소를 해제시키는 방법으로 clear 속성에 지정된 값에 위치된 float 속성은 적용되지 않는다. 

float : 박스 요소를 띄울 위치를 지정한다. 

        만약 position 속성에서 absolute 가 지정되어 있다면 float 속성은 무시된다. 

        left - 요소를 왼쪽 방향으로 띄워지게 지정

        right - 요소를 오른쪽 방향으로 띄워지게 지정

        float할 요소는 width 값을 지정해준다. 너비를 지정해주지 않으면 각 브라우저 마다 랜더링이 달라진다. 

        float된 요소는 브라우저의 정상흐름을 벗어나 해당 문서(부모요소)의 가장 왼쪽 또는 오른쪽에 위치한다. 

display : 인라인(inline), 블럭(block) 타입인지 등에 관한 요소의 유형을 지정.

          block - 위아래 줄바꿈이 되는 블럭요소로 지정.

position : 해당요소가 문서나 브라우저 상에서 어디에 위치 될지를 지정. ex) div { position:absolute; left:50px; top:10px; }

  absolute - 해당 요소의 첫번째 부모 요소 위치에 따라 지정

           relative - 해당 요소의 기본위치에 따라 지정. 

                      예를 들어 left 20 이면 20픽셀이 요소의 왼쪽 위치에 추가된다. 

visibility : 해당 요소가 보여지게 할지 안보여지게 할지 지정.

             visible - 기본값, 요소가 보여지게 지정. 

             hidden - 요소가 보여지지 않게 지정 ( 해당 요소의 공간은 유지됨)

            { visibility:hidden; } 은 보여지지 않지만 공간은 차지하고 있으며, 

            { display:none; } 은 보여지지 않으면서 공간도 없어지게 된다. 두 속성의 차이점을 주의해야 한다.

text : line-height - 텍스트 줄 간격을 지정.

       text-align - 텍스트의 수평방향 정렬을 지정.

       vertical-align - 요소의 수직 정렬에 대한 지정

       letter spacing - 자간 간격 너비를 지정

       line-height - 텍스트 줄 간격을 지정     

<p> : paragraph. 단락, 문단, 절을 의미.

<br> : break. 문서 내 줄바꿈. 문단을 만들지는 못하며, 닫는 태그 없이 사용 

<hr> : horizontal. 수평의,가로선의 . 수평선을 그어 내용 영역을 구분

<!-- -->  : 주석처리 

<b> : bold. 굵은 텍스트

<i> : italic. 기울임꼴 이탤릭체 텍스트

<form> : 정보교환을 하기 위한 입력양식을 만들 때 사용

         (필수) action = 입력된 데이터가 전송될 페이지 지정. target은 사용중지

          method = 입력데이터가 처리될 방식을 지정해줌. get, post.  

<input/> :사용자가 글자, 텍스트를 넣을 수 있도록 한다. 

          Input 영역의 기본값은 text이고, 타입(속성)을 지정하여 옵션을 넣으면 한 줄 글상자, 

          확인 상자, 라디오 버튼, 입력버튼 가능. 

          입력요소를 위한 레이블을 정의하는 것은 <label> 태그를 사용.

          속성: alt, - image일 경우 이미지 대신 표시할 대체 텍스트를 지정

                checked, - type 속성값이 checked, radio 일 경우 체크된 상태로 표시.

                disabled,- 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 한다. 수정불가.데이터 전송 불가.

                readonly, - 속성값이 text,password일 경우 읽기전용으로 가능.

                type, - button,file,hidden,image,password,radio,submit,text

                value.

<textarea> : 여러줄의 텍스트를 입력할 수 있는 상자. 

             크기(필수) 지정은 rows(한줄 문자수), cols(화면 줄 수) 또는 css 로.

<button> :  버튼을 만들 때 사용. 웹브라우저마다 type이 다름.

            type은 submit(보내기), button(일반버튼), reset(입력값을 모두 초기화)

<label> : id 속성과 매칭시켜 사용한다. 

<select> : 선택메뉴(drop-down0list)를 만들 때 사용. 

           select 요소 내의 <option>태그는 목록에 있는 사용가능한 옵션을 정의. 

           속성: multiple - 다중선택할 수 있도록 지정.

<option> : select 요소 안에서 선택 항목을 나타내는 옵션을 지정.

           속성: selected -  해당 옵션 항목이 기본값으로 선택되도록 지정. 

<img/> : html 안에 이미지를 넣는 태그이다. 링크로 연결.

         속성: alt - 이미지를 위한 대체 텍스트를 정의

               src - 이미지가 위치하는 곳의 url을 지정.

<a> : anchor를 의미. href 속성을 사용하여 다른 문서로의 링크를 생성.

      방문하지 않은 링크는 파란색, 방문한 링크는 보라색, 활성화된 링크는 빨간색 underline.

      속성 : href - 링크의 목적지를 지정. 

             target - 링크되는 페이지의 위치를 지정.

<ul> : unordered list. 순서가 없는 목록

<ol> : ordered list . 알파벳과 같이 순서가 있는 목록

<li> : list. 목록(ul,ol)을 구성하는 세부 항목

<table> : 표

<th> : 표의 열의 제목

<tr> : 표의 행

<td> : 표의 열

<style> : 스타일 정보를 정의. type 속성에 "text/css"값을 지정해줘야 한다. 

          head 태그 내에 위치하며 외부 스타일 시트를 연결할려면 link 태그를 사용. 

<div> : division . html 문서 영역이나 섹션의 분할을 정의한다. 

        레이아웃을 위해 css와 함계 사용.

<span> :  span 태그는 인라인 요소들을 그룹화하는데 사용. 

<meta> : html 문서에 대한 메타데이터를 제공. 서버에서 분석. 페이지설명, 키워드 등의 내용을 포함하며

         head 태그 내에 위치한다.