HTML&CSS15 CSS 6차시 # 검색창 G o o g o l e 🔍 # 댓글창 Comments Submit # 로그인창 Login Username Password show Login # 테이블1: 셀 병합 Beers Caption // caption: 제목, 짧은 설명 # // scope="row": 열의 제목 / scope="col" : 행의 제목 Name Origin Abailable 1 Heineken Netherland Yes 2 Guinness Ireland No 3 Asahi, Japan // colspan: 열 병합 / rowspan: 행 병합 Yes # 테이블2 2022. 11. 6. CSS 5차시 - FLEX ITEM 속성 flex-grow(0): item의 크기 증가 number / initial / inherit - item이 container의 남는 부분을 채운다. 요소 내부에서 할당 가능한 공간의 정도를 선언 - 기본값이 0이며 선언한 숫자 만큼의 상대적인 공간을 할당함 ex) flex-grow: 0; flex-shrink(1): item의 크기 감소 number / initial / inherit - item은 기본적으로 줄어들 수 있다.(shrinkable) 기본값은 1이며 0일때는 줄어들지 않는다. ex) flex-shrink: 1; flex-basis(auto): 화면을 기준으로 item의 넓이 비율 선언 - container {flex-wrap: wrap}에서만 작용 number .. 2022. 11. 4. CSS 4차시 - white-space : content의 공백을 어떻게 처리할 것인지 normal: 연속 공백을 하나로 합치며 자동으로 줄바꿈 nowrap: 연속 공백을 하나로 합치며 줄바꿈은 br요소에서만 일어남 pre-wrap: 연속 공백 유지. 줄 바꿈은 개행 문자와 br요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈. pre-line: 연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈.break-spaces다음 차이점을 제외하면 pre-wrap과 동일 연속 공백이 줄의 끝에 위치하더라도 공간을 차지 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있음 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지.. 2022. 10. 31. CSS 3차시 - padding: element 내부에 여백/공간을 부여. padding-top / padding-bottom / padding-left / padding-right - margin: element 외부에 여백/공간을 부여. 개발자 도구로 확인할 수 있음 margin-top / margin-bottom / margin-left / margin-right - display : element를 어떻게 display(전시)할 것인가 block : 부모 element의 넓이를 다 차지한다. div, p, form의 기본값 inline-block : 컨텐츠에 필요한 만큼만 넓이를 차지한다. button, input, img의 기본값 inline : width와 height가 작동하지 않는다. y축 padding.. 2022. 10. 27. CSS 2차시 - odd: 홀수 / even: 짝수 - display: inline-block (element가 한 줄로 입력됨) - Font font-style: 글씨체 (font-style: italic / normal / oblique) font-weight:글씨 굵기 (400이 일반, 700은 굵음) font-size: 글씨 크기 - 정렬 text-align: left / right / center - 글자 간격 letter-spacing: normal (0rem) - 색깔 표기방법 색 이름(red/ black/ blue / 등..) rgb (red green blue) 각각 0~255까지의 값을 가질 수 있다. rgba (red green blue / alpha) alpha는 투명도를 의미. 0(완전투명 - .. 2022. 10. 24. CSS 1차시 1. element selector : element 자체에 스타일 부여 ul{ border: 2px solid; } li { text-decoration: line-through; } 2. class selector : class를 만들어 옵션 집어넣듯이 스타일 부여 ul { border: 2px double; } .line-through { text-decoration: line-through; } .gray { color: #888; } list item list item list item 3. id selection : class와 달리 다른 element와 공유할 수 없으며 한 element가 여러 id를 갖지 않는다. ul { border: 10px double; } #first { text-.. 2022. 10. 21. 이전 1 2 3 다음
