section1/unit4/HTML 기초(8/24)

블로깅 주제

• HTML

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 오늘 아침은 눈이 금방 떠졌다. 생각보다 개운하게 일어났다. 요 몇일 같은 시간 대에 일어난게 습관이 됐나? 나름 뿌듯한(?) 기상이였다 ㅋㅋㅋ
• 벌써 목요일이다.. 그래도 정말 열심히 살았다는 뿌듯함이 있다. 물론 공부를 얻고 허리를 내어줬다^^ 내 허리야 좀만 더 버텨줘...스트레칭 열심히 할게...미안해...

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• HTML, 태그, 시멘틱요소, 와이어프레임, id/class

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- HTML & CSS & Javascript

• HTML : 구조  
• CSS :  스타일
• Javascript : 상호작용

- <img> 태그 : 이미지 삽입

• 닫는 태그 없음

<img src="링크">

- <a></a> 태그 : 링크 삽입

• target="_blank" 없으면 해당 페이지에서 링크로 바로 넘어감

<a href="링크" target="_blank">표시할 글자</a>

-<ul>,<ol>,<li> 태그:  리스트

• ul -> unordered list
• ol -> ordered list (번호 매겨짐)

-<input>태그

• type 속성을 text, radio, checkbox 등으로 설정해서 다양한 형태로 변형할 수 있다.

다양한 입력폼

<input type="text" placeholder="빈칸에 넣을 문장">
<input type="password"> -> 비밀번호

체크박스(그룹 설정 x)

<input type="checkbox" checked> checked -> 먼저 체크 되어 나옴
<input type="checkbox" > unchecked

라디오버튼(그룹 설정)

• name="choice" 로 그룹 설정(하나로 묶어줌)
• name이 같아야지만 하나의 묶음으로 인식(다중선택 x)

<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b

그 밖에도 date, time, color, file, number 등이 있음

-textarea

• 줄바꿈 가능, 닫는 태그 꼭 넣어줘야함

<textarea></textarea>

-버튼

button, submit, reset등이 있음

<button>버튼안에 들어갈 문자</button>

- <label>

• label은 폼의 양식에 이름 붙이는 태그이다.
• label의 for의 값과 양식의 id의 값이 같으면 연결된다.
• label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제한다.

<label> <input type="checkbox">Keep Login </label> // ->keep login 글자 눌러도 체크됨
<input type="checkbox">Keep Login // ->keep login 글자 눌러도 체크안됨, 체크박스 눌러야함

- 시멘틱 요소

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명 (사이드바, 광고창 등)
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며 (사이트의 라이선스, 주소, 연락처 등)
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치(제목, 상단바, 검색창 등)
• <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용 (보통은 안에 <ul>을 넣어 목록 형태로 사용)
• <main> : 문서의 주된 콘텐츠를 표시

- <form> 

• 사용자가 입력한 값을 다른 페이지로 전송하는 역할
• <div> 요소보다는 더 sementic함(목적이 있기 때문)
• 페이지 전환이 되는 액션이 발생할 수 있으므로, 주의가 필요

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

- id(#), class(.)

• id는 고유한 element에만 지정. 단 한번만 사용되는 곳에 !
• class는 반복되는 항목에 지정. 같은 class 값을 지정해줌으로써 동일한 유형임을 알 수 있음 !

<input id="id-input" class="input focus" type="text" placeholder="ID">
<input id="password-input" class="input focus" type="password" placeholder="password">
<button id="login-button">Login</button>
<label> <input id="keep-checkbox" type="checkbox">Keep Login </label>
<link rel="stylesheet" href="style.css">

//css

.input {
    display: block;
    width: 200px;
    height: 30px;
    text-indent: 10px;
    border: 2px solid lightgray;
  }
  #id-input {
    border-radius: 10px 10px 0 0;
  }
  #password-input {
    border-radius: 0 0 10px 10px;
    border-top: 0;
    margin-bottom: 5px;
  }
  .focus:focus {
    background-color: rgb(227, 237, 255);
  }
  
  #login-button {
    display: block;
    height: 35px;
    width: 200px;
    border-radius: 10px;
    border: 2px solid rgb(132, 175, 255);
    background-color: rgb(58, 133, 255);
    transition: 0.1s;
    color: white;
    font-weight: 900;
  }
  #login-button:hover {
    background-color: rgb(136, 179, 255);
  }
  #login-button:active {
    transform: translateY(1px);
    background-color: rgb(188, 213, 255);
    border: 2px solid rgb(167, 197, 255);
  }
  
  #keep-checkbox {
    margin-top: 10px;
    margin-left: 50px;
  }
  
  body {
    margin: 30px;
  }

- html attribute

• html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소
• <div class= ‘input’></div>
• ‘input’라는 클래스 속성을 가진 div 요소-> div 는 element(요소) , class 는 attribute(속성) , ‘input’ 은 class attribute의 value(값)이 됨

- <script></script> 태그

• <script></script> 사이에 자바스크립트 코드를 삽입하는 방식
• html 태그와 js 코드를 분리

- <p>

•  paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용

- <section>

• 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용

- <head> vs <header> vs <heading>

1. head : 페이지를 열 때 브라우저에 나타나지 않음. title,css,메타데이터 등 포함
2. header: body 속에 위치. 주로 머리말, 제목을 표현.
3. heading: body,header 속에 위치. h1~h6까지 6단계로 제목 표시.

- heading vs <div>

• heading : margin 설정됨
• div : margin 설정되지 않음

- <div> vs <span>

• span : 콘텐츠 양만큼 차지(inline 요소)
• div : 한 줄 차지

- <select>

• 안에 <option> 넣어서 선택지 만들기

- <p> vs <div>

• p : 단락 나누어짐(margin 설정)
• div : 단순 영역 구분