Knowledge/HTML & CSS7 [CSS-5] position 1. position 문서 상에 요소를 배치하는 방법을 정의. 이 후에 상하좌우 설정을 한다. static : 기본값, 일반적인 문서 흐름 1-1. relative 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치값에 따라 오프셋을 적용 div { position: relative; top: 100px; left: 100px; } => 원래 위치보다 위에서부터 100px, 왼쪽에서부터 100px 떨어져 있어라! 1-2. absolute 일반적인 문서 흐름에서 제거하고, 상위 요소 중에서 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용한다. div { position: absolute; top: 100px; left: 100px; } => 상위 요소를 기준으로 위로 100px, 왼쪽.. 2023. 5. 30. [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. 이전 1 2 다음
