본문 바로가기
반응형

앱 만들기/HTML5 study59

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. 두 가지 방법 모두 특정 태그 요소에 스타.. 2023. 7. 25.
HTML <script> 태그 사용법 HTML 결과로는 브라우저 화면에 hello! 라고 텍스트를 출력해줍니다. 태그 의 주요특성 중 하나는 태그 사이에 자바스크립트 코드가 와야 한다는 점 입니다. 태그는 웹 문서 어디든 위치 할수 있으며, 하나의 웹문서 안에서 여러번 사용이 가능합니다. 하지만, 브라우저가 HTML 코드를 읽어들일때 위에서 부터 아래로 한줄씩 읽으면서 분석을 하기때문에 섹션 사이에 코드가 있으면 웹페이지를 로딩하는게 시간이 걸릴 수 있겠습니다. 특이한 상황이 아니라면 종료 태그 전에 삽입하는 것이 좋습니다. 그리고, 웹 문서와 자바스크립트 코드가 혼용이 되면 소스분석 및 유지보수에도 어려움이 생깁니다. 그렇기에 HTML 웹 문서와 자바스크립트 파일을 분리해서 사용하는 것이 좋겠죠. 태그의 src 속성을 활용하여 외부의 자바.. 2023. 7. 24.
HTML onkeydown 이벤트 HTML 웹 문서에서 사용자 행동에 반응하도록 만들어 놓은 것이 바로 이벤트입니다. 예를 들자면 마우스를 클릭한다던지 키를 누르는 동작 등등 말이죠. 이번 시간은 그중 키를 눌렀을 때 반응하는 onkeydown 이벤트에 대해서 알아봅니다. onkeydown Event 유저가 키를 눌렀을때 발생하는 이벤트입니다. 문법은 하기와 같습니다. onkeydown 속성값으로 자바스크립트 코드가 와야 합니다. 규칙입니다. HTML과 자바스크립트가 연결되는 가장 기본적인 구조라고 할 수 있습니다. 웹페이지에서 하나의 요소에 이벤트가 발생했을 때 자바스크립트 코드가 실행된다 는 것입니다. 빈 텍스트 박스에 키를 입력하면 팝업창이 보이는 예제를 만들어 봅니다. 코드입니다. 주요한 부분은 input 태그 내 onkeydow.. 2023. 7. 22.
HTML 태그 구조 태그 구조 HTML 은 다음과 같은 일반적인 구조를 가집니다. 내용 입니다 태그의 구조를 세부적으로 살펴보면 하기와 같습니다. : 시작태그 div : 태그 이름 class="note" : 속성 class : 속성 이름 "contens" : 속성 값 내용입니다 : 콘텐츠 : 종료태그 내용 입니다 전체는 html 요소 라고 불리우며, 해당 구문은 div 요소 입니다. 태그와 요소는 엄밀히 말하면 다릅니다. 태그는 등의 태그를 의미하며, 요소는 콘텐츠를 포함한 태그 전체를 뜻합니다. 태그 구조에 대해서 알아보았습니다. 감사합니다. 2023. 7. 3.
HTML 태그 와 속성 이란? 태그 란 HTML의 기본 문법은 하기와 같습니다. 내용 예를 들어보면 하기처럼 표기할 수 있습니다 hello 은 시작 태그라 부르며 는 종료 태그 라고 부릅니다. 태그 사이의 값은 "내용", "content"라고 불립니다. 태그는 기본적으로 시작 태그와 종료 태그 그리고 중간의 내용으로 구성되어 있으며, 이 덩어리를 요소(element)라고 합니다. 태그 중에는 닫힌 태그가 없는 비어있는 태그도 있습니다. 예를 들면, 등등이 있습니다. 닫힌 태그가 없는 대신 마지막 부분에 / 를 적어도 되고 적지 않아도 됩니다. 이렇게 적어도 되고 안 적어도 되는 자유로운 방식은 html5 버전부터 적용되기 시작했습니다. 속성 태그는 태그자체의 기능이 있습니다. 태그는 가장 큰 제목 크기를 설정하며 h6 은 가장 작은 .. 2023. 5. 31.
embed 태그 로 멀티미디어 파일 불러오기 embed 태그는 멀티미디어 파일들을 불어올 수 있습니다. HTML 초기 버전부터 사용되어 왔기에 video, audio 태그를 지원하지 않는 브라우저의 경우 embed 파일을 사용하여 멀티미디어 파일을 로드 할 수 있습니다. embed 예제 입니다. Embedded Tag This is an example of using the tag to include an image in an HTML document: src 속성을 사용하여 로드 할 멀티미디어 파일 경로를 지정 합니다. width, height 속성으로 너비와 높이를 설정 할수 있습니다. 하나만 적으면 상대적으로 자동 비율로 맞추어 집니다. % 를 적지 않을때는 pixel 로 인식합니다. 결과는 위와 같이 나옵니다. video 및 .. 2023. 5. 9.
<ins> , <del>태그 예제 웹 페이지에서 특정 글자를 추가 했다는 의미 와 특정 글자를 삭제 했다는 것을 표현하고 싶을때 , 태그를 사용할 수 있습니다. 위 처럼, 강아지 라는 글자가 새롭게 들어가서 강조됨을 나타내고 자 할때 태그를 사용하며 브라우저에서는 밑줄로 새로 들어간 글자이며 강조한다는 의미로 밑줄을 그어 줍니다. 위 코드의 예제는 하기와 같습니다. 고양이는 일반적으로 매우 귀엽습니다. 그러나 강아지도 매우 귀여울 수 있습니다! 추가로, 태그는 태그와 같이 사용될 수도 있습니다. 태그는 삭제된 텍스트를 의미 합니다. 태그와 같이 사용한다면 특정 글자는 삭제되고, 특정 글자는 삽입 된다는 표현을 웹페이지 에 할 수 있습니다. 예를 들면 하기와 같습니다. 예전에는 순대국밥을 좋아했지만, 이제는 김치찌개를 더 좋아합니다. 로 .. 2023. 5. 4.
인용문을 나타내는 태그 인용문을 나타내는 태그는 입니다. quote 는 "인용하다" 라는 뜻입니다. 인용문을 나타내는 태그 예제를 만들어 봅니다. 인용문을 나타내는 blockquote 예제 만들기 "생각하는 것은 그것이 있어야 한다." - Descartes Descartes 위 코드의 결과값은 하기와 같습니다. 태그를 사용하면, 인용문을 나타낼 수 있습니다. 인용문을 표시하기 위해서 들여쓰기 와 글꼴을 조금 작게하여 표기해줍니다. 태그를 내부에 사용하면 인용문의 출처를 나타내는데 사용할 수 있습니다. 티스토리 편집 기능에서 보이는 하기 인용문 바로 이 태그를 사용하고 있답니다 오늘은 인용태그 인 예제를 만들어보았습니다. 감사합니다. 2023. 5. 3.
드롭다운 리스트 태그 하기와 같은 드롭다운 리스트 를 만들어 보겠습니다. 드롭다운 을 만들어주는 태그는 바로 입니다. 소스를 구현해 봅니다. 좋아하는 색상을 선택하세요: 빨간색 초록색 파란색 노란색 태그로 리스트를 감싸 주며, 리스트 항목들은 태그를 사용 합니다. 사용자가 선택한 옵션은 name 속성에 지정된 값으로 서버로 전송 됩니다. 이상 드롭다운 목록을 태그로 만들어 보았습니다. 감사합니다. 2023. 5. 2.
반응형

티스토리툴바