KDT 코딩온 개발 14기 수강일기

KDT 포스코X코딩온 웹 과정 14기 2일차 - 이미지, 하이퍼링크, 테이블

worldstroy 2024. 9. 7. 21:37

목차

목차

    <img>

    - html에서 이미지를 넣어줄 때 사용하는 태그

    - 속성값 중 하나인 src = "이미지의 위치"를 사용함.

    - 이미지가 로드되지 않을 경우, 사용자가 알 수 있도록 문구를 띄워주는 alt라는 속성값이 존재함.

    - alt = "이미지가 로드되지 않았습니다."

     

    <a>

    - Anchor의 약자로 하나 의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용함.

    - 적용한 속성에는 href와 target이 존재함

    <a href = "https://www.naver.com" target = "_self">

    - 여기서, target 속성에는 _self와 _blank가 존재한다.

    - _self 는  현재 창에 링크를 오픈한다는 의미이다.

    - _black는 새 창(또는 탭)에서 링크를 오픈한다.

     

    #. 절대 경로와 상대 경로

     

        <!-- 아래는 상대 경로로 작성되었습니다. : 현재 파일 기준-->
    <img src="./batting.jpeg" alt="베팅 사진이 로드되지 않았습니다." />
    <!-- src는 경로, alt는 이미지 로드 실패시 나타냄, -->
    <img
      src="C:\Users\%EC%B5%9C%EC%97%B0%EC%B2%A0\OneDrive\%EB%B0%94%ED%83%95%20%ED%99%94%EB%A9%B4\github\CodingOn\01_html\batting.jpeg"
      alt="dddd"/>
    <!-- 절대경로의 경우, live server일때에는 기준점이 서버가 되어 못찾음 . 작업 환경이 기준-->
    <!-- 라이브 서버 상의 절대 경로는 다르게 쳐야함 -->
    <img src="\01_html\batting.jpeg" alt="라이브서버 상에서 송출되어짐" />

     

    상대 주소는 html 파일을 기준으로 어디에 있는지를 나타내고, 절대 주소는 html이 존재하는 공간 내에서 어디에 위치하는지를 나타내준다.

     

    input태그

     

    - input 태그의 종류에는 button, text, password, checkbox, radio, date, color, range, file 등이 있다.

    <input type = "buttion" value = "버튼 />

     

    먼저, type button은 버튼을 생성하고 특정 기능을 수행시킬 때 사용한다. 여기서 value 값은 버튼에 들어가는 내용이다.

    <input type = "text" placeholder = "text" />
<input type = "password" placeholder = "password" />
<input type = "email" placeholder = "email" />

     

    다음으로 text는 평범한 입력상자, password는 암호처리가 되어 있는 입력상자, email은 이메일 형식에 맞춰서 입력을 해주는 상자라고 보면된다.

    그리고 속성값 placeholder는 사용자가 아무것도 입력해주지 않았을떄, 띄워놓는 메시지다.

    <input type="checkbox" name="fruits" value="apple" checked />사과
<input type="checkbox" name="fruits" value="banana" />바나나
<input type="radio" name="gender" id="" value="men" checked /> 남자
<input type="radio" name="gender" id="" value="woman" /> 여자

     

    1. 다음으로 checkbox는 다양한 정보 중에서 다수의 답을 요구할때 사용하고, radio는 여러개의 선택지 중에서 하나만 고르게 하고 싶을때 사용한다.

    2. value 옵션은 사용자가 checkbox나 radio를 체크한 상태로 전송하여 성공했을 때 보내지는 데이터다.

    3. checked 속성은 처음 화면에 진입했을때 체크된 상태로 띄우고 싶을떄 사용하는 명령어다.

    4. checkbox와 radiosms name 값이 같아야지만 하나의 정보에 대한 처리를 담는다. 

     

    <input type="date" name="" id="" />
<input type="datetime-local" name="" id="" />

     

    둘다 날짜를 나타내지만, date는 년월일까지, datetime-local은 년월일시분초까지 모두 입력받고 싶을때 사용한다.

    기존에는 datetime도 사용하였으나, 시간은 시간대의 영향을 받기에 정확한 데이터 값을 전달하지 못하는 문제가 이싿.

    <select>
<optgroup label="커피">
	<option value="americano">아메리카노</option>
	<option value="cafeLatte" selected>카페라떼</option>
    <option value="espresso">에스프레소</option>
</optgroup>
<optgroup label="티">
    <option value="earlgrey">얼그레이티</option>
    <option value="jasmin">자스민티</option>
</optgroup>

     

    여러개의 선택지 중에서 하나를 선택하고 싶을떄, 사용하는 입력장치 중 하나다.

    select는 선택 메뉴를 생성하는 테그다.

    option는 선택 가능한 조건 그 자체다.

    optiongroup은 각각의 조건들이 동일한 정보를 담을때 사용하는 조건이다.

    그리고 속성 label은 optiongroup에 이름을 띄워주고 싶을 떄 사용한다. 

    disabled는 선택하지 못하도록 막고 싶을 때 사용하고, value는 실제 전달되는 값, Select는 초기 선택값을 나타낸다.

     

    <Table> 테그

    - 주로 표를 만들때 사용하는 테그로, 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 형태이다.

    - 여기서 table은 표를 정의하는 태그, tr은 표의 행, th는 표에서 굵게 표시되는 속성값, td는 자료값이라고 생각하면된다.

    - 먼저 Table의 속성에는 다음과 같은 것들이 존재한다.

    border : 테두리 두께
    cellspacing : 테두리 간격 사이의 너비
    cellpadding : 셀 내부의 간격
    align : 테이블 정렬 속성
    width 와 height : 테이블의 너비와 높이
    bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

     

    <td>와 <th>의 속성

    colspan : 해당 칸이 점유하는 열의 수 지정
    rowspan:  해당 칸이 점유하는 행의 수 지정

     

     

    실습문제 란

    ###### 실습시간에 풀었던 문제 ######

     

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>설문조사</title>
  </head>
  <body>
    <h2>설문조사</h2>
    <form action="">
      <var>이름</var>
      <input type="text" name="이름" />
      <var>이메일</var>
      <input
        type="email
      "
        name="이메일"
        placeholder="love@eaxmple.com"
      />
      <br />
      <b>나이</b>
      <br />
      <input type="radio" name="age" id="" value="10" /> 10대
      <input type="radio" name="age" id="" value="20" /> 20대
      <input type="radio" name="age" id="" value="30" /> 30대
      <input type="radio" name="age" id="" value="40" /> 40대
      <input type="radio" name="age" id="" value="50" /> 50대 이상
      <br />
      <strong>원하는 강의(복수수강가능합니다</strong>
      <br />
      <input type="checkbox" name="lecture" id="" value="html" /> html
      <input type="checkbox" name="lecture" id="" value="javascript" />
      javascript <input type="checkbox" name="lecture" id="" value="css" /> css
      <br />
      <textarea
        name=""
        rows="10"
        cols="45"
        placeholder="하고 싶은 말을 써주세요"
        style="resize: none"
      >
      </textarea>
      <input type="submit" value="제출" />
      <button type="button">제출</button>
      <!-- button 테그는 default가 input type submit과 동일한 것, 새로고침이 발생함. -->
    </form>
  </body>
</html>

     

    느낀점

    아무래도 거의 2년만에 코딩을 다시한 관계로 굳이 사용할 필요 없는 테그를 넣었던 부분이 있다. 분명한 목적을 가지고 사용해야 하는데, 의미 없이 br을 난발한다든가. CSS를 다시 배우기 전이라 어쩔 수 없던 측면이 있긴 했지만 말이다.

     

     

    ### 수업시간에 배운 실습 2 #####

     

    느낀점 : 지금은 아주 조그마한 테이블을 만드는 문제에 불과하나, 프로젝트나 회사에 들어가면 더 작은 단위로 쪼개야 하는 상황이 있을 꺼다. 그렇기에 최소 단위로 쪼갠 다음, 합칠 부분을 합치는 형태로 짜야할까? 문제에 돌입했을 때, 첫번째 행, 두번째 행, 세번째 행 순으로 맞춰나가야할까? 복잡한 문제다.

     

    ### 강의시간에 배운 실습 3 #####

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table
      border="1"
      cellspacing="0"
      cellpadding="1"
      width="500"
      height="500"
      align="center"
    >
      <!-- tr>td*4 -->
      <tr>
        <th>구분</th>
        <th>음료</th>
        <th>가격</th>
        <th>이미지</th>
      </tr>
      <tr>
        <!-- alt + w를 누르면 드래그한 부문을 P테그로 감싸줌, 수정도 가능함. -->
        <td rowspan="2">커피류</td>
        <td>아메리카노</td>
        <td>4200원</td>
        <td>
          <a
            href="https://www.paris.co.kr/product/big-ice-americano/"
            target="_blank"
          >
            <img src="/01_html/Americano.jpeg" width="200" height="200"
          /></a>
        </td>
      </tr>
      <tr>
        <td>돌체라떼</td>
        <td>4000원</td>
        <td>
          <a href="https://img.hankyung.com/photo/201711/01.15316923.1.jpg">
            <img src="/01_html/dom.jpeg" alt="" width="200" height="200"
          /></a>
        </td>
      </tr>
      <tr>
        <td rowspan="2">주스류</td>
        <td>자바칩 프라푸치노</td>
        <td rowspan="2">4200원</td>
        <td>
          <a href="https://www.cashfeed.co.kr/posts/1486451">
            <img src="/01_html/java.jpeg" alt="" width="200" height="200" />
          </a>
        </td>
      </tr>
      <tr>
        <td>녹차 프라푸치노</td>

        <td>
          <a href="https://2bob.co.kr/recipe.php?id=view&eTheme=22&idx=594">
            <img src="./green.jpeg" alt="" width="200" height="200" />
          </a>
        </td>
      </tr>
    </table>
  </body>
</html>