Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

HTML 기초 03 본문

📚강의록📚/유노코딩)HTML

HTML 기초 03

과부하가즈아 2023. 4. 13. 17:58

링크(anchor)

링크란, 현재의 문서에서 다른 문서로 이동할 수 있는 수단이다.

 

  • 기본구조
<a href="이동하고 싶은 url"> </a>

a태그 요소는 href속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)을 만든다. 인라인 요소이며, 콘텐츠(내용)은 주로 링크의 목적지를 나타낸다.

 

  • target 속성 추가
<a href=”이동하고 싶은 url” target=”_self”> </a>
---> 현재 탭에서 열기

<a href=”이동하고 싶은 url” target=”_blank”> </a>
---> 새로운 탭에서 열기

a태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있다. (따로 지정을 안하면 기존의 창에서 열림)

 

▶내용실습◀

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>링크 만들기</title>
</head>
<body>
  <a href="http://www.naver.com/">                   ---> 네이버로 이동(기존의 창에서)
    네이버로 갑시다!
  </a>  
  <br>
  <a href="http://www.google.com/">
    <img src="images/테스트용.jpg" width="300">       ---> 이미지 클릭시 구글로 이동
  </a>
  <br>
  <a href="http://www.daum.net/" target="_self">     ---> 기존의 창에서 다음으로 이동
    다음으로 갑시다
  </a>
  <br>
  <a href="http://www.youtube.com/" target="_blank">  ---> 새로운 창으로 유투브이동
    유투브로 갑시다
  </a>
</body>

</html>

 

<a href=”tel:010-123-4567” target=”_self”></a> 전화걸기
---> 전화걸기

<a href=”mailto:메일주소기입” target=”_blank”></a> 메일쓰기
---> 메일쓰기

a태그의 href속성에는 웹문서의 주소 뿐 아니라 전화번호나 메일 주소 등을 지정할 수도 있으며, 이때 각 유형별로 추가되는 텍스트가 있다.(target속성)

 

▶내용실습◀

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>링크 만들기</title>
</head>
<body>
  <a href="tel:010-1234-5678">
    010-1234-5678
  </a>  
  <br>
  <a href="mailto:beansdrawer@naver.com">
    beansdrawer@naver.com
  </a>
  </body>

</html>

목록

연관 있는 항목(item)들을 나열한 것을 의미한다. HTML 목록은 ‘순서 없는 목록(Unordered List)’과 ‘순서 있는 목록(Ordered List)’으로 구분된다. (항목에 사용된 기호에 따라 달라진다. ex. 일반적인 '-'등으로 구분하는 경우가 순서가 없는 경우, '1,2,3'등과 같이 순서를 메기는 것으로 구분하는 경우가 순서가 있는 목록이라 할 수 있다.)

 

  • 순서 없는 목록(Unordered List)
<ul> </ul>

 

  • 순서 있는 목록(Ordered List)
<ol> </ol>

 

  • 항목 태그(는 같은 것을 사용한다.)
<li> 항목 내용 </li>

li태그는 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그이다. 항목들을 감싸는 태그(ul인지 ol인지)가 무엇이냐에 따라 기호가 달라진다.

 

ul, ol, li 는 모두 블록 레벨 요소를 만드는 태그이다.

 

▶내용실습◀

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>목록 만들기</title>
</head>
<body>

  <h1>귀여운 동물 목록</h1>
  <ul>
    <li>강아지</li>
    <li><strong>고양이</strong></li>
    <li>두더쥐</li>
    <li>햄스터</li>
  </ul>
  
  <hr>
  
  <h1>프로그래밍 공부 순서</h1>
  <ol>
    <li><mark>HTML</mark></li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>NODEJS</li>
  </ol>
  
  </body>
</html>

입력(input)

사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 ‘필드, 입력창’)을 나타낸다. 기본적으로 인라인 요소이며, 단일태그이다.

 

  • 기본구조
<input>
또는
<input/>
  • (input의 핵심) type속성

 type속성 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다. 사용가능한 type은 20여 가지이며, 기본값은 text이다. 종류가 다양, type속성 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보인다.


※종류참고 @https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input)

  • name 식별자 추가
<input type=”text” name=”nickname”>
<input type=”text” name=”job”/>

input태그에는 name 식별자를 추가할 수 있다. 이는 각각의 입력 항목에 대한 이름이다.

type속성 값이 각각 text로 같지만, name의 지정 값을 각각 nickname와 job로 값을 다르게 함으로써 구분지을 수 있다는 의미(원활하게 진행하려면 구분이 필요)

 

▶내용실습◀

  • 기본_input태그는 type속성을 통해 형태와 입력 값 유형을 결정한다.
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>다양한 입력 요소 만들기</title>
</head>
<body>
  <input type="text"/> <br> <br>        ---> 텍스트 입력
  <input type="button"/> <br> <br>      ---> 버튼 입력
  <input type="color"/> <br> <br>       ---> 컬러 선택/입력
  <input type="range"> <br> <br>        ---> 범위 설정/입력
  <input type="date"> <br> <br>         ---> 날짜 선택/입력
</body>

</html>

  • 속성값 추가_type속성 값에 따른 사용 방법이 다양하다(웹페이지 내에서의 역할, 추가 속성 등)
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>다양한 입력 요소 만들기</title>
</head>
<body>
  <input type="text" 
    maxlength="5"
    placeholder="메시지 입력...!"/> <br> <br>

  <input type="button"
    value="push"/> <br> <br>

  <input type="color"/> 색을 골라보세요! <br> <br>

  <input type="range"
   max="100" min="0"
   step="10" > <br> <br>

  <input type="date"> <br> <br>

</body>

</html>

  • name속성 값 추가 예시_name속성으로 input요소를 구별할 수 있다.
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>다양한 입력 요소 만들기</title>
</head>
<body>
  <input name="text" 
   type="text" 
   maxlength="5"
   placeholder="메시지 입력...!"/> <br> <br>

  <input name="push" 
   type="button"
   value="push"/> <br> <br>

  <input name="color" 
   type="color"/> 색을 골라보세요! <br> <br>

  <input name="score" 
   type="range"
   max="100" min="0"
   step="10" > <br> <br>

  <input name="birthday" 
  type="date"> <br> <br>

</body>

</html>

입력 요소(Select)

 

  • 기본구조
<select>
 <option> 옵션1 </option>
 <option> 옵션2 </option>
 <option> 옵션3 </option>
 <option> 옵션4 </option>
</select>

다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴이다. 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시하며, 인라인 요소이다.

 

  • 이름과 값
<select name="cafe">
 <option value="starbucks"> 옵션1 </option>
 <option value="coffeebean"> 옵션2 </option>
 <option value="ediya"> 옵션3 </option>
 <option value="pascucci"> 옵션4 </option>
</select>

select에는 input와 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value속성을 지정할 수 있다. value는 실제로 처리될 값을 나타낸다.

---> If. 옵션2를 선택한 경우 cafe의 입력 값(select를 통해서 선택된 값을 바탕으로 실제로 서버 프로그램 등이 값을 처리할 때 사용되는 값)은 coffeebean이다 라는 결론!
---> 자바스크립트를 통한 입력 값 처리에 value가 사용될 수 있음을 의미

 

▶내용실습◀

  • 기본구조
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>다양한 입력 요소 만들기</title>
</head>
<body>
  <h1>키우고 싶은 동물 고르기</h1>
  <select>
    <option>강아지</option>
    <option>고양이</option>
    <option>햄스터</option>
    <option>앵무새</option>
  </select>

</body>

</html>

  • 이름과 값
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>다양한 입력 요소 만들기</title>
</head>
<body>
  <h1>키우고 싶은 동물 고르기</h1>
  <select name="pet">                      -----> name지정
    <option value="dog">강아지</option>     -----> value지정 
    <option value="cat">고양이</option>
    <option value="hamster">햄스터</option>
    <option value="parrot">앵무새</option>
  </select>

</body>

</html>

입력 요소(Textarea)

  • 기본구조
<textarea name="letter"> </textarea>

textarea는 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소로, textarea 역시 name를 추가하여 구별해줄 수 있는 입력 요소이다. textarea 역시 인라인 요소이다.

 

▶내용실습◀

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>다양한 입력 요소 만들기</title>
</head>
<body>

  <textarea name="content"            ---> name 지정         
  rows="10"                           ---> 행의 수(세로)       
  cols="10">기본적으로 쓰여 있는 텍스트   ---> 열의 수(가로)     
  </textarea>

</body>

</html>

 


--->빗금으로는 textarea크기 조절이 가능

 

 

 

출처 : @https://www.youtube.com/@uknowcoding

'📚강의록📚 > 유노코딩)HTML' 카테고리의 다른 글

HTML 기초 04  (0) 2023.04.13
HTML 기초 02  (0) 2023.04.13
HTML 기초 01  (0) 2023.04.13
'📚강의록📚/유노코딩)HTML' Related Articles more
Comments