HTML스터디6 HTML 5 :) HTML 폼 테그 활용하기! 체크박스 & 폼 요소 만들기 HTML 기초 텍스트 오늘 정리할 내용은 HTML에서 자주 사용되는 체크박스와 폼 요소만들기 입니다. 특히, 이 폼 테그는 저희가 알게 모르게 웹 문서에서 굉장히 자주 사용하고 있습니다. 사용자의 의견이나 정보를 알기위해 폼을 사용하는 경우가 많죠. 폼에서는 굉장히 다양한 형태를 볼 수 있는데 오늘 공유드릴 내용은 그 중 가장 기본적인 방식입니다. 일반적으로 구글 폼이나, 네이버 폼 등에서 설문조사를 진행할 때 흔히 볼 수 있는 방식입니다. 그리고 일반적인 로그인 창이나 이메일 작성란, 텍스트가 입력되는 모든 블랭크 부분들 또한 폼으로 만들어 지는 부분입니다. 여기서, 이전에 정리한 리스트 속성들이 그대로 사용되게 되고, 뭔가 저도 공부를 할 때 이제서야 뭔가가 만들어지는구나 하는 느낌을 받았던 재미있는.. 2020. 8. 26. HTML 5 :) HTML 에서 링크 만들기! 텍스트 링크 + 이미지 링크 만들기! HTML 그림에서 링크 삽입! HTML 기초 텍스트 HTML을 공부하는 많은 분들이 가장 궁금해 하시는 부분중 하나라고 생각됩니다. 바로 글, 사진 등에 링크걸기! 오늘 다뤄볼 내용은 텍스트 + 이미지에 링크를 삽입하는 방법입니다. 여기서 소개해 드릴방법은 이미지 + 텍스트에 동일한 방법으로 삽입하는 형태입니다. "a href"라는 속성을 사용하게 되고, 지정된 형태로 링크를 삽입하는 형식입니다. (이미지의 경우 이미지 맵 형식의 다른 방법이 있는데, 그건 따로 공유드리도록 하겠습니다.) 먼저, 기본형이 어떤지 알아보겠습니다. 텍스트 형식 : 설명글 등 이미지 형식 : 당연히 저 링크 주소가 들어갈 부분은 마음대로 작성할 수 있습니다. (당연히 일반 웹 사이트 주소, 개인 블로그 전부 사용가능합니다) 이미지링크 작성 이어서 추가로 이.. 2020. 8. 24. HTML 5 :) HTML 에서 목록만들기! <ul> <ol><li> HTML 기초 텍스트 목록만들기 태그 html안에서 목록을 만드는 것은 상당히 중요한 부분입니다. 이후에 보다 발전된 형태의 웹을 만들 때에도, 이런 목록 명령을 통해서 이미지나 텍스트 모두 정리할 수 있고 여러형태로 다양하게 사용할 수 있는 부분입니다. 저도 책을 보며 공부할때 보니 아주 많이 사용되는 부분이더라구요. 1. 순서가 없는 태그 별도의 숫자나 순서를 매길 필요가 없을 경우, 그리고 저는 일반적으로 해당 태그를 많이 사용합니다 상위 - unordered list 하위 - list item 기본형태로는 내용 내용 2. 순서가 있는 태그 항목을 나열하면서 지정된 순서가 필요할 경우 사용합니다.(워드나 한글의 1,2,3 순서를 매기는것과 비슷합니다) 상위 - ordered list 하위 - lis.. 2020. 8. 23. HTML 5 :) HTML 시작과 텍스트 태그 공유! + 사진 추가하기 HTML에서 내 마음대로 글 수정하고 작성하기 HTML 시작 텍스트 태그 공유 ~ 제목표시( 숫자가 작을수록 크기가 커짐) 단락 줄바꿈 수평줄 인용문(블랙 레벨 태그라서 들여쓰기) 인용 내용( 인라인 레벨 태그라서 줄바꿈 없음) 입력 그대로 출력( 접근성 고려 필요) 굵게 표시 (중요한 내용 강조) 굵게표시(키워드처럼 단순 강조) 이탤릭체 ( 특정 부분 강조) 1em= 16px HTML을 공부하면서 느낀 부분 중 하나는, 텍스트 태그를 전부 다 알필요는 없겠더라 입니다. 하지만, 한번씩은 거쳐봐야 할 과정이고, 차례대로 정리를 해 보고 공유하려 합니다. (질문을 해 보면 책을 끼고 살아야한다는 말이 왜인지 절로 이해가 되더라구요) HTML이 프로그램, 컴퓨터 언어로써는 가장 기초적이며 가장 쉬운언어라고 하지만, 독학을 해 보는 입장에서 보자면 여전히.. 2020. 8. 22. HTML 5:) 비주얼스튜디오 코드 기본세팅 웹 편집기 / HTML 독학 / 코딩독학 웹 편집기 기초세팅 비주얼 스튜디오 코드 HTML의 기본에 이어서 어찌되었든 독학을 하는 초보자의 입장에선 어떤 방법으로든 프로그램을 사용하고, 실제 예시등을 가지고 무엇이든 만들어 보아야 합니다. 흔히들 많이 사용하는 비주얼 스튜디오 코드이지만 사용하기에 앞서 조금의 세팅이 필요하기 때문에 누구나 따라하실 수 있게 간단히 작성해 보았습니다 1. 프로그램 다운로드 code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Vis.. 2020. 8. 21. HTML 5 CSS 3 :) HTML 5/ CSS 3란? 웹브라우저와 기초편 HTML 이란 무엇일까요? 인터넷을 무척 손쉽게 접하는 우리나라에서 한 번은 들어봤을 법한 확장자고, 저도 오래전부터 관심을 두고 있다가 한번 공부해 보기로 결심을 했습니다! HTML이란 Hyper text markup language의 줄임말로 "하이퍼 텍스트" 즉 웹사이트 링크를 클릭해 다른 문서로 이동을 하고 "마크 업"이란 태그를 이용해서 내용과 제목들을 표시하는 것을 의미합니다. 웹 문서를 구현하는 언어가 바로 HTML입니다. 아마, 간단하게 개인용 웹 페이지나 어플리케이션을 만들어 보고 싶으신 분들이 현재 나와있는 HTML5를 검색하고 계실 것 이라 생각됩니다. 기존의 HTML은 기능들이 부족해서 어플리케이션 개발자들에게는 사용되지 않았고, 웹페이지들을 만들 때에만 사용되는 경우가 많았는데, .. 2020. 8. 21. 이전 1 다음
