오늘의 개발
[TIL] CSS 정렬, 반응형
✍ Today I Learned 오늘도 내비게이션 바와 아웅다웅하며 알게 된 것들 내비게이션 바 오른쪽 정렬하면 콘텐츠 내용 계속 바뀌던 거 에 display: inline; 설정으로 해결 내비게이션 바의 height이 정해져 있으면 line-height 똑같이 설정해서 수직정렬 높이를 굳이 지정하지 않았으면 padding으로 수직정렬 에 vertical-align: middle; 설정 vertical-align은 오로지 inline과 table-cell element에만 적용된다. (block level element에 사용 X) 예를 들면, img element를 text element 라인 속에서 정렬할 때 쓰인다. (참고자료) float으로 한쪽 정렬을 하지 않으면 아주 미세한.. 이상한 마진이 ..
[CSS] background img 꽉차게 채우는 법
배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다. 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기 필요에 따라 이미지 크기 조정 이미지의 중앙 부분 no 스크롤바 여러 방면으로 시도해 본 결과 2가지 방법이 가장 유용했다. 1. 태그 이용하기 html { background: url(img.jpg) no-repeat center fixed; background-size: cover; } 태그는 최소한 브라우저 창의 높이다. backgroun 속성은 background에 관련된 속성 값을 한 번에 적을 수 있다. 순서대로 background-repeat, background-position, background-attchment background-size:..
[TIL] CSS 심화버전, 실습 위주
✍ Today I Learned table 마크업을 할 때는 웹 접근성을 준수하여 thead, tfoot, tbody 순서로 작성한다. colgroup 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 사용한다. !important를 사용하면 최우선으로 적용된다. 꼭 필요한 경우에만 사용한다. 내비게이션 바 만들 때 overflow:hidden; 은 왜 사용하는 걸까? W3School TCPSchool currentcolor 키워드를 사용하면 color로 설정한 값을 그대로 사용할 수 있다. inherit 키워드는 부모 요소에게 값을 상속받는다는 의미이다. word-wrap: break-word; 단어가 길면 끊고 다음 줄로 줄 ..
[TIL] CSS 레이아웃, 선택자
✍ Today I Learned 태그는 inline 속성, 태그는 block 속성이다. 이미지 불러올 때 항상 유의할 것! CSS class의 변수화 - 각 기능마다 class를 줘서 재사용성 증가! float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다. 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다. 모든 태그에 class를 주기보다 :nth-child() 등 선택자를 잘 활용하자. 웹폰트는 임포트 하는 것보다 직접 다운로드하는 게 더 안전하다. box-sizing: border-box; 로 설정하면 내가 설정한 width값이 실제 값이 된다. ..
[CSS] CSS에서 위치를 담당하는 요소들
디스플레이(Display) display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 중요한 속성 중 하나이다. html의 모든 요소는 각각의 기본 display 속성 값을 가지고 있고, CSS를 통해 속성 값을 바꿀 수 있다. li { display: inline; } /* 요소를 inline으로 변경하면 가로메뉴를 만들 수 있다 */ 인라인-블록(inline-block) 요소 자체는 인라인(inline) 요소처럼 동작하지만, 내부에서는 블록(block) 요소처럼 동작한다. 인라인 요소와 다르게 너비와 높이를 설정할 수 있다. 블록 요소처럼 margin을 이용하여 여백을 지정할 수 있다. 주로 메뉴나 내비게이션 바를 만들 때 사용된다. HTML 요소 숨기기 display 속성 값을 none으로..
[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), ..