728x90

Front-End/HTML5&CSS 10

HTML 1일차

1. 웹(Web) • 월드 와이드 웹(WWW 또는 W3; World Wide Web)의 줄임말 • 전 세계를 연결하는 인터넷 망을 통해 서로 정보를 공유하는 정보 서비스 공간 # 웹 정보의 작성과 표현 • HTML(Hyper Text Markup Language)언어로 표현되는 웹 문서로 작성(정적 문서와 동적문서로 구분) @ 정적문서란? - static !! 아무런 변화가 없이 보여지는 페이지 @ 동적문서란? - 매번 웹 페이지를 불러올 때마다, 새로운 내용을 표시하는 웹 페이지 • 웹 서비스 : 네트워크 상에 분산된 자원을 공유하기 위한 서비스 - SOAP 기반 웹 서비스 - Restful 기반 웹 서비스 # 웹 서버 • 클라이언트로부터 서비스 요청을 받음 • 서비스 요청에 따른 웹 Applicati..

Front-End/HTML5&CSS 2022.10.11

part08_images

1. 홈디렉토리와 서브디렉토리 구조 - 홈디렉토리 경로 => /lounge 2. 웹사이트 구현 [작업조건] 1) 위의 홈디렉토리 구조를 참조하여 결과화면대로 파일을 제작합니다. 2) 명시되지 않은 사항은 작업자가 판단하여 제작합니다. index.html welcome to Cafe Lounge 카페 라운지에서 신선한 음료, 즐거운 대화, 편안한 음악을 즐길 수 있습니다. 찾아오시는 길 웹 마을 중심가에 있습니다. 자세한 위치는 상세약도를 참조하세요. @ 음료클릭 beverage/elixlr.html 음료 목록 시원한 녹차 카밀레 꽃과 생강 한 조각.. 비타민과 미네랄이 가득한 녹차 산딸기 농축 과즙 레몬 글라스, 산딸기 열매가 첨가된 시원한 주스 크렌베리 블래스트 풍부한 Vitamin-C와 히비스커스 &..

Front-End/HTML5&CSS 2022.05.13

part07_Video요소

[형식] [기능] 속성 내용 autoplay 자동 재생, Boolean controls 재생, 일시정지, 볼륨조절 같은 컨트롤 표시, Boolean height 화면 높이(수치만 입력하며 단위는 픽셀) loop 반복 재생, Boolean muted 재생하면서 기본 값으로 음소거, Boolean poster 비디오에 표시되는 이미지(URL) preload 비디오 로드방식(none, metadata, auto) width 화면 너비(수치만 입력하며 단위는 픽셀) [사용 예] @ 모든 형식을 지원하는 소스 사용법 참고. 브라우저에서는 Adobe 사의 Flash를 이용하여 동영상을 브라우저에 표시할 수 있습니다. 플래시 비디오를 사용하려면, [현재 브라우저는 비디오 요소를 지원하지 않습니다.] 대신에 [] 요소..

Front-End/HTML5&CSS 2022.05.13

part06_HTML유효성검사

1. HTML유효성 검사 - html파일을 웹표준으로 만들었는지를 검사하는 것. - 웹표준 규칙에는 일반적으로 아래의 기재된 사항 등이 있으나 너무 종류가 많아서 모두 나열할 수 없습니다. - 그래서 평소 작성규칙을 지켜서 작성하는 습관이 필요합니다. 참고. 일반적인 웹표준 규칙 • 일반요소는 시작태그와 종료태그를 반드시 사용해야 합니다. • 요소의 중첩은 순서를 지켜야 합니다. • html파일의 코드템플릿을 사용해야 합니다. • meta태그로 인코딩을 지정해야 합니다. • img 요소는 alt속성을 가져야 합니다. 그 외의 규칙은 아래의 주소에서 html 파일이나 소스코드 또는 URL을 사용하여 웹표준 검사를 수행하고 이 때 발생하는 오류는 수정해야 합니다. HTML 웹표준 유효성 검사 URL은 다음과..

Front-End/HTML5&CSS 2022.05.13

part05_Semantic요소

1. Semantic(시맨틱)요소 - div 요소를 너무 많이 사용하여 발생되는 혼동을 줄이기 위해 만든 요소입니다. - 자주 사용하는 , 등의 요소를 Welcome to PetStory.com Cats Cats just like Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe ea corrupti, illo impedit temporibus tempore deleniti excepturi nihil eveniet non, fugit a. Officia veniam ad dignissimos odit, modi maiores laboriosam. Dogs Dogs are usually Lorem ipsum dolor sit amet, co..

Front-End/HTML5&CSS 2022.05.13

part04_Div요소

1. div 요소 - div 요소는 구간을 나누기 위한 블록레벨요소입니다. 화면을 구성하고 요소를 배치하기 위해 사용합니다. 참고. 화면을 구성하고 요소를 배치하는 것을 레이아웃(Layout)이라고 합니다. 1) div 요소 적용방법 - 블랙레벨요소 구역 나누기 2) div 요소 적용방법 - div 구역 설정과 명칭 @실습 Welcome to PetStory.com Cats Cats just like Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe ea corrupti, illo impedit temporibus tempore deleniti excepturi nihil eveniet non, fugit a. Officia veniam a..

Front-End/HTML5&CSS 2022.05.13

part02_HTML요소

1. HTML 요소 요소(Element, 엘리먼트) 보기 요소 => 내용 a요소 => 적고싶은내용이나 이미지 2. 기본적인 요소 요소 내용 사용법 hn요소 제목을 표현함(h1~h6) 제목입니다 p요소 문단을 표현함 문단입니다 a요소 이동할 페이지 지정(=Link, 링크) 링크입니다 button요소 버튼을 만들어 줍니다. 버튼입니다 @실습예제. 문서의 제목입니다 문단입니다. 제목을 설명하는 문맥이 위치합니다. 클릭하면 네이버 페이지로 이동합니다! 버튼 참고. - HTML은 줄바꿈이나 여러칸의 띄워쓰기가 적용되지 않습니다. - 오로지 1칸의 띄워쓰기만 자동 적용됩니다. - 줄바꿈에는을 사용하고 띄워쓰기에는 를 사용합니다. - 주석은 실행되지 않습니다. 설명글입니다. 3. HTML 요소의 속성 1) 모든 요소..

Front-End/HTML5&CSS 2022.05.13

part01_HTML기초&코드작성법

1. HTML의 기초 개념 - HTML은 코드를 작성한 파일이며 브라우저에서 실행하여 해당 결과를 볼 수 있습니다. - 표준 브라우저는 크롬, 인터넷익스플로러(IE), 에지(Edge), 파이어폭스, 오페라, 사파리입니다. - 확장자는 ".html"입니다. - 파일과 코드의 인코딩은 모두 "UTF-8"입니다. 2. HTML 코드 작성 - 메모장(Notepad), 편집기(에디트플러스, 브라켓, 비주얼스튜디오코드, ...) 에서 만듭니다. - 코드를 요소(또는 엘리먼트)라고 하며 소문자로 작성합니다. 3. HTML파일 작성순서 - 파일을 만들 폴더 선정 - 파일 만들기 - HTML 기본 코드 작성 - 최종 저장 - 파일을 실행하여 브라우저에서 결과보기 4. HTML 기본코드 html 코드 작성 구간 5. HT..

Front-End/HTML5&CSS 2022.05.13
728x90