본문 바로가기

CSS

CSS 테이블 Table Table Borderstable의 border에만 1px solid black; 적용FirstnameLastnamePeterGriffinLoisGriffinth, td의 border에만 1px solid black; 적용FirstnameLastnamePeterGriffinLoisGriffintable, th, td의 border에 적용FirstnameLastnamePeterGriffinLoisGriffin Collapse Table Bordersborder-collapse 속성은 테두리를 하나로 만들지 말지 설정할 때 쓴다.table { border-collapse: collapse; } table, th, td { border: 1px solid black; }FirstnameLastnamePeter..
CSS List Unordered Lists:CoffeeTeaCoca ColaCoffeeTeaCoca ColaOrdered Lists:CoffeeTeaCoca ColaCoffeeTeaCoca ColaHTML에서 두 가지 주요 리스트 유형이 있따.unordered lists : 동그라미와 같은 기호가 머리에 옴ordered lists : 숫자나 문자가 머리에 옴 CSS 리스트는 다음을 허용한다ol, ul에 대해 다른 리스트 아이템 마커 설정, 리스트 아이템 마커로써 이미지 설정, 리스트와 리스트 아이템에 배경색 추가 Different List Item Markerslist-style-type 속성은 리스트 아이템 마커의 유형을 지정한다.ul.a { list-style-type: circle; } ul.b { list-st..
CSS Links CSS로 link들은 다른 방식으로 꾸며질 수 있다. Styling Links링크는 어떤 CSS 속성을 써서 꾸며질 수 있다. (color, font-family, background 등)a { color: hotpink; } 링크의 상태에 따라 다르게 꾸밀 수 있따.a:link 방문되지 않은 링크a:visited 사용자가 방문한 링크a:hover 사용자가 마우스를 갖다 대면 동작, 반드시 a:link와 a:visited 이후에 와야 한다.a:active 사용자가 클릭하는 동안 동작, 반드시 a:hover 이후에 와야 한다.a:visited { color: green; } Text Decorationtext-decoration 속성은 대부분 링크의 밑줄을 없애기 위해 쓰인다.a:visited { text..
CSS 아이콘 icon 아이콘 추가하는 방법가장 간단한 방법은 font awesome같은 아이콘 라이브러리를 추가하는 것이다. 또는 같은 인라인 HTML 요소에 아이콘 클래스의 이름을 명시하면 된다.아래의 모든 아이콘은 CSS로 커스터마이즈(크기, 색, 음영)될 수 있는 확장성 있는 벡터이다. Font Awesome Iconsfont awesome icons를 쓰기 위해 HTML 페이지 섹션에 다음을 추가한다. Bootstrap Iconsbootstrap icons를 쓰기 위해 HTML 페이지 섹션에 다음을 추가한다. Google Iconsgoogle icons를 쓰기 위해 HTML 페이지 섹션에 다음을 추가한다. 물론 아이콘 라이브러리의 종류에 따라 class 이름을 다르게 명시해주어야 한다. https://www.w3sch..
CSS Fonts font 속성은 family, boldness, size, style을 정의한다.Serif체는 가는 선이 있다. Sans-serif체는 끝이 네모처럼 되어 있다. Generic Family Font Family 설명 Serif Times New RomanGeorgia serif 폰트는 각 문자 끝부분에 작은 선이 있다. Sans-serif ArialVerdana Sans는 없다는 의미이다. 문자 끝 부분에 가는 선이 없다. Monospace Courier NewLucida Console 모든 monospace 문자는 같은 너비를 갖는다. 산세리프체는 세리프체보다 가독성이 좋다. Font Familyfont-family 속성은 fallback 시스템이라고 불리는 여러가지의 폰드가 있어야 한다. 브라우저가 ..
CSS text 글자색은 color로 지정한다. name, Hex, RGB로 지정 가능하다.body { color: blue; }웹 표준을 준수하려면 color 속성과 background-color 속성을 함께 지정한다. text alignmenttext-align은 문자의 수평 정렬을 설정할 때 쓴다. 텍스트는 left, center, right 또는 justify로 정렬이 가능하다.justify는 각 줄을 동등한 너비로 만든다. text decoration보통 text-decoration:none;은 link의 밑줄을 없애기 위해 쓴다.daum.net -> daum.net overline은 텍스트의 윗줄line-through는 취소선underline은 밑줄하지만 link가 아닐 경우 사용자에게 혼란을 주기 때문에 u..
CSS outline outline은 border 바깥에, 요소를 두드러지게 하는, 요소 주변에 그려지는 것이다.outlinebordercontent outline-styleoutline-coloroutline-widthoutline-offsetoutline과 같은 속성이 있다. outline은 border와 다르다. 요소의 border 바깥에 그려지고 컨텐츠를 감쌀 수 있다. 요소의 총 너비와 높이는 outline의 너비에 영향을 받지 않는다. outline-style은 dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden이 있다. outline color색깔은 name, RGB, Hex, invert 등의 방식으로 설정될 수 있다. p.ex1 ..
CSS box model 모든 HTML 요소들은 박스로 생각할 수 있다. 박스 모델은 디자인과 레이아웃에 대해 말할 때 쓰인다.CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 박스다. margin, border, padding, 실제 컨텐츠로 구성되어 있다.margin : border 바깥의 영역, 마진은 투명하다.border : 패딩과 content를 둘러싼다.padding : content 주변 영역, 패딩은 투명하다.content : text, image가 나타나는 곳 요소의 너비와 높이요소의 너비와 높이 속성을 설정하고 싶다면, 단지 content 영역의 너비와 높이를 설정하면 된다.요소의 전체 크기를 계산하기 위해서는 패딩, 테두리, 마진을 다 합쳐야 한다.width: 320px;padding: 10px; b..

티스토리툴바