반응형 앱 만들기/HTML5 study59 <pre> 태그 사용법 pre 태그를 사용하면,br 태그를 사용하지 않더라도 줄 바꿈을 할 수 있다. 안녕하세요. 감사합니다. 좋은하루보내세요. 위와 같이 pre 태그 안 콘텐츠 값으로 3줄의 텍스트를 입력했다.원래는 태그를 사용해서 줄 바꿈을 해야 했지만pre 태그를 사용하면 에디터에서 엔터로 입력했던 라인들이 줄바꿈이 된다.편리한 기능이다.브라우저에서 결과를 확인 해보면 정상적으로 줄 바꿈이 되어있는 것을 볼 수 있다.Good! 앱 만들기/HTML5 study 2024. 8. 28. 10-1강. 하이퍼링크 두개 페이지 이동하기 하이퍼링크를 사용해서 두 개의 페이지를 서로 이동해 본다.첫 번째 웹페이지에 하이퍼링크를 만든다. To B page a 태그의 href 속성값으로 두 번째 웹페이지의 주소를 적는다.웹페이지의 저장위치가 같은 곳일 경우 파일명만 적어도 된다. To A page 두 번째 페이지에서도 a 요소를 작성하고,필수 속성값으로 첫 번째 페이지의 파일명을 기재한다. 브라우저에서 확인해보면, 정상적으로 두 페이지가 서로 왕래 가능해진다.간단하지만 두 개의 페이지가 서로 링크 가능한 웹 사이트가 만들어진 것이다.웹 사이트는 이렇게 만들어진다. 앱 만들기/HTML5 study 2024. 7. 4. 10강. 하이퍼링크 만들기 9강. CSS 클래스 선택자 사용방법8-2강. CSS 테두리 와 마진, 패딩 속성 사용방법테두리 설정 방법을 먼저 알아보자div 요소는 이미 크기와 배경색상을 설정한 상태이다.1. 테두리 설정하기테두리 설정을 위한 CSS 속성은 border 이soo0100.tistory.com 웹 사이트는 많은 웹 페이지들로 연결되어 있다.특정 이미지나 텍스트를 클릭하면 새로운 페이지가 열리는 동작을 하이퍼링크 라고 말한다.HTML a태그 가 바로 이 하이퍼링크 기능르 수행한다. 열림 태그와 닫힘 태그로 구성되어 있고,href : 이동할 웹페이지 URL(주소) 필수 속성을 가진다. 구글페이지로 이동 예제에서는 href 속성값으로 구글 홈페이지를 적어준다.a 태그의 콘텐츠 영역에는 하이퍼링크 텍스트 로 보여질.. 앱 만들기/HTML5 study 2024. 7. 3. 6강. div 태그 사용방법 5강 img 태그 사용법4강. br 태그 사용법3강. P 태그 사용법2강. HTML 태그란 무엇일까?HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. 시작되는 태그 를 start tag(시작 태그) 닫히는 태soo0100.tistory.com div 태그는 웹 페이지의 내용들의 구역을 나누는 역할을 한다.그렇기에 div 태그 자체의 시각적인 기능은 없다.div 태그는 열림태그 닫힘태그로 구성되어있다. HTML을 처음 접하고 HTML태그만 사용할때는 div 태그를 굳이 왜 써야 하는지 모를 수 있다. 당연히 시각적으로 나타나는 것이 없으니.CSS와 접목이 되면 특정 구역에만 CSS를 활용한 스타일을 적용할거나 JS(자바스크립트) 로 특정 구역을 컨트롤 할때도유용.. 앱 만들기/HTML5 study 2024. 6. 26. 5강 img 태그 사용법 4강. br 태그 사용법3강. P 태그 사용법2강. HTML 태그란 무엇일까?HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. 시작되는 태그 를 start tag(시작 태그) 닫히는 태그를 end tag (닫힘soo0100.tistory.com img 태그는 웹페이지에 이미지를 나오게 한다.이미지는 로컬(컴퓨터)에 저장된 이미지 뿐 아니라 인터넷에 저장된 이미지도 호출 할 수 있다.img 태그의 주요 속성으로는 src , alt 가 있다(* 속성 : 속성이란 웹 페이지에 넣을 요소(element)에 관한 정보들을 브라우저에게 알려주는 방법이다 img 태그의 주요 속성이라 하면 이미지 위치와 이미지에 대한 설명이다.)s.. 앱 만들기/HTML5 study 2024. 6. 23. 4강. br 태그 사용법 3강. P 태그 사용법2강. HTML 태그란 무엇일까?HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. 시작되는 태그 를 start tag(시작 태그) 닫히는 태그를 end tag (닫힘 태그)라고 부른다.soo0100.tistory.com br 태그는 한줄 띄울때 사용한다.에디터에서 한줄을 띄운다고 해서 브라우저에 한줄이 띄워지지는 않는다.에디터에서 엔터를 쳐서 문단 내용을 줄 바꿈 한 예제이다. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. T.. 앱 만들기/HTML5 study 2024. 6. 21. 3강. P 태그 사용법 2강. HTML 태그란 무엇일까?HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. 시작되는 태그 를 start tag(시작 태그) 닫히는 태그를 end tag (닫힘 태그)라고 부른다.이 두 태그 사이에 적히는soo0100.tistory.com P 태그는 문단을 만든다.P 태그는 열림태그 와 닫힘 태그 로 구성된다.하기 예제에서는 두개의 P태그 요소가 있다. Here is a Pharase. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 문단이기에브라우저에서 실행하면 문단 사이에는 한줄의 공백이 생긴다. 4강. br 태그 사용법3강. P 태그 사용법2강. HTM.. 앱 만들기/HTML5 study 2024. 6. 20. 2강. HTML 태그란 무엇일까? 1강 HTML 기본구조하기는 가장 기본적인 구조를 가진 HTML 웹 페이지 이다. Here is a Pharase. 은 html 버전이 html5 라는 것을 알려준다. 은 웹 페이지 문서의 가장 큰 기본 뼈대이고, 이 태그 안에 모든 내용을 담는다. soo0100.tistory.com HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. 시작되는 태그 를 start tag(시작 태그) 닫히는 태그를 end tag (닫힘 태그)라고 부른다.이 두 태그 사이에 적히는 text 내용을 content 라고 한다.콘텐츠 이 모두를 가리켜 Element(요소) 라고 부른다. 해당 내용을 몰라도 코딩을 하고 앱을 만드는 데 문제가 없지만API 문서나 웹에서 이야기 할때 용.. 앱 만들기/HTML5 study 2024. 6. 17. 1강 HTML 기본구조 하기는 가장 기본적인 구조를 가진 HTML 웹 페이지 이다. Here is a Pharase. 은 html 버전이 html5 라는 것을 알려준다. 은 웹 페이지 문서의 가장 큰 기본 뼈대이고, 이 태그 안에 모든 내용을 담는다. 사이에는 웹페이지에는 보이지 않지만 해당 웹 페이지가 가질 수 있는 특성(정보)을 적어준다. 태그는 2강. HTML 태그란 무엇일까?HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다. 시작되는 태그 를 start tag(시작 태그) 닫히는 태그를 end tag (닫힘 태그)라고 부른다.이 두 태그 사이에 적히는soo0100.tistory.com 앱 만들기/HTML5 study 2024. 6. 16. HTML <style>태그 와 style 속성 HTML 태그와 style 속성은 둘 다 모두 CSS를 특정 html요소에 적용하기 위해서 사용됩니다. 즉, HTML 과 CSS를 연결시켜 주는 개념입니다. 먼저 태그를 알아봅시다. 태그 A heading A paragraph. head 태그 사이에 body 에서 사용되는 h1, p 요소를 선택자를 사용해서 스타일을 설정합니다. 여기서는 텍스트 색상을 빨강과 파랑으로 설정했습니다. 하기 결과처럼, 태그를 사용하면 특정 html 요소 부분에 스타일을 적용할 수 있습니다. style 속성 이번에는 style 속성을 사용해서 동일한 결과를 만들어 봅니다. html 태그 내부의 inline 스타일로 적용했습니다. 결과는 동일합니다. A heading paragraph. 두 가지 방법 모두 특정 태그 요소에 스타.. 앱 만들기/HTML5 study 2023. 7. 25. 이전 1 2 3 4 ··· 6 다음 반응형