개발자도전

배치 관련 스타일 - position position : relative; 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성 사용 가능 position : absolute; 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치. position : fix; 항상 고정된 위치에 요소를 배치 화면이 움직여도 항상 같은 위치에 위치함. ex) 홈페이지 배너나 맨 위로 올리는 버튼 position : sticky; 요소가 보여지는 화면을 벗어났을 때 스티커 처럼 화면에 붙여서 고정된 위치를 가지게 만듦. fixed의 응용 버전 HTML 작성 화면 CSS 작성 화면 - po..

float를 이용한 2분할 block 형태인 div 태그를 float를 이용해 나란히 배치되도록 설정 HTML 작성 화면 - class의 bg-2 , bg-3은 background-color 지정해준것 CSS 작성 화면 웹에서 출력된 화면 - block 형식이지만 float: left 라 왼쪽부터 차례로 정렬이 됨. 4분할 하기 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면

float(뜨다, 띄우다, 흐르다) 요소를 띄워서 좌/우로 정렬하는 속성 clear float로 인해 띄워져 있는 상태를 해제하는 속성 float 사용 시 겹치는 문제가 발생하는데 이를 해결할 때 사용 HTML 작성 화면 - float : left 적용 CSS 작성 화면 웹페이지에 출력된 화면 float를 right로 설정하게 되면 오른쪽부터 차례대로 요소가 쌓이게 된다.

모든 html 요소는 content, padding, border, margin 총 4가지의 영역으로 구성되어 있다. content 요소의 내용이 작성되어지는 영역 시작, 종료 태그 사이에 작성되는 내용이 출력되는 영역 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 - content 영역의 사이즈를 키워서 출력된 화면 크기도 커짐 padding content와 border 사이의 영역 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 border, padding, margin은 상 하 좌 우 각각의 방향에 따라 별도의 스타일 지정이 가능하다. ex) padding을 별도의 스타일로 지정하고 싶다면 padding-top : CSS 코드 작성; padding-right : CSS 코드 작성..

원형으로 모양을 만들기 위해 CSS에서 border-radius로 작성해주기 그냥 작성 시 원형 모양으로 색이 칠해지는 것이 아니라서 overflow: hidden으로 넘치는 부분은 숨겨줌 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 - class="area3"은 노란색으로 class="area4"는 초록색으로 지정되어 있음

상하 분할 상하 분할 시 필요한 요소들 감싸고 있는 영역 요소 내부를 분할할 요소 display : block 크기 지정 단위(px, %) HTML 작성 화면 - 상하 2분할 CSS 코드 작성 웹에서 출력된 화면 HTML에서 작성된 화면 - 상하 3분할 CSS 작성 화면 웹에서 출력된 화면 좌우 분할 좌우 분할 시 필요한 요소들 감싸고 있는 영역 요소 내부를 분할할 요소 dispaly : inline-block 크기 지정 단위(px, %) HTML 작성 화면 - 좌우 2분할 CSS 작성 화면 웹에서 출력된 화면 - class="area3"에는 노란색 배경색 class="area4"에는 초록색 배경색이 지정되어 있음. display: none / dispaly: hidden 화면에 요소가 표시되지 않으나 ..