본문 바로가기
Example

[E-HTML&CSS] 연습문제 + div, span, 시멘틱태그 예시, css 기본선택자

by 송기동 2023. 8. 3.
728x90

연습문제 7

문제

Document
이름
비밀번호
이메일 @

문제와 동일할 수 있게 코드 짜보기

<!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">
      <thead>
        <!-- 1행 -->
        <tr>
          <!-- 1열 -->
          <th>이름</th>
          <!-- 2열 -->
          <td><input type="text" /></td>
        </tr>
      </thead>
      <!-- 제목끝 -->
      <!-- 본문 시작 -->
      <!-- 2행 -->
      <tr>
        <!-- 1행 -->
        <th>비밀번호</th>
        <!-- 2행 -->
        <td>
          <input type="password" />
        </td>
      </tr>
      <tr>
        <!-- 1행 -->
        <th>이메일</th>
        <!-- 2행 -->
        <td>
          <input type="email" />@<select>
            <option value="a">선택하세요</option>
            <option value="b">naver.com</option>
            <option value="c">hanmail.net</option>
            <option value="d">직접 입력하세요</option>
          </select>
        </td>
      </tr>
    </table>
  </body>
</html>

연습문제 8

문제

Document
글쓰기 게시판
제목
내용
파일첨부
5M 이하의 파일만 첨부 가능합니다.

문제와 동일할 수 있게 코드 짜보기

<!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>
    <!-- 열병합 -->
    <!-- 사용법 <td clospan="열병합 할 개수">내용</td> -->
    <table border="1">
      <thead>
        <!-- 1행 -->
        <tr>
          <!-- 열병합 -->
          <td colspan="2">글쓰기 게시판</td>
        </tr>
      </thead>
      <!-- 제목끝 -->
      <!-- 본문 시작 -->
      <!-- 2행 -->
      <tr>
        <!-- 1행 -->
        <th>제목</th>
        <!-- 2행 -->
        <td>
          <input type="text" />
        </td>
      </tr>
      <!-- 3행 -->
      <tr>
        <!-- 1행 -->
        <th>내용</th>
        <!-- 2행 -->
        <td>
          <textarea cols="30" rows="15"></textarea>
        </td>
      </tr>
      <!-- 4행 -->
      <tr>
        <!-- 1행 -->
        <th>파일첨부</th>
        <!-- 2행 -->
        <td>
          <input type="file" name="file" value="file" />
        </td>
      </tr>
      <!-- 5행 -->
      <tr>
        <!-- 1행 -->
        <th></th>
        <!-- 2행 -->
        <td>5M 이하의 파일만 첨부 가능합니다.</td>
      </tr>
      <!-- 6행 -->
      <tr>
        <!-- 열병합 -->
        <td colspan="2"><input type="button" value="확인" /></td>
      </tr>
    </table>
  </body>
</html>

연습문제 9

문제

Document

개인 신상 정보 입력

- 이름 :

- 비밀번호 :

- 성별 : 남성 여성

- 취미 : 영화감상 게임 음악듣기

- 파일 첨부 :

- 이메일 : @

- 자기소개 :

문제와 동일할 수 있게 코드 짜보기

<!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>
    <h3>개인 신상 정보 입력</h3>
    <form>
      - 이름 : <input type="text" /><br /><br />
      - 비밀번호 : <input type="password" /><br /><br />
      - 성별 : <input type="radio" name="people" value="radio" />남성
      <input type="radio" name="people" value="radio" />여성<br /><br />
      - 취미 :
      <input type="checkbox" />영화감상 
      <input type="checkbox" />게임
      <input type="checkbox" />음악듣기<br /><br />
      - 파일 첨부 : <input type="file" /><br /><br />
      - 이메일 : <input type="email" /> @<select>
        <option>----선택----</option>
        <option>naver.com</option>
        <option>hanmail.net</option>
        <option>직접 입력</option></select
      ><br /><br />
      - 자기소개 : <textarea cols="30" rows="5"></textarea><br /><br />
      <input type="button" value="확인" />
    </form>
  </body>
</html>

연습문제 10

문제

문제와 동일할 수 있게 코드짜보기

<!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>
    <!-- 행병합 -->
    <!-- <td rowspan="행병합 수"></td> -->
    <table border ="1">
      <tr>
        <th colspan="2">날짜</th>
        <th>날씨</th>
        <th>풍향</th>
        <th>풍속(m/s)</th>
      </tr>
      <tr>
        <td>24일(월)</td>
        <td>오후</td>
        <td><img src="/01_HTML/03_chapter_html/image/rain.png" alt="비" /></td>
        <td>남~남서</td>
        <td>3~7</td>
      </tr>
      <tr>
        <td rowspan="2">25일(화)</td>
        <td>오전</td>
        <td><img src="/01_HTML/03_chapter_html/image/rain.png" alt="비" /></td>
        <td>서~북서</td>
        <td>3~6</td>
      </tr>
      <tr>
        <td>오후</td>
        <td><img src="/01_HTML/03_chapter_html/image/sun.png" alt="맑음" /></td>
        <td>북서~서</td>
        <td>3~6</td>
      </tr>
    </table>
  </body>
</html>

공간태그 (div, span)

<!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>
    <!-- 공간 태그 : div, span -->
    <!-- div 특징 : 자동줄바꿈, block 속성 -->
    <!-- 자동 줄바꿈이 일어나는 태그들(block 속성) : h1, p 등 -->
    <div>안녕하세요</div>
    <div>안녕하세요2</div>
    <!-- span 특징 : 줄바꿈 없음 -->
    <!-- 줄바꿈이 일어나지 않는 태그들(inline 속성) : input, i, b 등 -->
    <span>안녕하세요</span>
    <span>안녕하세요2</span>
  </body>
</html>
Document
안녕하세요
안녕하세요2
안녕하세요 안녕하세요2

시멘틱 태그

<!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>
    <!-- 실무 용어 : 과거시스템(레가시 시스템(legacy system)) -->
    <!-- 과거 방식 : HTML4 이전 -->
    <!-- <div>머리말</div> -->
    <!-- <div>본문</div> -->
    <!-- <div>꼬리말</div> -->

    <!-- 현대 방식 -->
    <!-- 시멘틱 태그 : header(머리말), nav(메뉴), section(본문), footer(꼬리말) -->
    <!-- 장점 : 검색엔진에 노출 잘 됨 -->

    <!-- 머리말 시작 -->
    <header>
      <h1>HTML5 기본</h1>
    </header>
    <!-- 머리말 끝 -->

    <!-- 메뉴 시작 -->
    <nav>
      <ul>
        <li><a href="#">메뉴 -1</a></li>
        <li><a href="#">메뉴 -2</a></li>
        <li><a href="#">메뉴 -3</a></li>
      </ul>
    </nav>
    <!-- 메뉴 끝 -->

    <!-- 본문시작 -->
    <!-- section(대본문), article(소본문) -->
    <section>
      <!-- 소본문 시작 #1-->
      <article>
        <h1>안녕하세요</h1>
        <p>송기동입니다.</p>
      </article>
      <!-- 소본문 끝 -->
      <!-- 소본문 시작 #2-->
      <article>
        <h1>안녕하세요2</h1>
        <p>송기동입니다.</p>
      </article>
      <!-- 소본문 끝 -->
    </section>
    <!-- 본문 끝 -->

    <!-- 꼬리말 시작 -->
    <footer>
        <address>부산광역시 연제구</address>
    </footer>
    <!-- 꼬리말 끝 -->
  </body>
</html>
Document

HTML5 기본

안녕하세요

송기동입니다.

안녕하세요2

송기동입니다.

부산광역시 연제구

기본선택자 : html 태그 선택자

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./01_selector_basic.css">
</head>
<body>
    <h1>CSS3 선택자 기본</h1>
    <h2>CSS3 선택자 기본</h2>
</body>
</html>

css 코드

/* 기본선택자 : html 태그선택자 */

/* 사용법 : 
    태그선택자 {
    속성 : 값;
} */

h1 {
  /* 글자색 */
  color: burlywood;
  /* 바탕색 */
  background-color: blue;
}
h2 {
  color: blueviolet;
  background-color: greenyellow;
}

결과

*(wildcard) : 전체 선택자

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_default_wildcard.css">
</head>
<body>
    <h1>제목 글자 태그</h1>
    <p>안녕하세요 송기동입니다.</p>
</body>
</html>

css 코드

/* *(wildcard) : 전체 선택자 */
/* 사용법 :
*{
 속성 : 값;
}
*/
* {
  color: red;
}

h1 {
  color: aqua;
  background-color: blue;
}

결과

id 선택자 : 기본 선택자

html 코드 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/03_default_id.css" />
  </head>
  <body>
    <!-- 머리말 -->
    <div id="header">
      <h1>머리말 태그</h1>
    </div>
    <!-- 본문 -->
    <div id="wrap">
      <div id="content">
        <h1>본문 태그</h1>
      </div>
    </div>
  </body>
</html>


css 코드 

/* id 선택자 : 기본 선택자 */
/* id 속성(공통) : 태그에 이름을 부여하는 속성(변수명), 유일(관례) */
/* name 속성(공통) : 태그에 이름을 부여하는 속성(변수명), jsp, react(서버쪽 통신)에서 사용 */
/* 코딩용어 : #(샵) */
/* 사용법)
#id 선택자{
    속성 : 값;
*/
/* px(픽셀) : 화면 화소(단위), 고정크기 */
#header{
    width : 500px;
    background: red;
}
#wrap{
    width : 300px;
}
#content{
    width : 300px;
    background: green;
}


결과

728x90

'Example' 카테고리의 다른 글

[E-HTML&CSS] 선택자 예시, 연습문제  (17) 2023.08.07
[E-HTML&CSS] 선택자 예시  (15) 2023.08.04
[E-HTML] input, select, textarea, lable 예시 + 연습문제  (14) 2023.08.02
[E-HTML] text, list, table, audio, video, image 예시  (15) 2023.08.01
[E-Java] 접근 제어자 예시  (20) 2023.08.01

관련글

티스토리툴바