웹사이트에서 흔히 볼 수 있는 검색창. 웹사이트를 만들고 싶은데 검색창은 어떻게 만들까요? 이번 시간에는 input, button 태그를 이용해 검색창을 만드는 방법에 대해 알아보겠습니다. html에는 input 태그가 있습니다. 이 input 태그는 사용자가 입력을 하면 받아들이는 창을 만들어주는 태그인데요. type 속성을 이용해 입력 방식을 바꿀 수 있습니다. 타입 종류에는 여러가지가 있는데요. 오늘은 검색창을 만들어보는 시간이니 텍스트를 입력하는 창을 만들어보겠습니다. 이렇게 input 태그에 type 속성을 텍스트로 주면 result 이렇게 텍스트가 입력되는 창이 뜹니다. 그런데 검색을 할 수 있는 버튼이 없네요. 여기서 태그를 이용해 검색 버튼을 만들어주면 됩니다. search result s..
CSS
css position 속성은 html요소의 위치를 결정합니다. 요소의 위치를 결정하는 방법에는 네가지 방법이 있습니다. 1. static position (정적 위치) static position은 포지션 속성의 기본 값으로 아무것도 설정하지 않았을 때의 값과 같습니다. 왼쪽에서 오른쪽, 위에서 아래로 차례대로 위치됩니다. (top, bottom, left, right 속성에 영향을 받지 않습니다.) 2. relative position (상대 위치) static position을 기준으로 top, bottom, left, right 속성을 이용해 이동하는 속성입니다. 여기서 top은 위로 이동한다는 뜻이 아니라 top:100px 이라면 위에서 100px 만큼 이동한다는 뜻입니다. bottom, lef..
이번 시간에는 HTML 요소들이 가지고 있는 디스플레이 속성에 대해 알아보겠습니다. HTML 요소들은 디스플레이 속성을 지니고 있습니다. 이 속성에 따라 웹에 HTML 요소가 어떻게 표시되는지 결정됩니다. HTML 요소들은 두 가지로 나뉩니다. 하나는 블록 요소(block element), 두 번째는 인라인 요소(inline element)입니다. 1. 블록 요소(block element) 블록 요소는 항상 새로운 줄에서 시작하며 한 줄을 모두 그 요소가 차지합니다. 블록 속성을 가지고 있는 요소의 종류에는 태그, 태그, 태그, 태그 등이 있습니다. (참고 - choirim.tistory.com/5 - HTML 태그(tag) ) 블록 요소 중 태그 글에서 설명하지 못한 태그는 html 요소들을 하나로 묶..
이번 글에서는 css 박스 모델에 대해서 알아보겠습니다.모든 HTML 요소들은 네모난 박스 모양의 영역을 가지고 있습니다. 이 박스는 내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성되어있습니다. 박스의 맨 안쪽에 위치하고 있는 content는 html 요소의 텍스트, 이미지 등 실제 내용이 위치하는 영역입니다. content 영역을 감싸고 있는 padding 영역은 content와 테두리(border)영역 사이의 간격을 나타냅니다. 실제로 눈에 보이지 않고 투명하며 content에 적용한 background-color는 padding영역까지 적용됩니다.border영역은 content를 감싸는 테두리 영역을 의미하며 margin 영역은 border 값 바깥..
이번 글에서는 CSS값을 적용할 때 어떤 값이 우선 순위가 되는지 알아보겠습니다. CSS는 Cascading Style Sheet의 약자입니다. CSS의 맨 앞을 차지하고 있는 Cascading이란 무엇일까요? Cascading이란 계단식, 작은 폭포라는 뜻입니다. 계단식의 작은 폭포에 윗물과 아랫물이 있는 것처럼 CSS에는 우선순위가 있습니다. CSS를 적용할 때 사용되는 태그 선택자, id 선택자, class 선택자, 스타일 속성 등 중에서 어떤 것이 가장 우선으로 적용되는 지 함께 알아봅시다. first 이런 html 문서가 있다고 가정해 봅시다. 첫번째 요소에 태그 선택자, id 값, class 값, 스타일 속성을 한꺼번에 준다면 어떤 속성이 적용될까요? first result first oran..
choirim.tistory.com/11 - CSS란 무엇일까? 저번 글에서 우리는 css의 개념과 css를 적용하는 방법에 대해 알아보았습니다. css 선택자(selector)는 css를 적용시킬 html요소 부분을 의미하였습니다. 이번에는 그 css 선택자(selector)에 대해 자세히 알아보겠습니다. 😀 CSS 선택자(Selector)에는 HTML 태그 선택자뿐만 아니라 다양한 선택자들이 있습니다. 함께 차근차근 알아봅시다. 1. 태그 선택자 저번 글에서 보았듯이 기본적으로 선택자에 html 태그를 넣어주면 html요소에 css가 적용됩니다. h1 { color:red; } 2. 그룹 선택자 여러 선택자를 함께 사용하고 싶을 때는 쉼표( , )를 이용해 적용해주면 됩니다. h1, h2 { colo..
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:..
