<href>나 <a>태그 등에 커서를 가져다 대면 손모양으로 바뀌지만 


그렇지 않은 요소에 클릭이벤트를 적용하였을 때는


손모양으로 바뀌지 않는다


그럴때 스타일에 cursor:pointer 를 넣게되면 손모양 커서로 바뀌게 된다


ex)

<img src="/images/button/btn_del.gif"  class="test" style="cursor:pointer;" >

저작자표시

'공부 > html & css' 카테고리의 다른 글

(html) link 태그  (0) 2016.01.11
(기타) form 태그 안의 button  (1) 2015.12.15
(css) 라운딩 처리  (0) 2015.10.21
(개념) DOCTYPE  (0) 2015.10.01
html5 태그들  (0) 2015.08.24

문서와 외부의 대상을 연결하는 태그



/////////////////////////////////////////////////


 ex)

<link rel="stylesheet" type="text/css" href="/css/nomal.css">



/////////////////////////////////////////////////


rel 에는 연결할 대상의 속성을 정의


alternate,  archives, author, bookmark, external, first, help, icon, ,last

license, next, nofollow, noreferrer, pingback, prefetch, prev, search, sidebar

stylesheet, tag, up


이 올수 있는데 예제에서의 rel="stylesheet" 는 스타일시트로 사전 정의 하는 것


//////////////////////////////////////////////////


href에는 연결할 대상의 로케이션


/////////////////////////////////////////////////


type="text/css" 은 대상의 유형

(텍스트 기반의 css파일)

저작자표시

'공부 > html & css' 카테고리의 다른 글

(html) 커서 손모양으로 바꾸기 cursor:pointer  (0) 2016.01.25
(기타) form 태그 안의 button  (1) 2015.12.15
(css) 라운딩 처리  (0) 2015.10.21
(개념) DOCTYPE  (0) 2015.10.01
html5 태그들  (0) 2015.08.24

form 태그 안에 input태그의  버튼 타입이 있었는데


<form>

<input type="button" onclick="test()" >

</form>


이런식으로..


test()에선 form 처리를 하게 만들어 놓았는데

당연히 버튼을 클릭하면 test()가 실행 될 줄 알았는데

어쩔때는 실행되고 어쩔때는 새로고침 현상이

나타났다.


알고보니

form태그안에 input button이 있으면

버튼 클릭시,

버튼을 감싸고잇는 form을 타서 그런현상이

일어났던 것이다.


form에 action이 설정안되어 새로고침 같이

표현되었을 수도...


input button을 form밖으로 빼는 방법으로 

오류를 해결했다.

저작자표시

'공부 > html & css' 카테고리의 다른 글

(html) 커서 손모양으로 바꾸기 cursor:pointer  (0) 2016.01.25
(html) link 태그  (0) 2016.01.11
(css) 라운딩 처리  (0) 2015.10.21
(개념) DOCTYPE  (0) 2015.10.01
html5 태그들  (0) 2015.08.24

전체 

border-radius : 10px;


부분

border-top-left-radius (왼쪽 상단)

border-top-right-radius (오른쪽 상단)

border-bottom-left-radius (왼쪽 하단)

border-bottom-right-radius (오른쪽 하단)

[출처] [border-radius] css 테두리 구현해보자, 라운딩처리 어렵지 않아요 !|작성자 쏭냥


저작자표시

'공부 > html & css' 카테고리의 다른 글

(html) link 태그  (0) 2016.01.11
(기타) form 태그 안의 button  (1) 2015.12.15
(개념) DOCTYPE  (0) 2015.10.01
html5 태그들  (0) 2015.08.24
html내의 <script> 태그 위치  (0) 2015.08.24

DOCTYPE - Document Type의 줄임말. 


웹 페이지에서 맨 처음에 선언되어 어떤 종류의 html을 사용할지

웹 브라우저에게 알려줄 목적으로 사용.


웹표준 문서에는 반드시 !DOCTYPE 지정

반드시 <html> 태그 위에 선언 해줘야 함


[HTML5]


<!DOCTYPE html>  
<html lang="ko">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>


[XHTML]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko">
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

</body>

</html>

============================================

XHTML은 웹표준이 잘 되어 있어 코딩 기준, HTML5는 확장성이 넓다.

[출처] [웹표준 HTML]정리- DOCTYPE/마크업규칙/태그/IE edge체크|작성자 안단테

[출처] [웹표준 HTML]정리- DOCTYPE/마크업규칙/태그/IE edge체크|작성자 안단테

[출처] [웹표준 HTML]정리- DOCTYPE/마크업규칙/태그/IE edge체크|작성자 안단테


저작자표시

'공부 > html & css' 카테고리의 다른 글

(기타) form 태그 안의 button  (1) 2015.12.15
(css) 라운딩 처리  (0) 2015.10.21
html5 태그들  (0) 2015.08.24
html내의 <script> 태그 위치  (0) 2015.08.24
Table 공부  (0) 2015.08.19
<article>독립된 컨텐츠영역을 지정합니다.
<aside>페이지의 왼쪽 혹은 오른쪽에 위치한 컨텐츠영역을 지정합니다.
<bdi>텍스트의 방향이 반대일 경우 사용합니다.
<details>추가정보를 기술하는 영역을 지정합니다.
<dialog>대화상자나 창을 지정하며 open속성을 사용하여 숨기거나 보이도록 할 수 있습니다.
<figcaption><figure> 요소의 제목을 지정합니다.
<figure>문서흐름상 이해를 위해 필요한 그림,동영상등을 포함할때 사용합니다.
<footer>문서나 Section의 하단 정보 영역을 지정합니다.
<header>

문서나 Section의 상단 정보 영역을 지정합니다. 

<main>문서의 주 컨텐츠영역을 지정합니다.
<mark>마크되거나 하이라이트된 텍스트.
<menuitem> 팝업메뉴의 아이템을 지정합니다.
<meter>설정된 범위안에 특정값을 막대그래프식으로 표현합니다.
<nav>문서의 네비게이션을 지정합니다.
<progress><meter>태그와 비슷하게 동작하며 현재 진행되고 있는 수치를 보여줍니다.
<rp><rt>태그가 지원되지않는 브라우저를 위해 사용합니다.
<rt><ruby>태그와 같이 사용합니다.
<ruby>일본어나 중국어에서 글자위에 글자를 쓸때 사용합니다.
<section>문단구분을 지정합니다.
<summary><details> 요소안에서 제목이나 요약등의 내용을 포함합니다.
<time>날짜/시간 표현
<wbr>줄바꿈위치를 지정합니다.


ie7,8은 html5 ,css3 지원안함
ie9는 html5,css3가 지원은 하지만 그리 매끄럽지 않음
ie10,11은 다수 지원
여타 다른 브라우저[크롬,파이어폭스,오페라,사파리]는 다 지원한다고 하니
html5 태그 사용시 호환 테스트를 잘 해봐야겠다.

출처 : http://m.blog.naver.com/heavyflood/220173516646
        ----------------------------------------------------------
         http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=10501&docId=211784719&qb=aHRtbDUg7YOc6re4IO2YuO2ZmA==&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=SOrM6doRR1lssuxmToKsssssssZ-506744&sid=ep1m%2BI%2B904RgqawY4liH%2Bg%3D%3D

저작자표시

'공부 > html & css' 카테고리의 다른 글

(기타) form 태그 안의 button  (1) 2015.12.15
(css) 라운딩 처리  (0) 2015.10.21
(개념) DOCTYPE  (0) 2015.10.01
html내의 <script> 태그 위치  (0) 2015.08.24
Table 공부  (0) 2015.08.19

- <head> 안에 쓰는것이 일반적이었습니다.

  ( 이유 : css나 js같은 외부 파일을 한곳에서 관리하자는 목적으로)


- 하지만 브라우저는 <body> 태그를 만나야 렌더링을 시작하기 때문에 외부파일을 내려받고, 파싱하는 작업이 길어지면

  사용자는 페이지가 느리다고 느낄 수 있습니다. 그렇기 때문에 <body> 요소안, 페이지 콘텐츠 마지막에 쓰는것이 좋습니다.

[출처] HTML 속의 자바스크립트 : <script>|작성자 똥광이


 렌더링 : 요청받은 내용을 브라우저 화면에 표시하는 일


[출처] HTML 속의 자바스크립트 : <script>|작성자 똥광이 http://blog.naver.com/silver889/220247077967

저작자표시

'공부 > html & css' 카테고리의 다른 글

(기타) form 태그 안의 button  (1) 2015.12.15
(css) 라운딩 처리  (0) 2015.10.21
(개념) DOCTYPE  (0) 2015.10.01
html5 태그들  (0) 2015.08.24
Table 공부  (0) 2015.08.19

web 공부중입니다..... (완전초보)

처음 눈에 띄인 table에 대해 공부한 내용을 여기다 저장합니다.ㅎ 

(다음에 다시 보기 위해)

table에 대한 지식을 계속해서 업데이트 하겠습니다.

---------------------------------------------------------------

테이블의 기본 구조 (두 줄 짜리 표)

1
2
3
4
5
6
7
8
9
10
<table>​
    <tr>
        <th>
        </th>
    ​</tr>    
     <tr>        
        <td>        
        </td>    
    <tr>
</table>
cs

[출처] html - ta ble 태그 활용 및 속성 알아보기|작성자 슬로아답타



<tr> : 행, 한 줄 

<td> : 행, 셀이라고 생각하면 편할거 같다.

<th> :  th 태그는 표의 제일 윗줄(첫번째 줄)에 주로 쓰인다고 합니다.  (글자가 더 진하게 표시됨)

'공부 > html & css' 카테고리의 다른 글

(기타) form 태그 안의 button  (1) 2015.12.15
(css) 라운딩 처리  (0) 2015.10.21
(개념) DOCTYPE  (0) 2015.10.01
html5 태그들  (0) 2015.08.24
html내의 <script> 태그 위치  (0) 2015.08.24

+ Recent posts

티스토리툴바