Musthave HTML&CSS Day1-2

yoonjin·2022년 12월 7일

CSS MustHave html

MustHave_HTML&CSS

목록 보기

1/4

HTML

: 프로그래밍 언어가 아닌 마크업 언어

하이퍼텍스트 : 순서 없이 참조를 통해 다른 문서에 접근할 수 있는 텍스트
브라우저 : 하이퍼텍스트를 해석해 보여주는 클라이언트

기본 구조

<!DOCTYPE html> <!-- 문서 유형에 대한 브라우저의 정보-->
<html>
  <head> <!-- 페이지에 표시 되지 않고 메타 데이터 제공-->
    <meta charset="utf-8"> <!-- 데이터를 설명하는 데이터 -->
    <title></title> <!-- HTML 문서 제목 -->
  </head>
  <body>
  </body>
</html>

img 태그

<img src="경로" alt="설명" width="폭" height="높이">

alt 는 스크린리더를 지원하므로 alt 속성이 있는 태그는 써주는 것이 좋음

form 태그

- 사용자 입력 양식을 만들 때 사용

<form>form 요소 태그</form>

input 태그
: 사용자가 데이터를 입력하는 영역을 결정
type - 속성, text(기본값)/checkox/password/date 등
id - 이름
label 태그
for : 해당 input의 id 지정

<label for="name">Name:</label>
<input type="text" id="name">

Name:

<input type="checkbox" id="monday">
<label for="monday">Monday:</label>
<input type="checkbox" id="tuesday" checked>
<label for="tuesday">Tuesday:</label>

Monday Tuesday

<label for="photo">Choose a picture</label>
<input type="file" id="photo" name="photo" accept=".jpg, .jpeg, .png">

Choose a picture

Button 태그

<button type="속성값">설명</button>

type : 버튼 종류 지정, button/submit/reset

<button type="submit">제출</button>

제출

<form action="address.html">
        <label for="province">Province:</label>
        <input type="text" id="province">
        <label for="city">City:</label>
        <input type="text" id="city">
        <input type="submit">
</form>

Province: City:

제출한 값은 action 에서 지정한 경로로 넘어감

시맨틱 태그

- 요소 의미를 명확히 설명

cf) 비시맨틱 태그 : 요소에 대하여 어떤 설명도 하지 않는 태그
ex. div, span

레이아웃용 시맨틱 태그들

태그	설명
header	소개 요소 또는 탐색 링크
nav	탐색 링크 정의, 주로 메뉴 구현
section	본문 내용
article	독립적 요소
aside	좌우에 위치
footer	문서의 하단, 카테고리 요약 및 저작권 명시

Exercises

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise2</title>
</head>
<body>
    <h2>My Form</h2>  
    <img src="https://cdn.pixabay.com/photo/2016/12/05/11/39/fox-1883658__480.jpg" alt="a picture of fox" width="150px" height="100px">
    <form action="name.html">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" placeholder="English only">
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="text" id="password" name="password">
        </div>
        <div>
            <input type="checkbox" id="agreement" name="agreement">
            <label for="agreement">I'm not a robot.</label>
        </div>
        <div>
            <button type="submit">Sign in</button> 
        </div>
    </form>
</body>
</html>

실행)

Exercise2

My Form

Username:

Password:

I'm not a robot.

기본 예제에서 input 태그에 placeholder 속성을 추가함.
주의 : input 태그 속성에서 name 은 중복 가능하나 id 는 중복 불가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise3</title>
    <style>
        body{
            background-image: url("https://cdn.pixabay.com/photo/2020/04/13/10/48/coffee-5037804__480.jpg")
        }
    </style>
</head>
<body>
<h1>코린이 카페</h1>
<ul>
    <li>아이스 아메리카노</li>
    <li>카페라떼</li>
    <li>디저트</li>
    <ul>
        <li>치즈케이크</li>
        <li>와플</li>
    </ul>
</ul>
</body>
</html>

실행)

Exercise3

코린이 카페

아이스 아메리카노
카페라떼
디저트

치즈케이크
와플

*Must Have 비전공자를 위한 첫 코딩 챌린지 with HTML&CSS 책을 기본서로 참고, 생활코딩강의에서 배운 내용 및 이미 알고 있는 내용은 제외

yoonjin

다음 포스트