본문 바로가기

전체 글109

display 목차 1. 문법사용 2. 속성값 display 속성은 브라우저에 요소가 어떻게 보여지는지를 결정하는 스타일 요소다. 각각의 요소의 display 속성을 갖고 있으나 필요에 따라 변경할 수 있다. 어떻게 바꿀수 있는지 알아보도록 하자. 1. 사용문법 1 ) 스타일 태그에서 선택자로 스타일 지정 2 ) 요소에 직접 스타일 지정 두 방법 다 스타일은 지정되지만 두번째 방법은 여러 요소가 있을 때 코드가 지저분해보이고 관리가 어려울 수 있어 첫번째 방법을 추천한다. 2-1. 속성값 : block 블록형 태그로 변환하는 속성 기존 inline형 요소를 영역의 크기를 지정하기 위해 사용한다. 인라인1 인라인2 span이라는 인라인 속성을 가진 요소가 display스타일 속성을 block으로 설정해보았다. 인라인 속.. 2024. 4. 12.
input태그 목차 1. input 태그란 2. 다양한 타입들 1. input 태그란 사용자가 원하는 데이터를 입력하기 위한 태그 설정하는 타입에 따라 용도와 사용방법이 다름 2. 다양한 타입들 1) text 일반적인 문자를 입력하는 타입으로 다양한 내용의 입력을 받는 용돌로 사용된다. HTML 삽입 미리보기할 수 없는 소스 2) password 패드워드 같이 보안에 관련된 사항을 입력할 때 사용된다. 텍스트가 특수문자로 치환되어 보인다. HTML 삽입 미리보기할 수 없는 소스 3) 라디오버튼 여러 선택지 중 하나만 선택을 하기 위한 버튼이다. HTML 삽입 미리보기할 수 없는 소스 4) 체크박스 여러 선택지 중 다중 선택이 가능한 버튼이다. HTML 삽입 미리보기할 수 없는 소스 5) date 달력모양의 선택 버튼을.. 2024. 4. 11.
인라인형 태그 1. 인라인형 태그란 블록형 태그는 가로 축 영역을 전부 사용하였다면 인라인형은 자신이 가지고 있는 내용의 크기만큼만 영역을 차지한다. 2.자주 사용하는 태그 1) - 다용도로 사용되는 인라인 속성 태그다. 2) - 특정 페이지나 사이트로 이동할 때 사용하는 태그다. - src 속성을 사용하여 이동할 페이지의 경로나 사이트의 주소를 작성하여준다. 3) - 새로운 라인을 사용할때 사용하는 태그로 enter키를 사용하는 것과 같은 의미를 지닌다. 4) - 사용자의 특정한 입력을 위한 태그로 여러 형태가 있다. 5) - 주로 input태그와 같이 사용되어 어떤 내용이 입력되어야 하는지 표시할 때 사용된다. - for속성을 통해 input의 id 속성과 매칭되어 라벨태그로 표시된 텍스트를 클릭했을 때 input.. 2024. 4. 7.
블록형 태그 웹 문서를 만들 때 태그를 사용하여 여러 요소를 표시한다. 그 태그들이 가진 기본적인 속성 블록형에 대해 알아보기로 한다. 1. 블록형 태그 - 블록형 태그는 기본적으로 웹 문서의 가로 축전체를 차지한다. 위 container1(파란박스)이 가진 스타일을 보면 가로의 길이(width)를 지정해주지 않았지만 한 가로축의 길이를 모두 차지하여 다음 빨간 박스가 파란박스 밑에 위치하게 된다. 그래서 특정 요소들을 묶어 다른 요소와 구분하는데 주로 사용된다. 2. 자주 사용하는 블록 태그 1) 2) ,, 3) 4) 5) 6) 3. 참고사항 블록형은 기본적으로 가로축을 다 차지하기 때문에 다음 요소가 밑으로 내려간다고 했다. 그렇다면 가로의 길이를 제한한다면 다음 요소가 밑이 아닌 옆으로 위치하지않을까? 위 이미.. 2024. 4. 7.

티스토리툴바