'프로그래밍/HTML' 카테고리의 글 목록 (2 Page)

프로그래밍/HTML

HTML4 - <IMG> 태그 , <a> 태그 2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) 2019.02.28
HTML5 태그 (2) - article,section,nav 2019.02.28
HTML 태그 2019.02.27

HTML4 - <IMG> 태그 , <a> 태그

2019. 4. 2. 09:37

◎ <IMG> 태그

<img src="twitterlogo.jpg" alt="트위터">

▼ 내용이 없는 경우는 빈 대체 텍스트 제공 (alt 속성 이용)

alt의 대체 텍스트를 넣을경우 이미지를 있는그대로 표현할수 있는 텍스트를 넣는게 좋다. 예를들어 트위터 로고 img 파일을 너놓고 alt 속성에 새라고 넣으면 이건 잘못된 예시다. 이유는 시각장애인들의 접근성을 위해서이다.

<img src="연혁도.jpg" alt='수자원공사이력' longdesc='text.html' >

▼ 아래처럼 이미지내용이 길거나 복잡한 경우는 longdesc, 대체 콘텐츠 등으로 추가정보 제공

연혁도 같은 img파일의 텍스트가잇는 것 같은경우엔 longdesc='long.html' 같은걸 써서 텍스트를 따로남깁니다.

또한 다른방법으로는 보통 연혁도같은경우 ol li 태그등을 이용하여 텍스트로 표현해주는데 따로 html을 만드는게아니라 이미지 바로밑에 텍스트를 넣어준다 그리고 텍스트의 스타일을 position:absolute: left:-5000% 를 사용하여 넣어준다 이유는 일반사용자는 그림을보고 이해하지만 시각장애인들은 웹페이지를 대신 읽어주는 기계를 사용해서 듣기때문이다. 이미지파일은 못읽고 대체텍스트alt나 그밑에 숨긴텍스트를 읽어서 들려주기때문이다. 간혹 display none으로 하는경우도 있는데 이경우 시각장애인의 장비가 읽어주지 못하는 경우가생긴다. 그래서 position으로 위와같이 작성하는게 좋다

▼ longdescription 확인방법. (마우스 우측버튼 > 설명보기)

◎ <a> 태그

▼ <a> = Anchor (닻)

▼ href = Hypertext Reference

▼ 페이지와 페이지를 연결하는 link

▼ target 속성으로 페이지 열리는 방식 제공 (_blank 라는 속성을 넣어주면 새창열림)

<a href="url" target="_blank"> 텍스트 ></a>

▼ 다른 도메인 연결시 http:// 까지 제공해야함

▼ 파란색 텍스트에 밑줄로 기본제공됨

▼ href의 여러가지 이벤트 #을 주게되면 그뒤에 나오는 id값을 찾아서 스크롤이 이동된다.

1. <a href=""> 링크값에 내용이 없을경우</a>
2. <a href="#">#만 제공하는 경우 </a>
3. <a href="#content">내부링크를 제공하는 경우 </a>
4. <a href="#a">없는 아이디를 넣는경우 </a>

1번 : 내용이 없을경우 IE의 경우는 내컴퓨터가 열림 , Chrome 는 아무 변화없음
2번 : #만 제공하는경우엔 scroll이 맨위로 가게됩니다
3번 : #content는 #뒤에 이름을 써줄경우 내부링크로 작동되어 
      태그의 id='content' 인 태그를 찾아서 scroll 이 이동됩니다.
4번 : #a #뒤에 없는 id를 넣을경우 현재 scroll 고정, 현재scroll에서 새창이나 
      다른 이벤트를 줄경우 사용 #none를 쓰는사람도있는대 #a 로 쓰는게 바람직하다

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - form 태그의 enctype 속성 (파일 업로드) (3)	2019.04.16
HTML4 - Entity Code (0)	2019.04.15
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML5 태그 (2) - article,section,nav (0)	2019.02.28

HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그

2019. 4. 2. 09:10

◎ Block Element

div , p , ul , ol , li , dl , dt , dd , h1 ~ h6 , pre
noscript , table , hr , form , blockquote , address , fieldset

▼ 테트리스 블록처럼 촘촘이 쌓여가는게 특징이다.

▼ 블록요소 안에 블록요소를 포함할수 있다.

▼ 블록요소 안에 인라인요소를 포함할 수 있다.

▼ 일부 블록요소는 블록요소를 포함할 수 없다. - <address> , <h1>~<h6> , <p> 등

▼ 가로사이즈가 100% 이다.

▼ 가로,세로사이즈 적용 가능하다.

▼ 안쪽여백(padding), 바깥쪽여백(margin) 모든 방향이 다 적용 가능하다.

◎ Inline Element

a , span , img , input , strong , samp , var , cite , abbr
q , sub , sup , select , b , strong , em , ins , u , i , textarea

▼ 한 줄로 선처럼 나열된다.

▼ 안쪽여백(padding), 바깥쪽여백 (margin) 은 좌우측만 적용된다.

▼ 가로(width), 세로(height) 사이즈 적용이 안된다.

▼ 일부 요소는 적용 가능하다 .- input , textarea , select , img

▼ 인라인 요소안에는 인라인 요소만 포함한다. 즉, 인라인 요소 안에 블럭요소를 포함할 수 없다.

▼ 자신의 부모의 가로폭보다 현재의 가로폭이 길면 다음줄로 넘어간다.

◎ Heading Element (Head)

<h1> , <h2> , <h3> , <h4> , <h5> , <h6>

▼ 제목(콘텐츠 블록)

▼ inline 요소와 텍스트만 포함할 수 있음

▼ 계층구조를 준수해야함 , 제목을 건너뛰는 구조는 바람직하지 않음 - h1,h2,h3,h4,h5,h6 요소 순서로 나열

▼ <h1> 요소는 한페이지에 한번만 제공함

▼ 굵은 글씨

▼ 제목과 관련된 내용의 소제목들은 h1 h2 h3 으로 쓰지만 관련없는 제목들은 상위제목가 같은 태그를 쓴다.

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML5 태그 (2) - article,section,nav (0)	2019.02.28
HTML 태그 (0)	2019.02.27

HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder})

2019. 2. 28. 10:31

Input 태그의 주요 속성 (HTML5)

l pattern : 정규식 표현을 넣어서 데이터를 검증할 수 있다.

l required : 필수 입력사항인지 여부를 세팅할 수 있다.

l autofocus : 페이지가 열릴 때 처음으로 포커스가 이동하도록 세팅한다.

l placeholder : 텍스트 박스에 흐린 글씨로 힌트 문장을 제공한다.

◎ pattern 속성

▼ pattern 은 정규식을 넣어서 데이터를 검증할 수 있는 속성입니다. pattern 속성에 정규식을 넣어서 input 에 입력한 값의 유효성을 체크할 수 있는 것입니다. 이렇게 pattern 속성은 유효성 검사를 아주 심플하게 만들어 줍니다. 아래 예제는 전화번호에 대한 유효성 검사입니다. pattern 에 정규식으로 전화번호인지 아닌지 판단하는 식을 넣었습니다. type=”tel” 은 전화번호 여부를 체크하지 않기 때문에 pattern 속성과 함께 많이 사용됩니다.

    <form action="action.jsp">
        <div>
           <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000">
        </div>
        <div><input type="submit" value="전송"></div>
    </form>

ㅎㅇ

(왼) 실패시 (오)성공시

◎ required 속성

▼ required 는 input 박스에 값을 반드시 입력해야 넘어갈 수 있도록 만든 속성입니다. 만약 입력하지 않으면 아래 그림과 같이 메시지가 뜨고 더 이상 진행할 수가 없습니다.

    <form action="action.jsp">
        <div>
            <input type="text" pattern="(010)-\d{3,4}-\d{4}" 
                title="형식 010-0000-0000" required="required"></div>
        <div><input type="submit" value="전송"></div>
    </form>

◎ autofocus 속성

▼ autofocus 속성은 페이지가 새로 시작될 때 입력된 input 에 포커스가 자동으로 가수 있도록 해 줍니다. 기본 속성은 화면의 어느 컨트롤에도 포커스는 가지 않습니다. 보통 페이지가 로딩되지 마자 사용자에게 값을 입력 받아야 하는 화면에서 주로 이용됩니다. 로그인 창에서 id 에 포커스가 가 있는 것과 같습니다.

    <form action="action.jsp">
        <div>
            <input type="text" pattern="(010)-\d{3,4}-\d{4}" 
                title="형식 010-0000-0000" required="required"
                autofocus></div>
        <div><input type="submit" value="전송"></div>
    </form>

◎ placeholder 속성

▼ 사용자에서 입력 해야 되는 값에 대한 힌트를 제공합니다. 흐리게 표현되는 문장을 보고 사용자가 실수 하지 않도록 입력 값을 유도하는 것입니다. 이것은 입력하는 순간 지워 지며, input 박스에 아무것도 없다면 다시 나타납니다. 이것은 화면을 아주 심플하게 만들어 줍니다. 왜냐하면 별도로 제목을 표시하지 않아도 되기 때문입니다. 예전에는 일일이 자바스크립트로 구현을 해야 했거든요.

<html>
<head>
    <title></title>
</head>
<body>
    <form action="action.jsp">
        <div>
            <input type="text" pattern="(010)-\d{3,4}-\d{4}" 
                title="형식 010-0000-0000" required="required"
                autofocus placeholder="형식 010-0000-0000"></div>
        <div><input type="submit" value="전송"></div>
    </form>
</body>
</html>

◎ disabled 속성

▼ 이렇게 disabled 를 사용하면 태그가 먹통이 되서 사용이 불가능하게됩니다.

이상태로 전송시 form 태그엔 데이턱 ㅏ업

    <form action="action.jsp">
        <div>
            <input type="text" pattern="(010)-\d{3,4}-\d{4}" 
                title="형식 010-0000-0000" required="required"
                autofocus placeholder="형식 010-0000-0000"
                disabled></div>
        <div><input type="submit" value="전송"></div>
    </form>

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML5 태그 (2) - article,section,nav (0)	2019.02.28
HTML 태그 (0)	2019.02.27

HTML5 태그 (2) - article,section,nav

2019. 2. 28. 10:29

article :

1. (신문·잡지의) 글, 기사

2. (합의서·계약서의) 조항

3. (특히 세트로 된 물건의 개별) 물품

section:

1. (여러 개로 나뉜 것의 한) 부분, 부문, 구획

2. (조립식) 부품

3. (문서책 등에서) 절(節), (신문의) 난(欄)

nav (navigation):

1. (지도 등을 보며) 길을 찾다

2. (바다·강 등을) 항해하다

3. (힘들거나 복잡한 상황을) 다루다

각각의 이런뜻이 있습니다.

옜날에는 모든것을 div로 묶어서 표현하였지만 HTML5 로 오면서 묶는거에도

의미를 두자 해서 여러가지 태그들이 나왓습니다

그중 많이쓰이는것이 HEADER , FOOTER , MAIN , NAV ,SECTION ,ARCTILE 등등

여러가지가 있찌만 (HTML5에서 나온태그들입니다.) 각각의 태그들은 이름 그대로의 의미를 가지고

딲히 다른 태그들처럼 특별한 기능은 없이 HTML문서를 레이아웃으로 구역화시키고 나누고 레이아웃을 짜고 묶는데를 주력으로 만들었다고 생각합니다.

자그럼 이태그들을 어떨때 사용해야하는지를이제 알아보겠습니다. 간단하게!

arctile 은 내용이 각기 독립적이고, 홀로 설 수 있는 내용 (블로그 글 , 뉴스기사)

section 은 내용이 서로 관계있을 경우 (주로 문서를 다른주제로 구분 짓기)

div 는 오로지 내용을 묶는 역할.

여러개의 section을 article 로 묶을수 있고,

마찬가지로 여러개의 article 을 section 으로 묶을수 있습니다.

nav 는 메뉴바 등의 다른 링크들을 모으는 구역? 레이아웃을 설정할떄 젤 상위로 사용합니다.

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML 태그 (0)	2019.02.27

HTML 태그

2019. 2. 27. 09:57

HTML 은? Hyper Text Markup Language

크게 <head> 태그와 <body>의 태그로 나뉘어진다

<head> 태그의 내용들은 브라우저가 보기 위한 정보로 되어있어 일반사용자는 보질 못하고

<body> 태그의 내용들로 일반사용자가 자주 본다.

<head> 태그안에 태그 (브라우저를 위한 정보)

속성 : charset : Character encoding (UTF-8 , EUC-KR 같은 언어셋)

name : 페이지의 상세설명 및 내용을 간략히 적는것

이렇게 작성할경우 구글 서치시 저렇게 아래 표시될수 있다.

********메타태그 추가설명 링크********

<구글>

https://support.google.com/webmasters/answer/79812?hl=ko

<공식문사 MDN>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

<body> 태그안에 태그 (사용자를 위한 정보)

<Strong> 태그 : 문자열 진하게

<U> 태그 : 문자열 밑줄

<h1> ~<h6> : heading 제목 태그 글씨커짐 , 제목이라 줄바꿈도됨

<p> </p> 단락 ? 구문? 태그 (구문 넣은곳이 줄바꿈이됨)

<br> 줄바꿈 태그

<li> : list 의 준말 목차 태그 ul태그의 자식

<ul>: 들여쓰기 li태그의 부모

<ol>: 번호가 자동으로 할당됨 (li랑 같이씀 li에 번호가 할당됨)

<a>: 태그 link 걸기(anchor)

W3C 웹을 만드는 기관

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML5 태그 (2) - article,section,nav (0)	2019.02.28

PREV 1 2 NEXT

아빠개발자의 노트