1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트5

HTML 핵심 요소 정리

<div>
  <h1>오늘의 날씨</h1>
  <p>중부 집중호우, 남부는 열대야</p>
  <img src="img/weather.jpg" alt="12호 태풍">
</div>

<div></div>: 블록(상자) 요소. 특별한 의미가 없는 구분을 위한 요소. 레이아웃을 작업할때 사용

<h1></h1>: 블록(상자) 요소. 제목을 의미하는 요소. h1 ~ h6까지 있음(숫자가 커질수록 글씨는 작아짐)

<p></p>: 블록(상자) 요소. 문장을 의미하는 요소. 문장 구분할때 사용

<img />: 인라인(글자) 요소. 이미지를 삽입하는 요소. src(경로)와 alt(이름) 속성이 필수 속성임.

 

<ul>
  <li>사과</li>
  <li>딸기</li>
  <li>복숭아</li>
</ul>

<ul></ul>: 블록(상자) 요소. 순서가 필요없는 목록의 집합을 의미

<li></li>: 블록(상자) 요소. 목록(list) 내 각 항목(item)

<ul>과 <li>는 하나의 세트로 생각해야함

 

<a href="https://www.naver.com">NABER</a>
<a href="https://www.google.com" target="_blank">Google</a>

<a />: 인라인(글자) 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. href는 링크 URl을 target은 링크 URL의 표시(브라우저 탭) 위치를 표시. target="_blank"는 새탭에서 페이지를 열겠다는 뜻

 

<span>동해물</span>

<span></span>: 인라인(글자) 요소. 특별한 의미가 없는 구분을 위한 요소

 

동해물과 백두산이 <br /> 마르고 닳도록

<br />: 인라인(글자) 요소. 줄바꿈 요소

 

<input type="text" />
<input type="text" value="010" />
<input type="text" placeholder="전화번호를 입력하세요" />
<input type="text" disabled />

<input type="radio" name="fruits" /> 키위
<input type="radio" name="fruits" />복숭아

<input />: 인라인(글자) 요소. 블록(상자) 요소로 인라인-블럭요소. 사용자가 데이터를 입력하는 요소

속성으로 type - 입력받을 데이터의 타입을 명시. value - 미리 입력된 값(데이터)를 명시. placholder -  사용자가 입력할 값(데이터)의 힌트를 명시. disabled - 입력 요소 비활성화

radio같은 경우 name을 이용하여 그룹을 명시하여 그룹중 1개만 선택될 수 있도록 할 수 있음

 

<label>
  <input type="checkbox"> 사과
</label>
<label>
  <input type="checkbox" checked> 바나나
</label>

<label></label>: 인라인(글자) 요소. 라벨 가능 요소의 제목. checked속성을 추가하면 체크박스 입력 요소가 체크된 채로 출력됨

위에 예시를 보면 사과를 눌러도 체크박스가 체크되는것을 확인할 수 있음

 

<table>
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
</table>

<table></table>: 테이블 요소. 표 요소. 행(Row, <tr>)과 열(Column, <td>)의 집합

---

주석

<!-- Comment --> HTML

/* Comment */ CSS

단축키: Ctrl + /

수정사항이나 설명 등을 작성(주석). 브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않음

---

전역속성

예시

 

<태그 title="설명"></태그>: 요소의 정보나 설명을 지정

 

 

<태그 style="스타일"></태그>: 요소에 적용할 스타일(CSS)을 지정

 

<태그 class="이름"></태그>: 요소를 지칭하는 중복 가능한 이름(CSS에서 '.'으로 표시. Ex .red { color: red; })

 

<태그 id="이름"></태그>: 요소를 지칭하는 고유한 이름(CSS에서 ('#'으로 표시 Ex. #abc { color: blue; })

 

<태그 data-이름="데이터"></태그>: 요소의 데이터를 지정

 

<script defer src="./main.js"></script>

- js에서 data-이름 속성을 사용할때 script는 head에서 있기에 속성이 읽히기전 js가 해석되 원하는 결과가 나오지 않을 수 있음. 그래서 하는것이 defer 속성. script 요소에 defer 속성은, HTML 구조가 준비된 후 (문서 분석 이후)에 JavaScript를 해석하겠다는 의미