CSS
[TIL] CSS 테이블, 포지션, 플로트
✍ Today I Learned table 요소에서 border-collapse: collapse; 를 적용하면 단일 텍스트로 변경된다. 티스토리 테이블 표와 같은 스타일로 꾸미려면 nth-child(even or odd) 선택자를 이용한다. tr:nth-child(even) { background-color: #f2f2f2; } vertical-align을 적용하려면 height 값이 설정되어야 한다. table에서 overflow 속성을 적용했을 때 콘텐츠의 양이 충분하지 않다면 min-width 값을 설정해야 한다. text-overflow: ellipsis; 이렇게 설정하면 넘치는 콘텐츠는 줄임표(...)로 표시된다. 레이아웃을 위한 속성으로 position과 float이 있다. 크롬 확장프로그램..
[TIL] CSS 아웃라인, 대체글꼴, 디스플레이 속성
✍ Today I Learned CSS에서 설정하는 height와 width는 내용(content)을 대상으로 한다. 아웃라인(outline)이란 html 요소의 가장 바깥 부분, border 외부에 그려진 선이다. border 속성과는 달리 html 요소의 전체 크기에는 포함되지 않는다. 주로 button에 사용된다. CSS에 text-shadow와 box-shadow 속성을 이용해서 그림자를 추가할 수 있다. font-family 속성을 이용하여 글꼴을 지정할 땐, 대체글꼴을 같이 지정해주는 것이 좋다. 태그를 사용하면 여백과 줄바꿈이 그대로 브라우저 화면에 나타난다. list-style-position: inside; 이렇게 하면 리스트 마커(marker)까지 리스트 태그에 포함된다. display..
[CSS] CSS에서 공간을 나누는 요소들(feat. 박스모델)
박스 모델(Box Model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 패딩(padding) : 내용과 테두리 사이의 간격 테두리(border) : 내용과 패딩 주변을 감싸는 테두리 마진(margin) : 테두리와 이웃하는 요소 사이의 간격 실제 HTML 요소의 높이와 너비 구하기 CSS에서 height와 width 속성이 가리키는 부분은 내용(content) 부분이다. 다시말해 패딩(padding), 테두리(border), ..
[CSS] CSS의 기본 속성(property)
색상(Colors) CSS에서 색을 표현하는 방법은 3가지다. 색상 이름 HEX code(16진수 색상값) RGBA(RGB 색상값, alpha는 투명도) Hello World Hello World Hello World 배경(Backgrounds) HTML 요소는 모두 Box Model을 기반으로 각자의 배경을 가진다. background 속성을 이용하면 이러한 각 요소에 다양한 효과를 줄 수 있다. 속성 설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 이미지를 설정함. background-repeat 설정된 배경 이미지의 반복 유무를 설정..
[CSS] CSS의 다양한 선택자(selector)
1. 단일 선택자(simple selector) 선택자(selector)가 지정하는 요소(element) 혹은 개체(node)가 단일임을 지칭한다. 단일 선택자라 할지라도 적용 받는 태그의 수는 여러개일 수 있다. 태그 선택자(element selector) HTML 요소의 이름을 직접 사용하여 선택한다. p { color: red; text-align: center; } /* 페이지의 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. */ id 선택자(id selector) 특정 id 속성을 가진 HTML요소를 선택한다. (중복된 id 속성은 선택자 사용에 혼란을 줄 수 있으므로 지양한다.) #para1 { text-align: center; color: red; } /* id="para1"인 모든..
[CSS] CSS란?
CSS란? CSS (Cascading Style Sheets) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. 오로지 디자인을 위한 언어이기 때문에 HTML을 이용하여 스타일 작업을 하는 것보다 훨씬 효율적이고, 유지보수에 용이하다. CSS 문법 /* 예시 */ p { color: red; text-align: center; } 예시) 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. CSS 선택자 스타일 작업은 문서의 상단부터 하단 순서로 적용되기 때문에 선택자의 활용을 어떻게 하느냐에 따라 코드의 효율성이 달라진다. 스타일을 적용할 HTML 요소를 가리키는 선택자(selector)는 다음과 같다. 단일 선택자(태그 선택자, class 선택자..
[TIL] CSS 선택자
✍ Today I Learned CSS의 결합 선택자, 의사 선택자 등 선택자에 대해 자세히 알게 되었다. 매번 감으로 썼었는데..! 사용 기호 명칭 설명 , 그룹 선택자 여러 선택자 같이 사용 (공백) 자손 선택자 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택 > 자식 선택자 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택 태그.클래스 특정 class 속성을 가진 요소 중 특정 HTML 요소만 클래스의 영향을 받도록 지정 :nth-child() 의사 선택자 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택 :not(선택자) 의사 선택자 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함 [속..