HTML&CSS
-
실습 - 테이블 만들기HTML&CSS/실습 2023. 1. 17. 22:02
표의 시작과 끝을 알려주는 , & 태그를 사용하면 제목은 표의 위쪽 중앙에 표시 1. 행을 만드는 , 태그와 셀을 만드는 , 태그 상품구성 선물용과 가정용 상품 구성 용도 중량 갯수 가격 선물용 3kg 11~16과 35,000원 선물용 5kg 18~26과 52,000원 가정용 3kg 11~16과 30,000원 가정용 5kg 18~26과 47,000원 2. 표의 제목 , 표의 본문 , 요약 선물용과 가정용 상품 구성 용도 중량 갯수 가격 선물용 3kg 11~16과 35,000원 선물용 5kg 18~26과 52,000원 가정용 3kg 11~16과 30,000원 가정용 5kg 18~26과 47,000원 3. 행을 합치는 rowspan, 열을 합치는 colspan 셀의 내용 셀의 내용 상품 구성 선물용과 가정용..
-
표(Table)HTML&CSS/HTML 2023. 1. 8. 12:02
HTML 테이블(Table) 테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그는 다음과 같은 태그들로 구성됩니다. 1. 태그는 테이블에서 열을 구분해 줍니다.즉, 행을 만든다. 2. 태그는 행 안에 있는 셀을 만든다. 3. 태그는 표의 제목 행에 셀을 만들때 사용한다. th태그는 내용은 진하게 표시가 되고 중앙에 배치가 된다 상품구성 선물용과 가정용 상품 구성 용도 중량 갯수 가격 선물용 3Kg 11~16과 35,000원 선물용 5kg 18~26과 52,000원 가정용 3Kg 11~16과 35,000원 가정용 3kg 11~16과 30,000원 가정용 5kg 18~26과 47,000..
-
실습 - 순서있는 & 순서없는 목록 만들기HTML&CSS/실습 2023. 1. 8. 10:27
1. 아래와 같이 순서있는 목록 만들기 나의풀이 레드향 샐러드 레시피 재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 재료 준비 샐러드 채소를 씻고 물기를 제거한 후 준비합니다. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다. 드레싱 준비 드레싱 재료를 믹서에 갈아줍니다 샐러드 완성 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝! 해설풀이 레드향 샐러드 레시피 재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱: 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 재료 준비 샐러드 채소를 씻고 물기를 제거한 후 준비합니다. 레드향과 ..
-
-
포지션(Position)HTML&CSS/CSS 2023. 1. 4. 18:43
position은 언제 사용할까?! position 속성의 종류 1) static - default값 2) relative 3) fixed 4) absolute 5) sticky position - static일때 .blue { background-color: #e46e80; } blue 색깔를 position -> relative로 바꾸자 .blue { background-color: #5195ee; position:relative; /* 위에서 30px만큼 간격을 떨어뜨리자 */ top: 30px; } .blue { background-color: #5195ee; position:relative; /* 위에서 30px만큼 간격을 떨어뜨리자 */ top: 30px; /* 왼쪽으로부터 50px만큼 간격을..
-
디스플레이(display)HTML&CSS/CSS 2023. 1. 4. 08:43
display 종류 inline block inline-block flex list-item none inline display inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향 예시 My name is Yuna! block display , , , , , div태그 예시 My name is Yuna! ============================================== display 바꾸기 모든 요소는 기본적으로 정해진 display 값이 있는데요. CSS를 통해서 이를 바꿀 수 있습니다! 1) inline 요소를 block으로 바꾸기 My name is Yuna! 2) block 요소를 inline으로 바꾸기 My name ..
-
선택자정리HTML&CSS/CSS 2023. 1. 3. 22:47
/* 모든 h1태그 */ h1{ color: orange; } /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color:blue; } 자식 (children) /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div i{ color:orange; } 직속 자식 (direct children) /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ .div1 > i{ color:orange; } 복수 선택 /* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */ .t..