HTML156 HTML 레이아웃 코딩 예제 이전 글에서는 HTML 레이아웃의 요소와 태그 및 속석에 대해 살펴보았다. 이번 글에서는 앞 글에서 학습한 HTML 레이아웃을 예시로 HTML과 CSS를 활용하여 코딩을 해 볼 것이다. 하나씩 따라오면서 작성을 하면 그렇게 어렵지는 않을 것이다. 먼저 기본 개념으로 HTML 레이아웃 요소에 header, footer, nav, article, section, aside 요소를 활용하는 기본 요소를 작성해보자. 초기 HTML 문서 코딩과 출력 화면이다. HTML 레이아웃 예제 이곳은 헤더 영역입니다. nav Tiger Lion Puma section start 동물의세계 호랑이 사자 퓨마 section end aside footer > 다음은 nav 영역이다. HTML nav 요소 nav 영역을 가로로 변.. 2023. 5. 25. HTML 레이아웃(HTML Layout) HTML 레이아웃 요소(HTML Layout Elements) HTML에는 웹 페이지의 다른 부분을 정의하는 여러 의미 요소가 있다: 정글의 맹수들 맹수들 사자 호랑이 하이에나 사이드바 꼬리말 마무리 전체적인 HTML 레이아웃 요소에 대해 살펴보았다. HTML 레이아웃 요소에는 header 요소 nav 요소 aside 요소 section 요소 article footer 등의 요소를 활용하여 HTML 문서의 전체적인 구조를 정의한다. 간단한 것이라도 HTML 구조를 정의하여 코드를 만들어보자... 꼭 실습과 반복만이 여러분의 코드의 실력을 향상시킨다. 모두 화이팅!!! 출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다. 2023. 5. 24. HTML HEAD 요소 HTML 본문 요소의 내용이 브라우저 창에 표시됩니다. 제목 요소의 내용은 브라우저 탭, 즐겨찾기 및 검색 엔진 결과에 표시됩니다. HTML 요소 요소는 단일 HTML 페이지에 대한 스타일 정보를 정의하는 데 사용된다: 이것은 H1 제목이다. 이것은 단락이다. 본문 요소의 내용이 브라우저 창에 표시됩니다. 제목 요소의 내용은 브라우저 탭, 즐겨찾기 및 검색 엔진 결과에 표시됩니다. HTML 요소 요소는 현재 문서와 외부 자원 간의 관계를 정의한다. 태그는 외부 스타일 시트에 연결하는 데 가장 많이 사용된다: 이것은 H1 제목이다. 이것은 단락이다 HTML 요소 요소는 일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용된다. 메타데이터는 페이지에 표시되지 않지만 .. 2023. 5. 23. HTML 자바스크립트(Javascript) JavaScript는 HTML 페이지를 보다 역동적이고 상호 작용적으로 만든다. HTML 자바스크립트의 묘미 다음은 JavaScript가 수행할 수 있는 몇 가지 예이다: 나의 처음 자바스크립트 JavaScript는 HTML 요소의 내용을 변경할 수 있습니다: Click Me! 이것은 자바스크립트 예제입니다. 자바스크립트 예제(스타일변경) JavaScript는 HTML 요소의 스타일을 변경할 수 있습니다. Click Me! [Click Me]버튼을 클릭하면, 자바스크립트(요소 스타일 변경) 여기서 JavaScript는 이미지의 src(소스) 속성 값을 변경합니다. Light On Light Off [Light off] 버튼을 클릭했을 때] [Light on] 버튼을 클릭했을 때] HTML JavaScri.. 2023. 5. 22. 이전 1 ··· 26 27 28 29 30 31 32 ··· 39 다음
