자식 테그, 부모 테그 작성 방식 내용 파랑색 부분이 의미하는 것은 빨강색 요소의 자식 요소이다. 빨강색 부분이 의미하는 것은 파랑 요소의 부모 요소이다. 보통 부모 요소는 내어쓰기하고 자식요소는 들여쓰기한다. 들여쓰기 => tab 내어쓰기 => shift + tab 종료 태그가 없는 빈 테그 작성 방식 : 편리함, html 1, 2, 3, 4, 5에서 사용 : 안전함, xhtml,html 5에서 사용 내용 속성 부분과 값 부분을 이용하여 기능을 확장 할 수 있다. 이미지 테그 src 뒤에 이미지 경로를 나타내고 alt뒤에 이미지의 이름 (대체 택스트)가 출력된다. img 태그를 이용하여 사진 출력하기 input 테그 type 값을 지정하여 입력 받을 값을 정할 수 있다. type 값을 text로 두면 ..

vs코드를 장기적으로 사용할 때 가장 중요한 것은 전체 저장하는 습관을 들이는 것이다. 전체 저장은 Ctrl + s를 이용하면 되고 저장하면 하얀 점이 사라진다. vs코드에서 왼쪽을 클릭하고 우리가 설치한 확장 파일인 Live Sever를 열어준다. 그럼 브라우저가 자동으로 열리고 코드가 실행된다. index.html에서 작성할 내용을 꾸며줄 수 있는 css파일을 생성하였다. css파일에 내용을 열심히 작성하여도 화면에 나타나지 않는다. 그 이유는 index.html에 main.css을 연결하지 않아서이다. index.html에 밑줄친 부분과 같은 연결 링크를 넣어주면 우리가 지정하였던 스타일 값을 볼 수 있다. 이러한 한영 구글 번역기가 뜨는 것은 해당코드 때문이다. 사용자는 굳이 영어로 되있지 않은 ..

test라는 새폴더를 생성하였다. 폴더를 생성 할때에는 한글보다는 영어를 사용하고 대문자 보다 소문자를 사용하는 것을 권장한다. 새로운 파일을 만들고 !를 쓴 뒤 enter키나 tab키를 누르면 기본으로 작성해야 하는 내용들이 나온다. html 속에 있는 각종 태그들의 범위와 역할을 알아보자 : 문서의 html 버전을 지정한다. => html 5 (현재 표준이다.) : /가 없는 시작태그와 /가 있는 종료태그로 이루어져 있다. 문서의 전체 범위를 나타내고 html 문서가 어디에서 시작하고, 어디서 끝나는지 역활을 한다. : 문서의 정보를 나타내는 범위 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위. : 문서의 ..

여러가지 확장 프로그램을 이용하여 코드를 보기 좋고 프로그램을 사용하기 용이하게 만들었다. Beautify - 코드를 보기 좋게 정리하고 줄을 맞춰준다. Korean(사용법) Language Pack for Visual Studio Code - 비주얼 스튜디오 코드 기본 설정은 영어로 되어 있기 때문에 한국어로 사용하려면 따로 설치 해야 주는 것이 좋다. Live Server - 현재 작성하고 있는 코드를 실시간으로 보여주는 기능을 합니다. - Live Server를 키는단축키는 Alt + L + O를 차례로 누르면 됩니다. - Live Server를 끄는 단축키는 Alt 키를 누른 상태로 L과 C를 차례로 누르면 됩니다. 사이드바 열고 닫기 - Ctrl + B 빠른 열기 (파일이나 기호 탐색) - Ct..