2022-05-09
Button 만들기
하는 일에 따라 type 지정이 필요하다.
<input type="button | reset | submitt | image">
<button type="button | reset | submit"
전송 버튼은
<input type="submit" value="전송">
?! <input><button> 왜 둘 다 쓰나?
안에 태그를 집어넣을 수 있냐 없냐가 중요하다.
인풋태그가 먼저 등장해 예전부터 쓰였지만, 인풋태그로는 한계점이 많았다. 버튼 태그는 열고 닫는 태그이므로 태그 사이에 다양한 소재를 넣을 수 있다.
1) <button></button>은 자식태그를 가질 수 있다.
2) <button></button>은 CSS에서 가상선택자로 꾸며줄 수 있다.
즉 input의 한계를 넘어 다양한 표현이 가능하다.
button과 비슷하게 생겼지만 조금 용도가 다른 타입이 있다. 바로 submit인데... 버튼은 기입된 내용을 지우지 않고 그대로 보존가능하지만 submit은 날아가버리는 특징이 있다. submit은 데이터를 서버에 전송하는 버튼이다. 그냥은 안 되고, form 태그와 함께 쓰이며 해당하는 명령어가 필요하다. action="서버주소" 부분이 실질적인 기능을 가진다. method에는 post방식과 get방식이 있다.
get : 파라미터가 주소창에 나오는 방식. 주소를 복사하고 붙여넣을 수 있는 모든 페이지가 GET 방식으로 이루어진 페이지다. 글자수(용량)제한이 있다. url창에 모든 것이 드러나기 때문에 보안성이 없다.
post : 파라미터가 주소창이 아닌, HTTP의 프로토콜 body에서 넘어가는 방식. 우리가 눈으로 볼 수 없는 위치에서 넘어가므로 보안성이 높다. 보통 로그인, 회원가입, 파일 업로드, 글 작성 페이지 등에 사용된다.
<form name="input" method="post" action="서버주소">
<input type="text" name="test" maxlength="10">
<input type="submit" value="전송">
</form>이런식 느낌.
코드를 잘 보면, 버튼에 이미지도 들어갈 수 있다!
Semantic tag 시맨틱 태그
의미론적인 태그라는 뜻으로, 각 영역에 의미가 부여된 태그들이다. 사람+기계가 둘다 인지 가능한 태그로, 검색 용이성과 유지보수 용이성, 보조 기구(기계)를 이용하는 사람들에게 웹접근성을 높여 정보전달에 무리가 없게 해준다. 웹 개발자는 늘 모든 환경 조건 고려하여 100%에 가까운 정보 전달을 위해 신경써야한다.
header : 페이지나 섹션의 머리말을 표현 (제목, 간단한 소개 등 설명) <section>, <article> 안에서도 사용 가능. <head> 랑 다르다.
nav : 목차, 메뉴 등. 네비게이터 역할을 한다.
section : 챕터의 개념
aside : 독립적인 콘텐츠다.
footer : 저자, 저작권, 주소, 연락처 등이 온다
시맨틱 태그가 아닌 div(division maker)라는 태그가 있다. 아무 의미도 없는, 그냥 블록인 것인데. 비슷한 기능으로 span도 있으며 얘는 인라인 속성을 가진다. div로도 헤더를 만들 수 있고 섹션도 div로 만들 수 있지만, 요즘은 ai시대 아니던가. 보조 기구로 정보를 구하는 사람도 많고, 우리 조차 일을 처리할 때 개별적으로 영역을 구분해주는 것이 훨씬 수월하다. 기계가 제대로 기능하기 위해선 프론트엔트 개발자가 해당 영역에 맞게 코드를 작성해주어야한다.
구체적으로 이야기를 해보자. 방문한 웹페이지가 의미 없는 태그들로만 구성되어있다고 가정해보자. 텍스트 리더기가 웹페이지를 읽을 때 화면에 읽히는 것들이 필요한 정보인지 아닌지 기계는 구분 하지 못한다. 그 결과 리더기는 웹페이지의 제목부터 시작해서 메뉴, 목차, 필요 없는 광고판, 하단의 저작권 내용과 주소, 연락처까지... 화면에 있는 전체 영역을 읽어버릴 것이다. body만 읽는다고 가정해도 요즘은 body 안쪽에 조차 광고판을 붙이는 지경이다. 프론트엔드 개발자가 시멘틱 태그과 코드를 이용해서 잘 구분 시켜 놓으면 기계 역할에 필요한 아티클, 필요한 콘텐츠를 걸러낼 수 있다. 'header와 footer, aside는 제외시켜라.' 하는 방식으로 말이다.
시맨틱 태그에 대한 내용은 아니지만 비슷한 맥락으로, 같은 웹페이지를 보는 사람들도 웹 브라우저 환경이 제각기 다르다. 똑같은 구성요소를 쓰거나 불러올 때에도 호환 명령어를 추가적으로 써주어야 모든 사람들이 제약 없이 그 웹페이지를 볼 수 있다.
block, inline, inline-block
block : 블럭 속성. 혼자 한 줄을 다 차지함. 따라서 폭을 가질 수 있다. (혼자 한 줄 다 부여 받았으니까...)
<p>, <h>, <header> 등이 있음
inline : 인라인 속성. 할당된 콘텐츠의 크기 만큼 공간을 가진다. 콘텐츠가 클 수록 커질 수도 있고 작아질 수도 있다. 어디 사이에 끼워넣기 좋은 속성.
inline-block : inline 속성이지만 block의 속성을 가지겠다는 의미로 쓰인다! 이 코드를 추가하면 '나는 인라인이지만 혼자 한 다 쓰겠음.' 상태가 된다.
시맨틱 태그로 구조에 맞춰 페이지 작성해보기
위키백과에 있는 모차르트 프로필 내용으로 html 문서 구조를 파악해보았다. 위키백과와 아주 똑같은 구조는 아니지만, 시맨틱 태그를 파악하는 연습이 되었다.
어려웠던 점, 해결 못한 점
딱히 없다. 개념적인 것들도 강의 내용과 검색을 통해 나름대로 내 선에서 정리가 된 것 같다.
소감
사실... 이렇게나 배운 것 같은데 아직도 버젓한 웹페이지 하나를 못만드는 사실이 좀 슬펐다... 배운지 얼마 안 되었다면, 기존에 구성된 웹페이지를 조금씩 건드려보거나 따라해보는 것도 엄청 많은 도움이 된다고 한다. 시간을 내어 해보려한다.
