SEB_7_HTML기초

HTML기초 태그를 배웠다

 

일단 유명한 기본 태그들

<div>  <!-- 한줄차지 --> 
<span>  <!-- 콘텐츠 영역만큼 차지 즉 줄변화 없이 사용할 수도 있다 -->
<ul>  <!-- <li>의 부모태그 unordered list -->
<ol>  <!-- <li>의 부모태그 ordered list 숫자로 표시된다 -->
<li>  <!-- <ul>,<ol>의 자식태그 list 작성 시 사용 -->
<button>  <!-- 버튼 생성 -->
<a>  <!-- 링크 연결 -->
<img/>  <!-- 이미지 보여주는 태그 닫는태그가 없다 -->
<input/>  <!-- 입력받는 태그 닫는태그가 없다 -->

<a>,<img> 속성

<a href = "주소" target = "_blank" 보여질 이름 ></a> 
<!-- 이렇게 사용하면 된다 target = "_blank"는 새탭에서 열리는 기능 선택사항 -->
<img src = "이미지 주소"> <!-- src 속성 "이미지 주소" 값을 넣으면 된다 -->

<input type = " " placeholder = " ">,<button>

<input type = "text" placeholder = "인풋박스안에 보여질 값"> 
<!-- 입력값으로 text를 받는 type 속성 placeholder사용하면 안에 보여질 내용을 쓸 수 있다 -->
type = "checkbox" <!-- 체크박스 -->
type = "password" <!-- 입력 시 보여지는 부분이 * 표시된다 -->
<input type = "radio" name = "choice" value = "1"> 1
<!-- radio 는 선택할 수 있게 하는데 저 name 부분의 속성으로 묶인 값들 중에서 선택이니까 골라야하는 값들은 다 같은 속성으로 묶어줘야한다 -->
<button>버튼안에 들어갈 내용</button> 
<!-- 버튼안에 들어갈 내용으로 표시된 버튼 생성 저 안에 <img>태그도 넣을 수 있다 -> <img>가 담긴 버튼 생성 -->

HTML 시맨틱 요소 즉 의미가 있는 요소 HTML5에서 시맨틱 웹이 중시되면서 새롭게 만들어짐

<article> <!-- 독립,자체포함 콘텐츠 -->
<aside> <!-- 광고등 메인 내용이 아닌부분 남은 부분 설명 -->
<header> <!-- 페이지, 섹션 가장 윗부분 사이트 제목, 상단바, 검색창등 -->
<nav> <!-- navigation의 약자 상단바 사이트 소개 보통 <ul> 넣어서 목록형태로 사용 -->
<main> <!-- 문서의 주된 콘텐츠 표시 -->
<footer> <!-- 페이지 해당 파트 가장 아랫부분 위치 사이트 라이선스, 주소 등등 -->

옛날에 코딩누나 스포티파이 웹페이지 HTML,CSS로 만들면서 정리 해둔건데 Semantic Tag 부분 그림으로 확인하면 더 이해가 잘 갈 것 같다

[id와 class]

id는 고유한 값에 이름을 붙일 때 사용하고

class는 반복되는 유형을 분류하기 위해 붙인 이름이다

id와 class의 차이는 고유한 영역이면 id 반복,중복되는 영역이면 class 사용한다 

나중에 css를 넣을때 특별한 요소가 있는 부분이라면 id로,

중복된 스타일 적용(주의할 점이 나중에 수정할때 묶여있기 때문에 같이 수정되니까 그 부분도 고려해서 )class로 지정해주면 된다

<div id = "들어갈 id" class = "c1 c2"></div>
<!-- class나 id 두 개 이상일 경우 ""안에 띄어쓰기로 구분해주면 된다 -->

[TIL]

HTML의 기본 태그와 시맨틱 태그에 대하여 공부하고, 로그인 페이지 실습을 해봤다. 

실제로는 웹/앱 만들기전 프로토타이핑과정을 거쳐야 한다는 사실을 알게 됐다.

[TIP]

웹사이트의 HTML 이나 CSS 등 확인하는 법 

크롬을 통해 접속한다면 마우스 오른쪽을 누르면 검사라는 부분이 뜨는데 누르면

Elements로 구성 요소를 볼 수 있고 노란 원으로 표시된 부분을 누르고 확인하고자하는 웹페이지의 부분을 누르면 그 부분에 대한 정보를 빠르게 확인할 수 있다.