1. 테두리(border) 1) 종류 : border-style2) 둥글게 : border-radius3) 색 : border-color4) 굵기 : border-width 2. 배경(background) 1) 이미지 넣기(배경1은 너비 100%, 배경2는 200%로) background-image: url('배경1.png'), url('배경2.png');background-size: 100%, 200%; 2) 패턴화background-repeat: repeat/no-repeat/repeat-x(가로로 반복)/repeat-y(세로로 반복) 3) 위치 정하기 background-position: 0px 50%(x축 위치 y축 위치 순) 4) 고정시키기(background-attachment: scroll/..

*선택자 게임링크: http://flukeout.github.io/ 1) 전체 선택: *2) ID로 선택: #ID3) A 안의 B 선택: A B4) ID 안의 B 선택: #ID B5) Class로 선택: .Class명 6) A와 B 동시 선택: A, B7) A 뒤에 오는 하나의 B 선택: A + B8) A 뒤에 오는 모든 B 선택: A ~ B 9) A의 자손(direct children) 선택: A>B10) A의 첫번째 자손 선택: A:first-child11) 첫번째로 나타난 A: A:first-of-type12) n번째 A만 선택: A:nth-of-type(n)13) 짝수 번째 A만 선택: A:nth-of-type(even) 14) 자손 없는 것 선택: A:empty15) 자손 있는 것 선택: A:n..

1) 여러 INPUT 타입2) 브라우저에 따라 표시가 다르게 나옴 12345678910111213141516171819202122232425262728input 타입 number: date: month: range: textarea: insert here radio: 남자 여자 주문 음식 짜장면 잠뽕 탕수육 Colored by Color Scriptercs

1. 폰트 관련 font-size: 1rem (px보다 유용하게 사용됨)font-family: 폰트 종류font-weight: bold(굵게)line-height: 2(줄 간격) 2. 텍스트 배치 text-align: left/right/center/justify(왼,오,중간,양쪽 정렬 순) https://opentutorials.org/course/2418/13411

CSS(Cascading Style Sheets;스타일 시트): HTML을 꾸며주는 기능을 제공꾸미는 부분만 독립시켜 처리하므로HTML의 가독성이 유지됨 1) style 태그를 cs 2) CSS 파일 작성 OR CSS 링크 찾기 3) 태그 안에 href(CSS 주소), type(HTML과 링크하는 데이터 종류), rel(Relationship btw HTML and CSS) 순으로 적어줌 1) 헤더(h1)의 색을 Black으로, 문단(p)의 폰트 크기를 18px로 맞추자 1234567h1 { color: Black;}p { font-size: 18px;}cs 1) display: 같은 페이지 내 HTML 요소와의 배치 관계 설정ex. display: inline; => 2) float: 왼쪽/오른쪽에 적..

1) 문장 태그(h1~h5, p)2) list 태그(ul, ol, li)3) img, video 붙이기4) div로 나누기 123456789101112131415161718192021222324252627 Animals Around the World The Brown Bear //h1,2,3 => 헤드라인 The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its species, including the Atlas bear and the brown bear. //a: 액션태그, href="하이퍼링크 주소" Learn More Here are some bear species: //ui(Unordered..