HTML5 (7) 썸네일형 리스트형 [html] button 태그에 링크 걸기 태그에 링크 거는 방법 button 태그 안에 onclick="location.href='#'" 을 넣어주면 된다. ex) 회원가입 [HTML5] src, href 속성 정리 src 속성 태그에 이미지 경로를 지정할 때 사용한다. href 속성 태그로 외부 CSS 파일을 불러올 때 사용한다. 태그에 홈페이지 등의 주소를 넣을때 사용한다. 네이버로 이동 [HTML5] input태그 속성 : autofocus, placeholder input태그의 속성중에 autofocus속성과 placeholder속성이 있다. * autofocus : 커서 위치 표시 input type="text"일 때 페이지를 불러오게 되면 autofocus속성이 있는곳에 커서가 위치하게 됨 * placeholder : 힌트 내용 표시 창에 먼저 힌트내용을 표시하여 사용자에게 도움을 줄 수 있도록 하는것 [HTML5] #3.html5 태그 input 태그는 입력창을 의미하며 내용이 없기 때문에 닫는태그가 불필요하다. 이부분에서 type은 해당태그의 속성인데, type="text"라는것은 input태그가 text를 입력받겠다는 뜻이다. 태그 버튼을 만드는 태그이다. 버튼 태그 div태그는 여러개의 태그들을 구역으로 묶거나 나눌때 사용하는 태그이다. 버튼1 버튼2 이렇게 하면 두개의 버튼이 별도의 줄로 나뉜것을 확인할 수 있다. 버튼1 버튼2 이렇게 하면 같은줄로 들어가서 하나의 구역에 버튼이 나란히 옆으로 붙어있게 된다. 태그 a태그는 다른 웹사이트로 가는 링크를 걸어주는 태그이다. href속성에 이동하려는 주소를 넣어주면 된다. 다음으로 이동 태그 이미지를 표시하는 태그이다. [HTML5] #2.html5 태그 HTML 서식 요소 서식 요소는 다음과 같은 특수 유형의 텍스트를 표시하도록 설계되었다. Text Formatting Tag 텍스트를 굵게 출력 텍스트를 굵게 + 중요함 의미 텍스트를 이탤릭체로 출력 텍스트를 이탤릭체 + 중요함 의미 텍스트 폰트 크기를 작게한다. 첨자 텍스트 위첨자 텍스트 삽입된 텍스트에 밑줄을 긋는다. 텍스트에 취소선을 긋는다. 텍스트에 형광펜처럼 강조표시 태그 텍스트를 굵게 출력하는 태그입니다. 해당 내용을 굵게 표시 태그 텍스트를 굵게 출력하면서 의미적으로 중요함을 나타내는 태그입니다. 와 비슷하게 텍스트가 굵게 표시되지만 의미적으로 더 중요함을 뜻한다. 태그 텍스트를 이탤릭체로 출력하는 태그입니다. 텍스트를 이탤릭체로 표시한다. 태그 텍스트를 이탤릭체로 출력하면서 의미적으로 중요.. [HTML5] #1. html5 태그 HTML HTML(Hyper Text Markup Language)은 마크업(Mark-up)언어로 웹페이지의 기본적인 형태를 만드는 코드이다. 프로그래밍 언어가 아니기때문에 연산은 할수없고 단순히 웹페이지의 겉모습만을 담당한다. 예를 들면 글자나 버튼같은 것들이 HTML로 만들어지며 쉽고, 직관적이기때문에 쉽게 배울수있다. 기본구조 visual studio code에서 느낌표를 누르고 탭을 누르면, html의 기본구조템플릿이 생성된다. (! + Tab) HTML의 기본적인 구조이며 HTML을 작성하기 위해서는 꼭 있어야 하는 구조이다. : HTML5를 사용함을 브라우저에 선언하는 역할을 한다. : 전체 html 문서를 감싸는 태그이다. html 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 된다... [HTML5] HTML5 사용을 위한 VSCODE초기 설정 Visual Studio Code 다운받기 HTML5를 사용하려면 Visual Studio Code 라는 프로그램을 다운받는다. 다운받고 실행했으면 이제 라이브서버를 설치해야한다. 왼쪽 맨밑에 아이콘(확장)을 누르면 확장기능을 다운받을 수 있다. [확장]을 클릭하고 마켓플레이스에 Live Server를 검색하고 설치한다. live까지만 치면 바로 나옴! 그리고 vscode에서 html파일을 작성할때 느낌표를 누르고 탭을 누르면 html의 기본구조템플릿이 작성되는데 혹시 그게 안된다면 설정해주면 된다. 윈도우와 맥에서 각각 방법이 다른데 아래와 같이 하면 된다. (윈도우) 파일 > 확장 > Emmet > Trigger Expansion On Tab 체크하기 (맥) code > 기본설정 > 설정> 검색바에 .. 이전 1 다음
