frontend HTML 프로그래밍 기초 Show
실습 예제 모음
예제 1-1) 웹페이지 요청하기와 소스 보기본 예제에서는 url 을 이용해 원하는 웹페이지를 직접 요청하는 과정을 통해 웹의 기본적인 동작구조인 request -> response 개념을 살펴보게 됩니다. 또한 웹브라우저 화면에 보이는 콘텐츠의 소스 보기를 통해 서버에서 전달된 원본 콘텐츠는 텍스트형식으로 된 html 구조라는 것을 확인해 봅니다. step-1> 웹브라우저 실행하기
step-2> url 입력하기
step-3> 소스 보기
예제 1-2) HTML 기본문서 작성과 실행하기본 예제에서는 HTML 파일을 생성하고 HTML 문서의 기본 구조를 작성해 봅니다. step-1> Visual Studio Code 실행
step-2> html 소스코드 작성
step-3> 실행 및 결과 확인파일을 선택후 오른쪽 마우스를 눌러 open in browser 메뉴를 선택해 브라우저에서 실행결과를 확인 합니다. 메뉴가 보이지 않을 경우 공통기초->개발환경구축하기 를 다시 참조해 해당 플러그인을 설치후 진행하기 바랍니다. 2장. HTML 기본 태그예제 2-1) 제목과 문단 태그 활용본 예제에서는
실행 결과
예제 2-2) 텍스트 관련 태그 활용본 예제에서는 텍스트 관련 태그들에는 무엇이 있는지 살펴보고, 각 태그들에 의해 텍스트가 어떻게 변하는지를 살펴봅니다.
실행 결과
예제 2-3) 목록 만들기본 예제에서는 순서가 있는 목록과 순서가 없는 목록, 두 가지를 작성해봅니다. 또한
실행 결과
예제 2-4) 하이퍼링크 활용본 예제에서는
실행 결과
예제 2-5) 책갈피 구현 하기
커피숍 메뉴판에서 원하는 항목으로 이동시켜주는 책갈피 기능을 만들어보는 코드입니다. 파일을 생성하고
실행 결과
예제 2-6) 인라인, 블럭 태그 차이인라인, 블럭 태그의 차이를 살펴 봅니다. 대표적인 블럭 태그인
|