목록Front-End (웹)/HTML (17)
EverGiver
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/k0o6Q/btrLLAWXgJv/RKsKNIXw6xbyyf7vkLkAok/img.png)
입력 양식 태그 사이트를 이용하는 사람이 정보를 입력하면 이 정보를 프론트엔드 분야 쪽으로 토스(넘겨주기) 위한 태그 태그 - ul태그와 비슷한 개념 - 입력양식태그들을 작성하기 전 기본적으로 작성해주는 태그 여러 폼 요소 - 속성 ⅰ) method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정 (사용할 수 있는 속성 값은 get과 post입니다.) ⅱ) name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 ⅲ) action : 태그 안의 내용을 처리해 줄 서버 프로그램을 지정 ⅳ) target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다. // 입력한 폼을 서버로 보내기 /* 여러 폼 요소 */ - autoc..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYosa3/btrLMw7yEYI/Ia2Lqvc3Usu2qM24N7MEvK/img.png)
태그 외부에 있는 여러 가지 내용을 자신의 html 파일에 가져오기 해주는 태그 (보통 요즘은 유튜브 동영상을 가져올 때 많이 사용하는 태그) 가져오는 방법 1. 원하는 유튜브 영상 클릭 2. (광고 진행 시) 광고 끝난다음에 마우스 우클릭 3. 소스코드 복사 4. 자신의 html body부분에 붙여넣기 video태그와 다르게 태그 자체에 가로와 세로 값을 조절해주는 구문이 있기 때문에 태그 안에 width , height로 값을 조절해주면 됩니다. (별도로 css에서 조절할 필요 X) display:inline-block 성질 → video태그와 동일하게 중앙정렬 시키고 싶다면 display:block 속성으로 변경해서 margin:0 auto 사용하거나 display:block 태그로 감싸준다음 똑같..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bbE72V/btrLStV37xU/Mq7QFewpBvcG08IjLAtUyK/img.png)
태그 동영상을 출력시켜주는 태그 옵션을 태그 자체에 적어주는 방식을 사용하고 있는 특별한 태그이다, 태그 속성 1. controls : 재생, 일시정지, 음소거, 전체 화면, 기타 버튼들을 동영상에 출력시켜주는 옵션 (자주 사용하는 옵션은 아니기 때문에 특별한 경우를 제외하면 사용하지 않는 게 좋다) 2. autoplay : 동영상을 자동으로 재생시켜주는 옵션 3. muted : 음소거 ★ 구글 및 웹브라우저 정책 변경으로 인해서 음소거가 되어있는 경우에만 비디오가 자동재생이 되도록 업데이트되었다. 그래서 반드시 autoplay는 muted 함께 사용을 해야지만 자동재생이 실행이 될 수 있다. 4. loop : 동영상에 시간이 다 되었을때 다시 처음부터 반복 재생을 시켜주는 옵션 (웹사이트에서 동영상을 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bu54kX/btrLTVkug81/MAiuUiqzBLMqTvYwvzdCu0/img.png)
시멘틱태그 웹사이트 개발자들이 id/class를 너무 개인의 취향에 따라서 작성을 하다 보니 여러 커뮤니케이션 및 유지보수 작업에 어려움이 있어서 이것들을 하나로 통합시키기 위해 만들어진 태그 #wrap - 원래는 작성을 하지 않아도 큰 문제가 없다. - 국내 개발자들이 html태그를 작성하기 전에 #wrap이라는 이름의 div태그를 하나 만들어서 그 안에다가 작성을 하자라고 약속을 해서 만들어 주는 느낌 header - 웹사이트에서 로고 (사이트의 얼굴) - 그 대상이 어떠한 대상인지 알 수 있게 해주는 가장 중요한 존재 - 보통의 header는 메뉴 부분과 동 떨어져 따로 존재하는 케이스이다. nav - 웹사이트 메뉴를 담당하고 있는 파트 main - 어떠한 사이트 안에서 주된 내용들을 담당하고 있는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/OVkms/btrLPnhLnyf/k3hXwiM0CV9iamH3IFoLVK/img.png)
목록 태그 특징 - 목록 태그도 display:block이기 때문에 div처럼 쓰면 된다. ⅰ) 가로, 세로 값 ⅱ) 배경색 넣기 ⅲ) 아이디 및 클래스 사용 - 목록 태그는 그냥 사용하면 글자 왼쪽 동그라미 아이콘(불릿)이 생긴다. → 이것을 없애주는 css속성을 맨 처음에 사용한다. → li{list-style:none} - 아무 때나 사용하는 게 아닌 목록이라고 부를 수 있는 존재들에만 사용한다. (목록 기준 - 비슷한 내용을 가진 개체가 3개 이상 있으면 목록이라 생각하자) 순서 있는 목록을 만드는 , 태그 → 각 항목을 순서대로 나열한 것 - 태그의 type, start 속성 종류 설명 type = "1" 숫자(기본값) type = "a" 영문 소문자 type = "A" 영문 대문자 type =..