정의 블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용 가능 margin 속성을 이용한 가운데 정렬 position 속성을 이용한 좌우 정렬 float 속성을 이용한 좌우 정렬 margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬됨 이때, 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어짐 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 함 position 속성을 이용한 좌우 정렬 절대 위치 지정 방식(absolute position)으로 위한 요소는 정상적인 레이아웃에서 벗어나..
float 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만듦 현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용됨 clear float 속성이 적용된 이후 나타나는 요소들의 동작을 조절함 컨테이너 요소에 float 속성이 적용되면 그 이후 등장하는 모든 요소들은 정확한 위치를 설정하기 어렵기 때문 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 허용하여 이후 등장하는 요소들이 더 이상 float에 영향을 받지 않도록 설정해야 함 clear를 설정하지 않으면 위와 같이 원하는 의도대로 배치되지 않음 overflow float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소가 크면, 해당 요소가 일부 밖으로 흘러넘치게 됨 이때, ov..
정의 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표 HTML 요소가 위치를 결정하는 방식을 설정 (요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표) 요소의 위치를 결정하는 방식은 다음과 같은 4가지 방식이 있음 정적 위치(static position) HTML 요소의 위치를 결정하는 기본값 top, right, bottom, left 속성값에 영향을 받지 않음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식 정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임 상대 위치(relative position) HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식 고..
정의 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 어떻게 보이는지를 결정 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나를 가짐 👉 block 👉 inline 블록(block) display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함 ex. , , , , , , ... 인라인(inline) display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지함 ex. , , , ... display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 ..
CSS란? 정의 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. Cascading Style Sheets의 약자이다. cascade는 '폭포'라는 뜻으로, cascading이란 정의되어 있는 세부적인 정의가 있다면 해당 값을 사용하고, 정의되어 있는 게 없다면 다음의 기본으로 지정되어 있는 것으로 넘어가는 것을 말한다. 웹 사이트의 스타일링 ＊ 우선 순위는 ↓ 이 방향이다. 이 흐름이 바로 cascading! Author style 개발자가 작성한 CSS 파일 ▪️ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인스타일방식 → !important ▪️ cascading의 연결고리를 끊어내는 방법은 !important이지만, 가능하면 쓰지 않는게 좋다. Use..
작성한 코드 및 오류 내역 .itemDesc h1 { font-size: 32px; margin-bottom: 15px; } .itemDesc p { margin: 10px 0; font-size: 14px; color: #737373; } 위 아래로 나란히 있는 h1과 p에게 각각 margin-bottom을 15px, margin top&bottom을 10px씩 부여했다. 그런데 작업한 화면을 검토해보니 코드에 작성한 margin값이 의도대로 적용되지 않고 있었다. 개발자도구로 확인해보니 h1과 p의 margin이 겹쳐져 있는 것을 확인할 수 있었다. 이유는 마진 상쇄(겹침) 현상 때문이었다. 마진 상쇄 현상이란? 마진 상쇄는 어떤 두 개 이상 블록 요소의 위 아래 마진이 겹칠 때, 어느 한쪽의 값만 ..
