맨 땅에 프론트엔드 개발자 되기

form 태그로 감싸진 양식 안에 button 태그가 있을 경우, 버튼을 클릭하면 자동으로 폼 양식의 submit 이벤트가 발동된다. 이걸 preventDefault 로 막았었는데, 아예 그 버튼이 submit 버튼이 아니라면, 더 깔끔하게 submit 을 방지할 수 있다. 이 버튼은 제출 버튼이 아닙니다. 바로 type 속성에 button 이라고 명시해주면 끝!! 이후 onclick 이벤트를 걸더라도 submit 되지 않고 지정해준 이벤트가 발동된다. 끝!!

회사에서 앱을 만들다가 회사 소개서 PDF 파일을 웹에서 다운로드 할 수 있도록 버튼을 만들어야 했다. 나의 선생님 구글에 검색해보니 대다수가 백엔드 개발자들이 구현한 예제들 뿐이었다. 이 간단한 기능을 만들기 위해 서버를 만들 필요는 없다고 생각했기에 더 구글링을 했다. 간단하게 HTML 만으로 다운로드 기능을 만들 수 있었다. 회사 소개서 다운로드 다운로드를 제공할 파일을 프로젝트 폴더 안에 담아두고 a태그의 경로로 지정해주면 간단하게 구현이 가능했다. 새로 배운 거 기록하기!

HTML 시맨틱 태그를 사용하는 이유 시맨틱(Semantic) 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다. 시맨틱 태그를 왜 써야하는데? 영역마다 무슨 태그를 써야하는지 생각하는 게 귀찮고 그냥 다 div 태그를 써버리면 되는데 뭐하러 시맨틱 태그를 사용하나? 라고 생각이 들 수도 있겠지만, 시맨틱 태그를 사용하는 것과 아닌 것에 차이점이 있다. 1. 검색엔진 최적화(SEO) 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 ..

HTML 문서는 보통 HTML 태그로 문서 구조를 짠 뒤에 CSS로 HTML 문서에 디자인 속성을 넣어주고, JAVASCRIPT로 동적 구현을 하는 시스템으로 이루어져 있다. 보통 확장자를 .html .css .js 로 문서를 3개 만들어 css파일과 js파일을 html파일과 연결시켜 주는데, css파일과 js파일에서 html 문서의 어떤 것을 선택해 속성을 지정해주고 싶을 때 id와 class가 필요하게 된다. 말로 설명하려니 어렵네.. 바로 예제를 보자. 예제 연습 div로 지정된 4개의 네모가 오른쪽 브라우저에 표시된다. 4개의 div에는 class가 지정되어 있고, 맨 마지막 div에만 id가 지정되어 있다. example.css 문서를 보면 background 컬러가 지정되어 있는데 각기 다른 ..

폼 태그와 인풋 태그 : 폼 태그는 어떤 입력 값을 받는 폼을 말하며, 보통 하위 인풋 태그들과 함께 쓰인다. : 입력 값을 받는 태그를 말한다. 속성 값으로 text, button, color, range, date 등 어떤 입력값을 받을 것인지 지정할 수 있다. 예제 연습 : input type="text"와 비슷하게 글자 내용을 입력받을 수 있는 태그. : input type="button"과 비슷하게 버튼 클릭을 받을 수 있는 태그. : 드롭다운 형식의 선택 입력값을 받을 수 있는 태그. : select 태그의 옵션을 만들 수 있는 태그. : select 태그의 옵션 중 그룹을 만들 수 있는 태그. : input 태그 혹은 다른 입력값을 받는 태그 앞에 쓰여 라벨을 만들 수 있는 태그. 예제 연습..

영역 태그 : 인라인 요소 즉, 가로줄 전체의 영역을 잡지 않고 문단 내의 특정 요소만 영역으로 지정하고 싶을 때 사용하는 태그. : 문단과 따로 떨어져 어떤 특정한 영역을 잡을 때 사용하는 태그. 가로줄 전체를 차지한다. * span과 div의 차이는 말로 설명하면 어렵고, 실제 브라우저 상에서 어떻게 작동하는지 봐야 더 이해가 잘 된다. 예제 연습 div와 span의 차이는 CSS를 적용하면 더 확실히 나타난다. 첫번째 줄의 딸기는 맛있다. 에서 딸기 뒤에 태그를 넣지 않았음에도 불구하고 브라우저 상에서는 엔터가 들어간 것처럼 보인다. div로 영역을 잡아주면 가로줄 전체를 차지하기 때문이다. 반면에, span으로 영역을 잡아준 두번째 줄은 한 줄로 되어있다. 이를 바로 인라인(inline) 요소라고..