CSS

flex: 1 속성

setSearchVisible(visibleTo)}> 컨테이너 안에 크게 로고와, 메뉴버튼 두 가지의 요소가 들어있다. 이 때 이 두 가지를 아래 사진과 같이 양쪽 끝에 정렬하고 싶은데 잘 되지 않았었다. 이 때 로고에 flex-start 를 준 상태에서 flex: 1 을 주고 난 후 양쪽 정렬이 되었다. const Container = styled.nav` position: fixed; top: 0; left: 0; left: 0; right: 0; /* background-color: ${COLORS.WHITE}; */ z-index: 1; height: 80px; display: flex; flex-direction: row; align-items: center; padding-left: 24px;..

Flexbox Froggy

[CSS] Flexbox 정렬하기 연습 Flexbox Froggy 연습하기 flex-direction : 정렬할 방향을 지정한다. row (요소를 텍스트의 방향과 동일하게 정렬 / 보통 가로정렬) row-reverse (↔ 뒤집기 / 텍스트의 반대방향) column (요소를 위에서 아래로 정렬 / 보통 세로정렬) column-reverse( ↕ 뒤집기) justify-content : Flex 요소들을 가로선 상에서 정렬한다. flex-start (요소를 컨테이너의 왼쪽으로 정렬) flex-end (요소를 컨테이너의 오른쪽(끝)으로 정렬) center (요소를 컨테이너의 가운데로 정렬) space-between (요소들 사이에 동일한 간격) space-around (요소들 주위에 동일한 간격) space..

position 수평 중앙 정렬

위치 고정을 통해 요소를 정렬할 때 화면의 중앙에 오도록 하는 방법이 있다. .btn { width: 300px; height: 50px; position: fixed; bottom: 16px; left: calc(50% - 150px); /*화면 너비의 절반만큼 오도록 계산*/ }

배경 이미지 삽입/정렬

이미지 삽입/정렬 배경에 이미지를 삽입할 때 항상 같이 따라 다니는 3줄의 코드가 있다. 이미지 주소 - 위치 - 사이즈 .background { width: 400px; height: 800px; background-image: url('이미지 주소'); background-position: center; background-size: cover; } 화면 이미지 비율 모바일에서 볼 수 있는 반응형 웹페이지를 만들고자 할 때, 화면의 크기에 따라 보여지는 이미지의 크기가 달라지게 만들 것이다. 이 때 vw 단위를 사용하면 화면의 크기에 따라서 이미지의 크기가 늘어나고 줄어든다. .background { width: 100vw; height: 100vh; max-width: 450px; } 하지만 100..

Flex-box 정렬

아이템을 정렬하는데 있어서 정렬하는 개념들은 종종 헷갈리곤 하기 때문에 간단하게 메모하면 좋을 것 같아서 작성하게 되었다. 컨테이너 내부 아이템 중앙으로 정렬하기 아이템이 여러개일 때 - 수직으로 쌓이도록 정렬 .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } 아이템1 아이템2 아이템이 여러개일 때 - 수평으로 쌓이도록 정렬 .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } 아이템1 아이템2

Flex(Flexible Box)

본 글은 공부하기 위한 목적으로 포스팅 되었으며 아래 링크의 원문을 참고하였습니다. https://heropy.blog/2018/11/24/css-flexible-box/ Flex Flex는 수평이 될 요소들의 container에 display: flex 를 적용한다. .box-container { display: flex; } CSS3 Flexible Box Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다. 우선 Flex는 Container와 Items 2개의 개념으로 나뉜다. 주의할 부분은 각각 적용하는 속성이 구분되어 있다. Container : Items를 감싸는 부모 요소. 각 Item을 정렬하기 위해서는 Container가 필수 속성:..

Background 배경

background 요소의 배경을 설정한다. 단축속성: background: 색상 이미지경로 반복 위치 스크롤특성 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll background-color 요소의 배경 색상을 지정한다. 배경색상의 경우는 background: tomato 와 같이 개별속성보다는 단축속성을 더 많이 사용한다. transparent: 투명 background-image 요소의 배경에 하..

Positioning

position 요소의 위치 지정 방법의 유형(기준)을 설정할 수 있다. 속성 top / bottom / left / right 는 position이 지정되었을 때만 사용이 가능하다. absolute, fixed 속성값이 적용된 요소는 display 속성이 대부분 block 으로 수정된다. 값 의미 기본값 static 유형(기준) 없음/ 배치 불가능 static relative 요소 자신을 기준으로 배치 absolute 위치상 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역 기준으로 배치 relative 자기 자신을 중심으로 위치를 움직인다. 위치이동이 진행되었지만, 3번 박스의 위치는 변하지 않았다. 이는 2번 박스가 본래의 자기 위치에 남아있기는 하지만..

Float (띄움)

Float 요소를 좌우 방향으로 띄움 (수평 정렬) CSS3에는 flexible box라는 개념이 도입되면서 float을 대체하는 개념이 생겨났다. 그래서 요즘에 만들어지는 많은 웹사이트들이 float을 이용한 수평정렬보다는 flex box를 이용한 수평정렬을 이용하는 편이다. 수평정렬의 의미는 많이 퇴색되었지만 float이 가지고 있는 기본적인 개념으로서 알아보자. 수평 정렬 기본적으로 요소는 위에서 아래로 수직으로 쌓이게 된다. 하지만 float을 이용한다면 수평 정렬이 가능하다. float: left 를 입력하게 되면 왼쪽에서부터 1, 2, 3 으로 쌓이고, float: right 를 입력하면 그저 오른쪽 정렬이 아닌 1, 2, 3 이 오른쪽에서부터 차례대로 쌓이기 때문에 전체적인 순서가 바뀌게 된..

이미지 대체 텍스트 숨기기

text-indent 첫번째 줄의 들여쓰기를 지정한다. 음수값을 사용할 수 있다. 음수값을 사용하면 첫째줄은 왼쪽에서 들여쓰기(내어쓰기) 된다. text-align: -9999px (화면 밖으로 내보내기) 웹에서 들여쓰기를 하는 경우는 background를 통해 이미지를 삽입할 때 사용된다. img 태그에서 이미지를 삽입할 때 alt로 대체 텍스트를 작성해준 것처럼, background 이미지를 사용 시 웹 접근성을 위해 이미지가 삽입된 태그에 대체텍스트를 작성해주면 그림과 텍스트가 같이 나타나게 된다. 따라서 text-indent를 작성해서 화면 밖에 존재하지만, 시각적으로는 보이지 않는. 텍스트를 영역 밖으로 밀어내는 것으로 많이 사용된다.

[Box model] padding 요소의 크기증가

padding은 요소의 내부 여백을 지정하는 속성이다. 내부 여백을 추가하면 padding 값 만큼 요소의 크기가 커지게 된다. 따라서 크기가 커지지 않도록 padding이 추가된 만큼 width와 height 값을 다시 계산 해야한다. 예를 들어 100 X 100 px 크기의 요소를 만든다고 하자 1. 직접 계산 100 X 100 px 의 요소를 만들려면 padding을 통해 커지는 너비를 고려해서 직접 계산해준다. .box { width: 60px; /* +40px */ height: 80px; /* +20px */ background: red; padding: 10px 20px; } 2. 자동 계산 box-sizing: border-box 를 추가하는 방법. 늘어날 크기를 고려하지 않아도 요소의 크..

[Box model] margin 중복

마진 중복(병합) 마진의 특정 값들이 '중복'되어 합쳐지는 현상. 마진 중복은 버그(오류)가 아니다. 현상을 우회하거나 응용할 수 있다. 형제 요소들의 margin-top과 margin-bottom이 만났을 때 부모 요소의 margin-top과 자식요소의 margin-top이 만났을 때 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때 마진 중복 계산법 조건 요소A 마진 요소B 마진 계산법 중복값 둘 다 양수 30px 10px 더 큰 값으로 중복 30px 둘 다 음수 -30px -10px 더 작은값으로 중복 -30px 각각 양수와 음수 -30px 10px -30+10=-20 -20px