프로그래밍/HTML5 썸네일형 리스트형 px태그 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. px태그로 글자 크기를 조절할 수 있다. 숫자크기를 자세히 조절할 수 있다. 더보기 em태그 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. em으로 글자 크기를 조절할수있다. 0.5 -> 0.5배 1.0 -> 1배 1.5 -> 1.5배 2.0 -> 2배 더보기 %태그 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. %로 글씨 크기를 조절할 수 있다 100% 기본크기 150% 1.5배 크기 200% 2배 크기 더보기 배경색상 Lorem ipsum dolor sit amet, consectetur adipiscing elit. H2O, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. color: rgba(255,255,255,1); r:red값 g:green값 b:blue값 a:투명도값 0투명 1불투명 font-size:100% 글자크기 태그 font-size:1.0em font-size:16px 더보기 radius Lorem ipsum dolor sit amet consectetur adipiscing elit. border-width: thick 선의 두께 지정 border-style: dashed 선의 종류를 지정 예:solid는 실선 border-color: black 선의 색상을 지정 border-radius: 20px 20px 0 0; 순서대로 왼쪽 위부터 시계방향으로 더보기 padding,margin 나쁜놈들 착한놈들 width,height: 영역의 넓이를 조절한다. border: 테두리의 두께를 지정 border-style: 선의 스타일을 지정 -> solid는 실선 dashed는 점선 border-color: 선의 색상을 지정 rgba: red 빨강 green 초록 blue 파랑 a->투명도 padding: 테두리와 글자 사이의 간격을 지정 margin: 테두리와 다른 태그와의 간격을 지정 더보기 구조선택자 태그 첫 번째 두 번째 세 번째 네 번째 다섯 번째 여섯 번째 일곱 번째 float:left-> 옆으로 나열한다. list-style-> li에 있는 o을 없애버린다. padding-> 사각형 상하좌우 간격을 조절한다. backgroung-color->배경 색상을 넣는다. li:first-child {border-radius:10px 0 0 10px;} -> 맨 처음 사각형에 라운드처리를 한다. 4개의 숫자가 있는데 왼쪽위부터 순서대로 적용 li:last-child {border-radius:0 10px 10px 0;} -> 맨 마지막 사각형에 라운드처리를 한다. 4개의 숫자가 있는데 왼쪽위부터 적용 li:nth-child(2n) {background-color:#ff0003;} -> 짝수번째 사각형에 배경색.. 더보기 상태선택자 태그2 사용 가능 사용 불가능 축구 야구 농구 배구 족구 배구 -> 인터넷 창이 열릴때부터 체크가 되어있음 족구 -> 선택불가능 enabled->원래 색상으로 빨간색으로 되어있다. disabled->체크불가능으로 회색으로 되어있다. focus->클릭하는중 나오는 색상으로 주황색으로 되어있다. (익플9에선 색상이 제대로 나왔는데 익플11에선 제대로 안보이네요...) 더보기 상태선택자 태그 사용 가능 사용 불가능 사용가능 옆에 input태그 사용불가능 옆에 input태그인데 disabled로 사용불가 enabled는 평상시 색상으로 배경색상은 하얀색으로 되어있다. focus는 마우스로 상자를 클릭했을때 상태로 배경색상이 주황색으로 되어있다. disabled는 사용불가능으로 클릭할수없다 배경색상은 회색으로 되어있다. 더보기 반응선택자태그 반응 선택자 예시입니다. 마우스가 글씨 위로 있으면 빨간색 클릭하면 파란색 반응선택자 태그 hover: 마우스를 올렸을때 글씨가 빨간색으로 변경된다. active: 마우스를 클릭했을때 글씨가 파란색으로 변경된다. 더보기 이전 1 2 3 4 다음
