Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned semantic tag 시멘틱(semantic) 태그 의미가 부여된 태그라는 뜻 입니다. 사용해야 하는 이유와 종류를 알아봅니다. 시맨틱 태그란? - HTML 태그에서 가장 기본적으로 쓰이는 태그는 태그 입니다. - HTML5 부터 등장 했습니다. 예를 들자면 같은 태그가 있습니다. 이 태그를 보면 직관적으로 태그라는 것을 알 수 있습니다. 시맨틱 태그를 사용해야 하는 이유 - HTML 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않고 태그를 활용하여도 무방합니다. 하지만 우리가 시멘틱 태그를 사용해야 하는 이유를 설명 드리겠습니다. 1. 가독성과 유지보수가 쉬워집니다. 모든 태그가 div라고 한다면 한눈에 파악하기 어렵고 태그 영역이 햇갈립니다. 2...

❤️‍🔥TIL : Today I Learned position CSS position에 대해 설명합니다. position ? - CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top , right , bottom , left 속성이 요소를 배치할 최종 위치를 결정합니다. 구문 - static : 기본값으로 요소들이 겹치지 않고 상 -> 하로 배치 됩니다. - relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치합니다. - absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치합니다. - fixed : 웹 브라우저 화면 전체를 기준으로 배치합니다. 스크롤을 하더라도 위치가 고정되는 특징이 있습니..

❤️‍🔥TIL : Today I Learned 우리가 html 에서 form 태그를 쓰는 용도로는 유저(사용자)에게 입력받은 값을 js 에서 핸들링하여 백엔드로 넘겨주기 위함이다 form 태그 하위 요소들 form 예시 입력 받기 - submit 의 value 의 type 과 의 type form 태그 하위 요소들 위와 같은 태그들이 들어갈 수 있다 form 예시 하지만 이해를 위해 간단하게 작성해 보겠다 닉네임 : 이메일 : 비밀번호 : 사용자에게 input 으로 받은 value 들을 전부 넘겨줘야한다 입력 받기 - submit 위에서 회원가입버튼의 submit은 form 안에 있는 input으로 받은내용(value)을 전송하는 태그이다 function 입력보내기(event) { event.preven..

'가게를 인테리어를 하려면 많은 도구들이 필요하겠지? 아니면 시중에 파는 제품을 사와도 좋고' 저번포스팅에 순수한 html파일만 가지고 보여드린 html에서 style 을 추가한 웹페이지 입니다! CSS 기초 HTML 부모-자식 구조 살펴보기 👉 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요! 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠! 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다. 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니..

'너가 장사를 하려고 하는데, 공간이 필요하겠지? HTML은 인테리어가 아무 것도 안되어있고 시멘트만으로 구역을 나눈 하나의 건축물, 건물이라고 생각하면 되겠다' 저는 친구들에게 설명할 때 이렇게 말하곤 합니다. 사실 'HTML' 은 웹 브라우저에서 우리가 보는 가장 흔한 문서파일 입니다. 하지만 순수하게 HTML 파일이 가진 태그 만으로는 우리가 아는 멋진 웹페이지가 아닐겁니다. HTML 파일의 목적이 문서, 정보 전달이였기 때문이죠 HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며,..