반응형 앱 만들기/HTML550 <dl> 태그 예제 , 태그 처럼 리스트를 만들수 있는 태그 가 있습니다. 바로 태그 입니다. 태그는 description list 의 약자로 용어에 대한 설명을 리스트로 표현할 수 있는 태그 입니다. 태그는 내부에 용어의 뜻을 나타내는 와 그 용어의 세부설명인 태그로 구성됩니다. dt : description term. (설명 용어) dd : description data (설명 내용) 으로 시맨택 태그의 본연의 의미를 내포하고 있습니다. 하기는 dl 태그 예제 입니다. A조 AC밀란 맨유 바이른뮌헨 AS로마 B조 레알마드리드 파리생제르망 인터밀란 리버풀 위 예제의 결과 값은 하기와 같습니다. 잘 정돈된 리스트가 탄생되었습니다. dl 태그를 사용하면 용어와 그 단어에 대한 설명을 부연 목록으로 만들 수 있습니다. 태그 예.. 앱 만들기/HTML5 2023. 2. 27. <ul>태그 예제 태그는 unordered list 의 약자로 순서가 없는 리스트를 만듭니다. 예제를 통해서 태그를 확인해 봅니다. 나이키 아디다스 푸마 프로스펙스 결과 값은 하기와 같습니다. 순서가 없기에 순서대신 기호가 붙습니다. 이 기호를 불릿(bullet) 이라고 부릅니다. 블릿 기호는 list-style 속성을 추가하여 변경이 가능합니다. 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 블릿 list-style 속성 - disc : 검정색 원 기호(속성 없을때 기본값) - circle : 흰색원 기호. - square : 사각형 기호. https://soo0100.tistory.com/2123 태그 속성 태그 사용법 태그는 odered list 의 약자로 순서가 있.. 앱 만들기/HTML5 2023. 2. 26. <ol> 태그 속성 태그 사용법 태그는 odered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다. HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 ol 태그를 사용하면 됩니다. 그럼, 실제 예제를 살펴보겠습니다. 나이키 soo0100.tistory.com 지난 시간 살펴본 태그에는 속성 값을 줄 수 있습니다. 속성 값이란 태그의 기본 기능에 부가적인 기능을 추가한다라고 이해하면 됩니다. 예제를 통해서 보면 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 나이키 아디다스 푸마 프로스펙스 태그 내부에 type 이란 속성은 순서를 표현하는 방법이며, start는 그 표현의 몇 번째부터 보이는 가입니다. 결과를 도출해 보면 하기.. 앱 만들기/HTML5 2023. 2. 19. <ol> 태그 사용법 태그는 ordered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다. HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 ol 태그를 사용하면 됩니다. 그럼, 실제 예제를 살펴보겠습니다. 나이키 아디다스 푸마 프로스펙스 내용 부분인 안에 태그를 명시해줍니다. 태그를 만나는 순간 브라우저는 아~순서있는 리스트가 나오겠구나 하고 알게되는 것 입니다. 태그 하부에는 각 리스트 별로 태그 (list 의 약자) 를 배치시킵니다. 순서대로 1 부터 숫자가 붙여지기에 원하는 목차만큼 기재하면 됩니다. 순서가 있는 목록 리스트를 만들기 위해서는 하기 기본 구조를 머리 속에 생각하면 좋겠습니다. 나이키 아디다스 푸마 프로스펙스 태그 사용법 이였습니다. 감사합니다. 태그 속성 태그 사용법 태그는 oder.. 앱 만들기/HTML5 2023. 2. 6. <hr> 태그 예제 태그는 선을 그려 줍니다. 선을 그려줌으로써 문단의 내용 및 주제 변화를 손쉽게 구분하여 나타내 줄 수 있습니다. 이럴때 html 에서는 태그를 사용합니다. hr 은 horizontal rule 의 약자이기도 합니다. 하기 예제를 살펴보겠습니다. 한국 한국의 영어표기는 Republic of Korea 입니다. 동아시아에 위치한 나라로 인구는 약 5174만명 입니다. 독일 독일의 영어표기는 Germarny 입니다. 중앙유럽에 위치한 나라로 인구는 약 8320만명 입니다. 위처럼, 한국과 독일을 구분하기 위해서 태그로 선을 그어 구분합니다. 브라우저에서 확인하면 하기와 같은 결과값을 얻을 수 있습니다. 주제 및 내용의 변화가 생길때 선긋기로 html 문서를 표현하면 됩니다. 태그 예제 였습니다. 감사합니다. 앱 만들기/HTML5 2023. 2. 4. <strong>태그 사용법 html 태그 중 오늘은 strong 태그 입니다. 말그대로 내용 중 강조 하고 싶은 부분을 나타냅니다. 태그를 사용하면 강조하고 싶은 부분을 굵게 볼드 폰트로 표기합니다. 예제 입니다. 태그 연습입니다 예제를 살펴봅시다 P태그 예제 입니다. P태그는 문단을 의미하며 해당 태그 앞뒤로 한줄 띄어쓰기가 들어갑니다. P태그는 열고 닫는 태그가 한쌍으로 구성되어 집니다. 예제를 마무리 합니다. 태그 역시 강조하는 태그 이지만 강조를 이태릭 타입으로 보여 줍니다. 은 굵은 폰트로 보여 줍니다. 결과 화면에서 차이를 살펴 봅니다. 강조된 내용을 굵게 표시하고 싶다면, strong 태그를 사용하시면 됩니다. 그럼, 이태릭 체에 굵게 강조된 표기를 하고 싶다면,,, 태그를 사용합니다. P태그는 문단을 의미하며 이렇게.. 앱 만들기/HTML5 2023. 1. 28. <em> 태그 사용법 태그는 emphasize 의 약자로 '강조하다'는 의미 입니다. 즉, 강조하는 태그 입니다. 강조하는 텍스트를 이태릭체로 옆으로 기울려 표기 합니다. 예제 입니다. p태그 연습입니다 예제를 살펴봅시다 P태그 예제 입니다. P태그는 문단을 의미하며 해당 태그 앞뒤로 한줄 띄어쓰기가 들어갑니다. P태그는 열고 닫는 태그가 한쌍으로 구성되어 집니다. 예제를 마무리 합니다. 태그 사이 강조하고 싶은 부분에 태그를 적용하였습니다. 이태릭 체로 강조하고 싶다면, 'emphasize' 태그를 활용해 보세요. 감사합니다. https://soo0100.tistory.com/2095 태그 예제 HTML 태그 중 태그에 대해서 알아봅니다. br 태그는 줄 바꿈을 해주는 태그 입니다. 하기 예제를 실행 시키면, 태그 안의 글.. 앱 만들기/HTML5 2023. 1. 26. <br>태그 예제 HTML 태그 중 태그에 대해서 알아봅니다. br 태그는 줄 바꿈을 해주는 태그 입니다. 하기 예제를 실행 시키면, 태그 안의 글자들이 한줄로만 보여집니다. (물론 브라우저 창 크기에 맞게 한줄 혹은 여러줄로 보여줍니다.) 하지만, 원하는 위치에서 항상 줄바꿈을 하기를 원한다면, 태그를 사용해야 합니다. p태그 연습입니다 예제를 살펴봅시다 P태그 예제 입니다. P태그는 문단을 의미하며 해당 태그 앞뒤로 한줄 띄어쓰기가 들어갑니다. P태그는 열고 닫는 태그가 한쌍으로 구성되어 집니다. 예제를 마무리 합니다. 위 소스에 태그를 추가해 봅니다. P태그 예제 입니다. P태그는 문단을 의미하며 해당 태그 앞뒤로 한줄 띄어쓰기가 들어갑니다. P태그는 열고 닫는 태그가 한쌍으로 구성되어 집니다. 브라우저 창 크기의 .. 앱 만들기/HTML5 2023. 1. 25. <p>태그 예제 HTML 태그 중 태그에 대해서 알아봅니다. p 태그는 문단을 표현하는 태그 로 영어 paragraph 의 태그 약자이기도 합니다. p태그 연습입니다 예제를 살펴봅시다 P태그 예제 입니다. P태그는 문단을 의미하며 해당 태그 앞뒤로 한줄 띄어쓰기가 들어갑니다. P태그는 열고 닫는 태그가 한쌍으로 구성되어 집니다. 예제를 마무리 합니다. 위 예제처럼, p 태그로 작성된 문단 은 앞뒤에 한줄의 공백이 생깁니다. 즉, 웹브라우저에서 정보 전달시 문단으로서의 역할을 충분히 나타낼 수 있습니다. 하기는 결과 내용 입니다. p태그는 태그처럼 열고 닫는 태그가 한쌍으로 구성되어야 합니다. p태그 예제 였습니다. 감사합니다. 앱 만들기/HTML5 2023. 1. 24. HTML 문서의 기본 구조 HTML 문서는 기본적인 구조를 가지고 있습니다. 예제를 통해 알아보겠습니다. 안녕하세요. 웹 문서 입니다. HTML 은 크게 3가지 태그 로 구분됩니다. 태그 란 기호를 가진 html 의 최소 단위로 html 요소라고도 불리웁니다. 브라우저에서는 태그 안의 값만 실행되거나 표시되게 됩니다. 1. 웹 문서의 처음과 끝을 나타냅니다. 웹 문서의 시작과 끝이기에 해당 태그 사이에 웹문서의 정보와 실제 브라우저에 보여질 구조 및 내용을 코딩하면 됩니다. 위 예제에서 은 해당 웹페이지의 기본 언어가 영어라는 뜻 입니다. lang='kr' 한국어로 설정을 하면, 한글로 검색시 해당 웹페이지가 한글이라는 조건에 맞아 떨어져 검색이 되는 원리입니다. 2. 태그 사이에는 해당 웹 문서의 정보를 브라우저에게 알려줍니다... 앱 만들기/HTML5 2023. 1. 21. 비쥬얼스튜디오 코드 웹문서 실행하기 웹 문서를 만들고 실행하기 위해서는 해당 html 파일을 더블클릭 해야 합니다. 하지만, 에디터에서 바로 실행할 수 있으면 더 편리하겠죠? 비주얼스튜디오 코드에서는 확장 프로그램을 통해서 웹 문서를 바로 실행이 가능합니다. 실행 결과값은 브라우저를 통해서 확인이 가능합니다. Live sever 설치 확장 프로그램의 이름은 바로, Live server입니다. 다운로드해보겠습니다. 비주얼스튜디오 코드 왼쪽 사이드바의 하단 확장아이콘을 선택 후 검색 창에 live로 검색합니다. 첫 번째 Live Server를 설치합니다. 설치가 완료되었습니다. 웹 문서 실행 웹 문서를 실행해봅니다. 작성한 웹문서 에디터 창 혹은 파일에서 오른쪽 마우스 클릭 >> Open with Live Server를 선택합니다. 기본으로 .. 앱 만들기/HTML5 2023. 1. 8. HTML 이란? HTML 이란? Hyper Text Markup Langauge 라는 뜻 입니다. Hyper 는 문서를 연결해준다는 의미이며, 마크업은 표시한다는 뜻 입니다. 즉, 인터넷 상에서 사용되는 웹 문서를 손쉽게 연결해주며, 표시해주는 언어라는 뜻 입니다. 웹페이지는 텍스트 , 이미지, 사운드, 영상 자료등으로 이루어지죠. 이런 모든 리소스들의 표시해준다는 의미 입니다. 웹이페이지를 표시 하기위해서는 태그 라고 불리는 HTML 언어를 사용하여서 페이지를 구성합니다. 예를 들면 하기와 같습니다. h1 이 가장 큰 제목 입니다 h2 두번째로 큰 제목 입니다 h3 세번째로 큰 제목 입니다 h4 네번째 제목 크기 입니다 h5 다섯번째 제목 크기 입니다 h6 가장 작은 제목 크기 입니다 태그로 구성된 웹페이지가 브라우저.. 앱 만들기/HTML5 2023. 1. 3. 이전 1 2 3 4 5 다음 반응형