개발자도전

color : 글자 색을 지정하는 속성 작성법 1 : 색상명(영문) 작성법 2 : 16진수 숫자 ( ex- #fff, #ffffff) 작성법 3 : rgb(255, 255, 255) 작성법 4 : rgba(255, 255, 255, 255) 작성법 5 : hsl(360, 100%, 100%) 작성법 6 : hsla(360, 100%, 100%, 100%, 1) 16진수 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) rgb(빛의 3원색), hsl(색조, 채도, 밝기) rgba, hsla에서 a는 투명도( 0(투명) ~ 1(불투명) ) 6가지의 색 지정 방식은 모든 색상 관련 속성에서 사용 가능 HTML 작성 화면 CSS 작성 화면 1. - 글씨 크기와 굵기 지정 ..

배치 관련 스타일 - 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"는 초록색으로 지정되어 있음