웹사이트에서 흔히 볼 수 있는 검색창. 웹사이트를 만들고 싶은데 검색창은 어떻게 만들까요? 이번 시간에는 input, button 태그를 이용해 검색창을 만드는 방법에 대해 알아보겠습니다. html에는 input 태그가 있습니다. 이 input 태그는 사용자가 입력을 하면 받아들이는 창을 만들어주는 태그인데요. type 속성을 이용해 입력 방식을 바꿀 수 있습니다. 타입 종류에는 여러가지가 있는데요. 오늘은 검색창을 만들어보는 시간이니 텍스트를 입력하는 창을 만들어보겠습니다. 이렇게 input 태그에 type 속성을 텍스트로 주면 result 이렇게 텍스트가 입력되는 창이 뜹니다. 그런데 검색을 할 수 있는 버튼이 없네요. 여기서 태그를 이용해 검색 버튼을 만들어주면 됩니다. search result s..
css
이번 시간에는 HTML 요소들이 가지고 있는 디스플레이 속성에 대해 알아보겠습니다. HTML 요소들은 디스플레이 속성을 지니고 있습니다. 이 속성에 따라 웹에 HTML 요소가 어떻게 표시되는지 결정됩니다. HTML 요소들은 두 가지로 나뉩니다. 하나는 블록 요소(block element), 두 번째는 인라인 요소(inline element)입니다. 1. 블록 요소(block element) 블록 요소는 항상 새로운 줄에서 시작하며 한 줄을 모두 그 요소가 차지합니다. 블록 속성을 가지고 있는 요소의 종류에는 태그, 태그, 태그, 태그 등이 있습니다. (참고 - choirim.tistory.com/5 - HTML 태그(tag) ) 블록 요소 중 태그 글에서 설명하지 못한 태그는 html 요소들을 하나로 묶..
이번 글에서는 CSS값을 적용할 때 어떤 값이 우선 순위가 되는지 알아보겠습니다. CSS는 Cascading Style Sheet의 약자입니다. CSS의 맨 앞을 차지하고 있는 Cascading이란 무엇일까요? Cascading이란 계단식, 작은 폭포라는 뜻입니다. 계단식의 작은 폭포에 윗물과 아랫물이 있는 것처럼 CSS에는 우선순위가 있습니다. CSS를 적용할 때 사용되는 태그 선택자, id 선택자, class 선택자, 스타일 속성 등 중에서 어떤 것이 가장 우선으로 적용되는 지 함께 알아봅시다. first 이런 html 문서가 있다고 가정해 봅시다. 첫번째 요소에 태그 선택자, id 값, class 값, 스타일 속성을 한꺼번에 준다면 어떤 속성이 적용될까요? first result first oran..
html과 자주 같이 언급되는 css! 이번 시간에는 css에 대한 궁금증을 해결해보겠습니다. css란 무엇일까요? choirim.tistory.com/category/HTML - CSS를 공부하기 전 알아야 할 HTML HTML은 웹페이지를 구성하는 가장 기본적인 언어였습니다. HTML를 이용해 웹페이지를 만든 사람들은 그 페이지가 디자인적으로도 예쁘길 바랬습니다. 그걸 만족시켜주는 것이 바로 CSS입니다. 밑의 html 문서를 웹 페이지에 띄운다고 가정해보겠습니다. css란 무엇인가 css의 개념 css는 과연 무엇일까요. result css란 무엇인가 css의 개념 css란 과연 무엇일까요. 그런데 제목을 빨간색으로 바꾸고 싶어 졌습니다. 그때 css를 이용하면 됩니다. ex) h1 { color:..
