전체 글26 [CSS-4] float, clear 1.float 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너 왼쪽이나 오른쪽에 배치되게 한다. none : 기본값, 원래 상태 left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함 right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 div { float: none; float: right; float: left; } 2.clear float 요소 이후에 표시되는 요소가 float을 해제하여 float 요소 아래로 내려가게 할 수 있다. both 쓰면된다. none : 기본값, 아래로 이동되지 않음을 나태는 키워드 left : float이 left인 요소의 아래로 내려가겠다. right : float이 right인 요소의 아래로 내려가겠다. both : fl.. 2023. 5. 30. [CSS-3] 박스모델 (Box-model) 1. 박스 각 영역의 크기를 조정하는 속성 1-1. 기본 속성 콘텐츠 영역 : width, height 안쪽 여백 : padding 바깥쪽 여백 : margin 테두리 : border-width div { width: 100px; height: 100px; padding: 100px; margin: 100px; border-width: 100px; } 1-2. 하위 속성 정의하기 상 하 좌 우 각각 설정가능하다 div { padding-bottom: 100px; padding-top: 100px; padding-left: 100px; padding-right: 100px; } 1-3. 한꺼번에 정의하기 div { margin: 100px 90px; } => 상 100px, 하 90px div { marg.. 2023. 5. 30. [HTML-4] 메타 태그, 뷰포트 1. meta 태그 html 문서에 대한 메타데이터 정의한다. 메타데이터란? 데이터에 대한 데이터, 즉 '정보'를 의미한다 head 태그 안에 들어가며, 일반적으로 문자세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정하는 데 사용된다. 검색엔진이 페이지를 검색할 때 참고할 수 있으므로, 검색 최적화를 위해 사용한다 charset : 문자 세트 http-equiv : 콘텐츠 속성 정보에 대한 http 헤더 name : 문서 정보 content : 메타데이터 내용 2. 뷰포트(viewport) 현재 화면에 보여지고 있는 영역 기기마다 페이지가 다르게 보이는 현상 html5 기본코드 발췌 => 뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 한다! 라는 코드 2023. 5. 30. [HTML-3] 입력요소 1. 입력요소 1-1. input 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(필드), 기본적으로 인라인 요소이며, 단일태그이다. name 식별자를 추가하면 각 입력항목을 이름별로 구분할 수 있다. type 값에 따라 입력 요소나 형태가 달라진다. 주로 사용하는 type은 button,checkbox,date 등등 주가적인 type정보는 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재.. 2023. 5. 30. 이전 1 2 3 4 5 6 7 다음
