CSS

[Bootstrap] navbar(내비게이션바) 오른쪽 정렬, 양쪽 정렬

부트스트랩은 사용법이 간단해서 참 좋은데 가끔 의도한 대로 움직이지 않는 경우가 있다. navbar(내비게이션바) 작업을 하면서 이런저런 시도 끝에 알게 된 다양한 정렬에 대해 공유해본다. 1. navbar 왼쪽 정렬(기본) LOGO Home About Resiter Login 부트스트랩에서 제공하는 기본적인 왼쪽 정렬 navbar이다. (반응형 toggle 포함) 2. navbar 오른쪽 정렬 LOGO Home About Resiter Login 태그를 감싸고 있는 태그에 justify-content-end 라는 class를 추가한다. 3. navbar 양쪽 정렬 LOGO Home About Resiter Login 왼쪽에 두고 싶은 메뉴와 오른쪽에 두고 싶은 메뉴를 각각 태그로 감싼다. 2개의 태그를..

[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가지 방법 다운 받아서 사용 장점 - 내가 사용하는 버전으로..

[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 수직정렬에 대해 알아보자! 수직정렬에는 3가지 방법이 있다. padding 속성 사용 line-height 속성 사용 position 속성과 transform 속성 사용 전체적으로 사용할 예제 제목 내용 부모 를 간단하게 컨테이너라고 지칭하겠다. 1. padding 속성 사용 .padding { width: 400px; background-color: orange; padding: 100px 0; } padding-top 과 padding-bottom 에 동일한 값을 준다. (예시에서는 padding: 100px 0; 으로 한 번에 top과 bottoom 값 설정) 장점 - 컨테이너의 높이값이 정확하지 않을 때 간단하게 사용할 수 있다. 단점 - 내가 설정한 ..

[CSS] background-size, origin, clip

background의 다양한 속성 중 다음 3가지에 대해 알아보자! background-size background-origin background-size background-size 배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다. 속성값 설명 contain 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. cover 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. (↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓) 2022.03.25 - ..

[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값이 실제 값이 된다. ..