table

[CSS] 중앙 정렬의 3가지 방법(position, flex, table)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 중앙 정렬에 대해 알아보자! 화면 정중앙에 요소를 정렬하는 방법은 크게 3가지가 있다. position 속성과 transform 속성 사용 flex 속성 사용 table 속성 사용 1. position 속성과 transform 속성 사용 [HTML] [CSS] .position-center { width: 400px; height: 300px; background-color: green; position: relative; } .position-center > div { width: 100px; height: 100px; background-color: lightgreen; position: absolute; top: 50%; left: 50%; transfo..

[TIL] CSS flex, table, 부트스트랩

✍ Today I Learned display: flex; display: table; 을 이용하면 중앙 정렬을 간단하게 할 수 있다. .flex-container { display: flex; justify-content: center; align-items: center; } .boxwrap { display: table; } .boxwrap .box { display: table-cell; table-layout: fixed; vertical-align: middle; text-align: center; } 쇼핑몰 페이지가 PC와 모바일 서버를 따로 두는 이유 트래픽 분산을 위해 기획적인 부분(노출되는 품목이 다름) 부트스트랩을 사용하는 2가지 방법 다운 받아서 사용 장점 - 내가 사용하는 버전으로..

[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] HTML 복습2

✍ Today I Learned html 속성의 값은 대소문자를 구분하지 않지만 가독성 및 협업을 위해 소문자로 작성하는 것이 좋다. 이미지 파일들은 파일의 헤더영역에 image/jpeg, image/png 등의 형식을 갖고 있으므로 파일 확장자명과 관계없이 헤더 정보로 판단한다. (MIME type) img 태그의 size 속성에서 %는 브라우저 크기 대비 비율을 의미한다. table 태그는 레이아웃 용도로 사용하지 않는다. html class 네임은 kebab-case를 주로 사용한다. CSS 상대단위인 em은 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이고, rem은 최상위 요소(root, 즉 html) font-size 속성값이 기준이다. CSS 선택자를 쉼표로 연결하면 여러..