본문 바로가기

HTML/HTML 기본문법77

HTML 반응형 웹 디자인 반응형 웹 디자인은 모든 기기에 잘 어울리는 웹 페이지를 만드는 것이다! 반응형 웹 디자인은 다양한 화면 크기와 뷰포트에 따라 자동으로 조정된다. Response Web Design은 HTML 및 CSS를 사용하여 웹 사이트의 크기를 자동으로 조정, 숨기기, 축소 또는 확대하여 모든 장치(데스크탑, 태블릿 및 전화기)에서 보기 좋게 만드는 것이다: 뷰포트 설정(Setting the Viewport) 응답성 있는 웹 사이트를 만들려면 모든 웹 페이지에 다음 태그를 추가한다: 페이지의 뷰포트를 설정하면 페이지의 크기와 크기 조정을 제어하는 방법에 대한 지침이 브라우저에 제공된다. 다음은 뷰포트 메타 태그가 없는 웹 페이지와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예이다: 팁: 스마트폰이나 태블릿에서 이.. 2023. 5. 26.
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.

티스토리툴바