반응형 웹프로그래밍/CSS14 [CSS] 테이블(tables)의 모든 것 Table border name price Spurecell 16,970 Thezone 33,950 위의 예시는 border을 통해 테이블을 만들었다. 하지만 table의 크기가 매우 작은데 위의 테이블 크기를 키워보자 Full-Width Table name price Spurecell 16,970 Thezone 33,950 width을 100% 할경우 너비가 웹브라우저 크기만큼 늘어나게 된다. 그런데 table를 선 하나로 표시하고 싶으면 어떻게 해야할까? Collapse Table Borders border-collapse:collapse를 통해 선 하나로 만들 수 있다. name price Spurecell 16,970 Thezone 33,950 내부에 있는 선을 없에는 방법은 무엇일까? name .. 2023. 9. 12. [CSS] 리스트(Lists) 기본적인 list들은 아래의 사이트를 참고하자 https://youknow301.tistory.com/79 HTML 리스트 list HTML 설명 : 비순서형 리스트 태그이다. 예시코드 An unordered HTML list SamSung HYUNDAI SK 위의 코드를 실행해보면 옆에 동그란 점으로 리스트가 구성된 것을 알 수 있다. 여기서 는 list를 뜻하며 추후에 youknow301.tistory.com https://youknow301.tistory.com/80 HTML 리스트 - Unordered Lists 비순서형 리스트 의 태그로 시작하여 요소 안에 로 시작이 되어야한다. An unordered HTML list SamSung HYUNDAI SK 비순서형 리스트 스타일 변경 CSS에서 l.. 2023. 9. 12. [CSS] Links 링크 Style Links CSS로 Links를 꾸밀 수 있다. (e.g color, background, font-family, etc) 4가지 링크 상태들이 존재한다. a:link -> 방문하지않는 일반적인 링크 a:visited -> 사용자가 방문한 링크 a:hover -> 사용자가 마우스를 위에 올려 놓았을 때 링크 a:active -> 클릭하는 순간의 링크 링크 스타일 꾸미기 링크에 대해 알아보기 위의 설명을 읽고 링크에 대한 특성을 알아보기 위 코드를 직접 입력해보고 링크의 특징을 알아보자 Text Decoration 링크 스타일에 text decoration을 추가할 수 있다. 아래 예시코드를 직접 입력해보고 확인해보자! 링크 스타일 꾸미기 링크에 대해 알아보기 위의 설명을 읽고 링크에 대한 특성.. 2023. 9. 12. [CSS] Fonts(폰트)의 모든 것 폰트(Fonts)의 중요성 올바른 폰트 선택이 독자가 웹사이트를 경험하는 방식에 큰 영향을 준다. 좋은 폰트는 브랜드에 대한 강력한 아이덴티티를 만들 수 있다. 폰트는 텍스트에 가치를 더한다. 그렇기때문에 올바른 폰트를 사용하는 것이 중요하다. Generic Font Familes CSS는 다섯게의 geneeric font familes이 있다. Serif; Serif 폰트는 각 글자의 가장자리에 작은획이 있다. 격식과 우아함을 만들어낸다. Sans-serif: Sans-serif 폰트는 깔끔한 선이 있다. 모던하고 미니멀한 룩을 연출한다. Monospace(고정 폭): 모든 문자가 동일한 고정 폭을 갖는다. 기계적인 느낌을 준다. Cursive(필기체): 사람의 손글시를 모방한다. Fantasy(판타지.. 2023. 9. 11. 이전 1 2 3 4 다음 728x90 반응형
