HTML 작업을 편하게 하는 방법(크롬 개발자 도구를 활용하세요)
HTML 코딩을 하면서 크롬 브라우저의 개발자 도구를 활용해 사용하는 방법에 대해서 작성해 보려고 합니다. HTML 작업 중 간단한 작업의 경우는 브라우저의 화면을 직접 보면서 CSS 작업까지 동시에 진행 할 때 개인적으로 자주 사용하는 방법입니다.
HTML이나 CSS 작업의 경우 태그의 속성이 기억나지 않을때 자주 사용하는 방식이며 작성한 HTML 파일은 특정 프로그램이나 다른 도구를 이용하지 않아도 HTML 파일을 완성할 수 있는 장점이 있습니다.
직접 수정한 내용을 눈으로 보면서 확인하고 완성된 코드를 가지고 쓰다 보니 다시 코드를 수정하지 않아도 되는 장점도 있는 것 같습니다.
먼저 HTML 파일을 하나 만들어 보도록 하겠습니다. 윈도우 바탕 화면에서 마우스 오른쪽 버튼을 누르고 새로 만들기 텍스트 문서를 눌러 주시면 됩니다.
생성된 텍스트 파일의 이름은 아무거나 지정하시고 확장자만. html로 변경해 주시면 됩니다.
확장자가 숨겨져 있으신 분들은 먼저 윈도우 환경에서 숨겨진 확장자를 표시하는 설정을 참고 하시기 바랍니다. - https://zzarungna.com/487
확장자만 html로 변경한 파일을 끌어서 크롬 브라우저에 옮겨 주시면 됩니다.
그럼 아래 이미지와 같이 컴퓨터에 있는 HTML 파일이 크롬 브라우저에서 실행됩니다.
F12 버튼을 눌러 주시면 개발자 도구가 나오며 개발자 도구 메뉴 중에서 Elements 메뉴를 선택하시고 html 태그가 나오는 영역에 마우스 오른쪽 버튼을 누르신 뒤 Edit as HTML 메뉴를 선택해 주시면 됩니다.
아래 이미지와 같이 크롬 브라우저 내에서 HTML 소스 코드를 추가하고 수정하고 코딩하실 수 있습니다. 텍스트 파일에 아무런 내용이 없어도 기본 HTML 코드가 작성되어 있으며 HTML 코드도 수정하고 CSS 코드도 같이 수정을 합니다.
작업이 완료되면 CTRL+Enter 버튼을 눌러 주시면 크롬 브라우저에 작성한 HTML 내용이 적용됩니다.
CSS 코드 작성과 관련해 크롬 브라우저로 편하게 코딩하는 방법에 대해서 작성한 적이 있으니 필요하신 분들은 참고하시기 바랍니다. - https://zzarungna.com/1221
그런 뒤에 아래 이미지와 같이 크롬 브라우저에서 작성한 HTML 내용 확인이 가능합니다. 이제 작업이 완료되었으니 작성한 HTML 내용을 텍스트 파일로 붙여넣어야 합니다.
크롬 브라우저의 개발자 도구를 이용해 작성한 HTML 태그를 복사하시려면 html 코드가 있는 최상위 태그인 html 태그를 선택하시고 마우스 오른쪽 버튼을 누르고 Copy 메뉴 Copy element를 선택해 주시면 됩니다.
전체 태그를 복사할 때는 html 태그를 선택하시고 특정 html 태그 복사도 가능하니 참고하시기 바랍니다.
크롬 브라우저에서 작성한 CSS 코드도 HTML 코드에 포함된 것을 확인하실 수 있습니다.
작업이 끝났으니 HTML 파일을 열어서 방금 복사한 코드를 붙여넣어서 저장하면 됩니다.
아래 이미지와 같이 크롬 브라우저에서 작업한 내용을 붙여넣었을 때 화면인데 코드 정렬이 안 되어 있는 게 흠이지만 어차피 저에게 필요한 코드 작업은 끝났기에 필요한 곳에 활용하면 되겠네요.
간단히 HTML, CSS 코드를 크롬 브라우저를 활용해서 파일을 만들고 수정하는 방법까지 간단히 작성해 보았습니다.
개인적으로 필요할 때 자주 사용하는 방식인데 크롬 브라우저의 개발자 도구 중에서 몰랐던 기능이었다면 참고하셔서 필요할 때 활용하시면 좋을 것 같습니다.
