목록프론트엔드/HTML (12)
김루루의 개발일기
head 태그 안에 들어가서 html문서에 중요한 메타 데이터를 표현하는 태그. ◎ Title 태그 검색 최적화에 매우 중요하다. 검색에 최적화 될 수 있게 title 잘쓰는 방법. 키워드만 나열은 하지 않는게 좋다. 페이지마다 그에 맞게 변경한다. 무엇에 관한 내용인지 함축적인 내용이 잘담겨있게 작성한다. 문서의 대 제목 ◎ LInk 태그 css 스타일시트를 html문서에 첨부할때 사용한다. (웹폰트를 첨부할때도 사용함) [link : css + Tap] 태그 자동완성 ◎ style 태그 html문서 내에서 css코드를 작성할때 사용한다. html문서 내에 특별한 이유가 아니면 스타일을 쓸필요는 없다. ◎ script 태그 자바스크립트 파일을 첨부할때 사용한다. ※ 태그를 안에 넣는 이유는? 자바스크립..
"지금부터 작성된 문서는 html5버전 (가장최신의 웹표준)으로 작성된 문서다. "라고 선언함! DOCTYPE(documentType)은 반드시 대문자로 써야됨. 이 안에는 반드시 2개의 태그만 작성할 수 있다. ( 중요하지만 보이지 않는 것들을 선언하는곳. 웹문서에서 보여주는 모든 콘텐츠를 담아내는 요소
◎abbreviation 태그 약자, 약어의 풀네임을 알려주는 태그 속성 : title 약자의 풀네임 ◎address 태그 연락처에 관한 마크업을 하고 싶을때. 연락망 종류 (물리적)주소 url 주소 email 주소 전화번호 SNS 주소나 전화번호 ◎ pre 태그 (preformatted text) html에 작성한 그대로 웹페이지에 나오게 할때 이곳에 작성된 텍스트는 들여쓰기, 줄바꿈등이 작성된 그대로 웹페이지에 나타난다. ◎ code 태그 코드를 웹사이트에 그대로 나타내고 싶을때. 코드를 웹사이트에 그대로 나타태고 싶을때 사용. pre태그랑 함께 사용하는 경우가 많다. console.log('안녕')
◎ media file html 문서안에 텍스트가 아닌 형태의 데이터를 넣는 형태 ◎오디오 태그(audio) //src : 오디오파일 경로명시 //controls : 컨트롤버튼 //autoplay : 자동재생 //loop : 반복재생 오디오태그 다른방법 이 방법은 명시된 확장자가 다른 브라우저에서 지원하지 않을때 type에 확장자를 추가해준다. 유저의 브라우저가 명시된 확장자를 모두 지원하지 않는 경우 텍스트를 적어서 표시해 줄 수 도 있다. 브라우저를 업데이트 하세요! 브라우저 업데이트 하기 ◎비디오 태그 (video) (= 오디오와 완전 동일) //src : 비디오파일 경로명시 //controls : 컨트롤버튼 //autoplay : 자동재생 //loop : 반복재생 비디오태그 다른방법 이 방법은 명..
Table태그(표) - HTML 0612
◎Table 태그 (표) 데이터를 담는 표를 만들때 자주 사용. Tip! 가로줄을 기준으로 생각하고, 데이터를 담을 셀인가? 헤더에 관한 셀인가?를 정한다. ※ 다음에 가 있어도 웹페이지에서는 마지막으로 보임. -- 순서로 작성한다. 1월 출지 2월 지출 총 합계 30,000원 50,000원 식비 10,000원 30,000원 의류 20,000원 20,000원
◎Select 태그 풀다운 형식의 여러 항목을 선택하는 칸을 만들때 사용. select 속성값 name : 그룹핑하기 위해 multiple : 다중선택 할때 (※ input name은 input 속성으로 각각 설정해야 그룹핑이 됐는데 select는 option을 자식요소로 갖고 있기 때문에 selet에만 name을 줘도된다.) option 속성값 : value : 서버에 전송되는 값 ( 각각 다른값으로 명시) ex) ->셀렉칸 만들때 ->풀다운 형식의 선택칸을 만들때 ◎Textarea 태그 사용자가 여러글을 쓸 수 있는 창 속성값 : rows =""/ cols ="" 박스 크기조정 (css에서도 가능) ◎button 태그 말그대로 버튼을 만드는 태그 속성값 : button/ submit/ reset ex..
◎Form 태그 사용자에게 데이터나 정보를 받고싶을때 사용한다. 속성값 : action / method 사용자에게 받은 input 값을 가지고 무언가를 처리한다. action : input 값을 서버에게 전송하는 API 주소. method : 정보가 많거나 중요한 정보는 POST / 그 외에는 GET ◎input 태그 필드(입력창)을 생성할때, 사용자에게 정보나 데이터를 받을때. (※ type 속성 필수, 닫는 태그가 없다) 한줄정도의 모든 텍스트를 받을 수있다. 기본적으로 아무값이 없을대 input칸 안에 보여지는 텍스트. ( 값을 입력하지 않을때 안내창이뜸) input칸에 작성할 수 있는 텍스트의 갯수를 제한 하고 싶을때. input칸에 작성할 수 있는 최소 문자갯수. (최소문자갯수보다 적을때 안내창..