본문 바로가기
반응형

HTML31

[HTML] input tag 사용하기 안녕하세요 냥장판 입니다 지난 게시글에서는 label 태그에 대해서 알아봤어요! 2020/04/09 - [놀고있네/HTML & CSS] - [HTML] label 태그 사용하기 [HTML] label 태그 사용하기 안녕하세요 냥장판 입니다 아주 오랜만에 포스팅하네요 😥( 그동안 너무 바빠서 포스팅을 게을리했네요..) 이번 게시글에서는 label 태그에 대해서 알아보려고 합니다. 1. label 태그란 label 태그는 인터페이스.. miaow-miaow.tistory.com 이번 게시글에서는 input 태그에 대해서 알아보려고 합니다. Input 태그는 form 태그 안에 사용되고, 사용자와의 상호작용을 가능하게 하는 태그에요. form 안에서 사용할 때 양식은 아래와 같고요. 체크박스가 id를 가지고있.. 2021. 12. 7.
[JS] HTML에서 JavaScript 분리하기 안녕하세요 냥장판 입니다 다른 일 하느라고 정말 진도가 안나가네요 😥 2주 내로 자바스크립트 끝내려고했는데... 허허허 이제 짬내서 열심히 해보도록 할게요 하하하하하하하 😁 완전 기초적인 것부터 시작해보려고 합니다! 이번 게시글에서는 HTML에서 JavaScript를 분리하는 것을 해볼거에요. 이렇게 하는 이유는 관리를 원활히 하려는 목적이 강해요. 아주 간단합니다! 1. JavaScript 파일 만들기 저는 example.js 로 된 파일에 간단한 스크립트를 작성해뒀어요. 2. script 태그에 src 사용하기 script 태그에 src를 사용할 거에요. 여기에 아까 만들었던 javascript 의 경로를 입력해줍니다. 소스코드는 아래와 같아요. 그럼 이렇게 바로 javascript가 호출되는 것을 .. 2020. 4. 21.
[HTML] label 태그 사용하기 안녕하세요 냥장판 입니다 아주 오랜만에 포스팅하네요 😥(그동안 너무 바빠서 포스팅을 게을리했네요..) 이번 게시글에서는 label 태그에 대해서 알아보려고 합니다. 1. label 태그란 label 태그는 인터페이스 요소에 이름을 명시하고 싶을때 사용해요. 이름을 명시하고 싶다는 말이 label을 단다는 말과 동일하다고 보면됩니다. textarea, button, checkbox 인터페이스에 사용할 수 있어요! style="display:inline-block;width:740px;height:200px" data-ad-client="ca-pub-9512983930357661" data-ad-slot="5785466884"> 2. label 사용방법 label은 input 태그와 주로 같이 사용해요. t.. 2020. 4. 9.
[JS] JavaScript 출력하기 - alert 메소드 안녕하세요 냥장판 입니다 지난 게시글에서는 JavaScript에서 사용하는 출력 메소드에 대해 알아보았는데요. 2020/03/13 - [놀고있네/Javascript] - [JS] JavaScript 사용하기 [JS] JavaScript 사용하기 목표: JavaScript 사용하기 - 기본편 요약: HTML 문서에서 JavaScript 출력하기 외부에 있는 JavaScript 파일 호출하기 안녕하세요 냥장판 입니다 지난 게시글에서는 JavaScript를 사용하는 이유에 대해서 살펴봤.. miaow-miaow.tistory.com 이번 게시글에서는 가장 간단하게 데이터를 출력할 수 있는 window.alert() 메소드에 대해서 알아보겠습니다! 1. alert() 메소드 사용하기 JS를 작성하는 방법은 HT.. 2020. 3. 30.
[JS] JavaScript 란 안녕하세요 냥장판 입니다 HTML과 CSS를 하다보면 JavaScript 라는 용어가 튀어나올 거에요. 이번 게시글에서는 JavaScript가 무엇이고 왜 사용하는지 알아볼거에요! 다 모르겠다고 하시면! HTML에 대한 설명은 아래 게시글 참고하시고요 2019/11/19 - [놀고있네/HTML & CSS] - [HTML] HTML 이란 [HTML] HTML 이란 HTML 이란 HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)로 웹 페이지를 동작시키기 위한 언어이다. 더보기 마크업 언어(markup language)는 태그(tag) 등을 이용하여 문서나 데이터의 구조를 규.. miaow-miaow.tistory.com CSS에 대한 설명은 아래 게시글 참고하시면 되요. 2.. 2020. 3. 9.
[CSS] Box Model - Block, Inline 개념 이해하기 안녕하세요 냥장판 입니다 이번 게시글에서는 CSS에서 가장 많이 사용되는 레이아웃 개념인 Box Model 에 대해 알아보기 전에! Display의 기본 개념인 Block, Inline에 대해서 알아볼게요 Display의 기본 개념 - Block, Inline 이전에 제가 다뤘던 display 요소라는 HTML 포스트가 있어요. 여기도 마찬가지로 block과 inline에 대한 내용을 다룹니다. 자세한 내용은 아래 게시글 참고하시고요. 2020/01/17 - [놀고있네/HTML & CSS] - [HTML] display 요소(p, div, span)의 차이점 [HTML] display 요소(p, div, span)의 차이점 목표: p, div, span 등의 차이점 요약 Display 요소의 특징(blo.. 2020. 1. 30.
[CSS] CSS 선택자 사용법 안녕하세요 냥장판 입니다 CSS는 HTML과 같은 마크업언어의 디자인을 위한 언어에요. CSS도 기본 문법이 존재하고, 그 문법을 기반으로 HTML과 연결됩니다. 이번 게시글에서는 선택자를 사용하는 방법에 대해서 알려드릴게요. 1. 선택자 사용 방법 기본 개념은 HTML의 태그 값을 선택자에 가져다가 쓰는 거죠. 이 선택자를 어떻게 가져오는지에 따라 사용 방법이 달라요. 선택자를 사용하는 방법은 크게 4가지입니다. HTML 태그/요소 그룹(group) 아이디(id) 클래스(class) style="display:inline-block;width:740px;height:200px" data-ad-client="ca-pub-9512983930357661" data-ad-slot="5785466884"> 2... 2020. 1. 22.
[CSS] CSS 기본 문법, 사용방법 안녕하세요 냥장판 입니다 앞에서 CSS 개념에 대해 배웠었죠 이번 게시글에서는 CSS 문법에 대해서 살펴볼거에요. 1. CSS 기본 구조 CSS는 선택자(selector)와 선언부(declaratives)로 구성됩니다. 선택자는 CSS를 적용하고자 하는 HTML Tag/elements가 오고요 선언부는 중괄호({ })안에 위치하고, 선언들은 세미콜론(;)으로 구분합니다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다. style=".. 2020. 1. 21.
[CSS] CSS를 사용하는 이유 안녕하세요 냥장판 입니다 이번 게시글은 CSS에 대한 아주 기초적인 지식에 대해 다룰거에요. HTML을 다루다보면, CSS stylesheet 라는 말을 들어본적이 있을겁니다. CSS는 왜 사용하며, 어떻게 사용하는지 살펴볼게요. 1. CSS란 CSS는 Cascading Style Sheets의 약자로 종속형 스타일 시트, 캐스케이딩 스타일 시트 라고 불립니다. 마크업 언어(XML, HTML 등)의 레이아웃과 스타일을 나타내는 언어에요. 우리의 맨얼굴과 맨몸뚱아리를 HTML이라고 한다면 화장하고, 옷입고, 악세사리하는 모든 꾸며주는 것들을 CSS라고 생각하면되요. 안꾸미고 나가도 되죠. HTML문만 있어도 된다는 말입니다. 꾸미고 나가나요? 그럼 CSS를 입고 나간다는 말이에요. W3C(World Wid.. 2020. 1. 20.
반응형

티스토리툴바