HTML (7) 썸네일형 리스트형 VisualStudioCode 편집기 사용시 추가해 두면 편한 소스들 / 비쥬얼 스튜디오 한국어 설정 Color Highlight - 색상 지정시 해당 색상 미리보기 HTML CSS Support - 해당 html 문서에 적용되어있는 CSS를 추천해주는 기능 HTML Snippets - 자동완성 지원 Korean(사용법) Language Pack for Visual St - 한국어 지원 Live Server - 변경사항 other browser에 새로고침을 안해도 바로바로 반영시켜서 보여줌 Material Icon Theme - 파일의 확장자 별로 알아보기 쉽게 아이콘이 변경됨 <HTML> meta 태그란? 컴퓨터에 저장하는 것이 인코딩, 저장되어있는 것을 꺼내는게 디코딩이라고 한다. 디코딩을 할때(= 정보를 꺼낼때) 브라우저마다 기본적인 설정이 다르기 때문에 어떤 정보를 꺼낼때 어떤 언어로 읽어야하는지 컴퓨터에게 알려주는거라고 생각하면 될것 같다. ------------------------------- DOCTYPE html> 태그 예제 코드입니다. -------------------------------------------------- 이 데이터는 한글로 적었기 때문에 utf-8로 읽어야 한다라고 태그로 속성값을 알려준다. 이외에 많은 사용법이 있는데 다음을 참고하자 DOCTYPE html> html의 meta태그 실습 코드입니다. --------------------------------------.. <method> 정보를 전송하는 방식 GET / POST form은 사용자가 입력한 정보를 서버로 전송하는 것이다. 웹이 정보를 주고 받는 방식을 안다면 이부분을 이해하기 조금 수월할 것이다. 예시를 보면 좀더 이해가 빠를듯! 바로 예시코드 DOCTYPE html> Document ---------------------------------------------------------------------------------- 단순한 입력 폼이다. 각각 id와 pwd라는 값을 지정해주었다. 여기에 값을 입력하고 제출을 누르면 띠용 URL에 비밀번호랑 아이디가 전부 노출된다...!! 이걸 방지하기 위해 POST 방식을 사용한다 그래서 코드에 살짝 조금만 더해주면 DOCTYPE html> Document ---------------------------------.. <HTML> Button 버튼! 우리가 아는 그 버튼이다. 여러 곳에 유용하게 쓰이긴 하지만 JAVASCRIPT와 함께 쓰일때 더 유용하게 쓰인다! 오늘은 간단하게 어떻게 쓰는지만 알고가자 바로 예제 코드 DOCTYPE html> Document ----------------------------------------------------------------------------------- 이렇게 출력된다. ( 태그로 좀더 예쁘게 만들 수는 있겠다ㅎㅎ) 여기서 버튼에 처음보는 속성이 하나 있다. onclick인데 해당 버튼을 클릭했을때 어떤 동작을 하도록 해주는 설정이다. 이번엔 alert 라는 알림창에 Hello world 라는 글자가 뜨도록 해줬다. !! 주의할게 자바에서는 ""를 썼는데 html에서? 는 ' ' 작은따옴.. 사용자 선택 dropdown 옵션 DOCTYPE html> Document 색상 붉은색 검은색 파란색 색상2 (다중선택) 붉은색 검은색 파란색 ------------------------------------------------------------------------------------- 생활코딩님의 유튜브 영상을 보면서 html공부하는걸 정리한다 위의 예시 코드에서 form 태그의 action 으로 정보전달 - 페이지 이동을 할 수 있게 임의로 설정해주었다. 실제로 웹페이지에서는 사용자가 정보를 선택하거나 입력하면 DB에 전달하게 만들것이다. 만약 form태그의 내용을 입력하지 않으면 요렇게 화면에 원하는대로 출력은 되지만 제출을 눌렀을 때 아무런 변화가 생기지 않는다 그 다음 태그를 만들고 또 그안에 을 생성한다. 그리고 어떤.. VS CODE(visual studio) 윈도우 자동정렬! 인텔리 J를 쓰다가 프론트만 실습해보려고 VScode를 쓰는데 마구 타자를 치다보면 정렬이 안되어있을때가 있다 저장하면 자동정렬되는 기능이 을매나 편한지 깨닫게 해주는 부분... 여튼 자동 정렬하는 단축키가 있다! 까먹기 전에 적어둔다 정렬할 부분의 코드를 선택하고(왠만하면 ctrl + A를 하자) ctrl + K + F를 누르면 된다! 알파벳은 순서대로 눌러야한다. 1. HTML 이란? HTML 은 Hyper Text Marker Language 의 줄임말입니다. 해석하면 웹브라우저에 내용을 보여주는 텍스트, 이미지, 영상등의 위치를 표시하는 것을 의미합니다. 한글, 엑셀등과 같이 내용을 입력하는 프로그램과 달리 웹 문서는 내용을 입력하는 프로그램과 그 내용을 확인하는 프로그램이 다릅니다. 웹 페이지를 바로 그 페이지에서 수정할 수 없다는 이야기 입니다. (왜냐하면 셀 수 없이 많은 다수가 웹페이지를 이용하는데 기본적인 원본이 수정된다면 안돼겠죠?ㅎㅎ 그렇다면 각각 사람들에게 전혀다른 서비스가 제공될테니까요) 웹 편집기에 입력한 태그 웹 브라우저에 보이는 모습 따라서 우리는 웹개발을 하기 위해서는 HTML의 구조를 파악할 필요가 있습니다. 다음 예제를 봅시다 웹 문서 만들기 맨 첫번째 .. 이전 1 다음
