영벨롭 개발 일지

[플렉스 박스 레이아웃이란?] 플렉스 박스 레이아웃(flex box layout)이란 그리드 레이아웃을 기본으로 하여 플렉스 박스를 원하는 위치에 배치하는 것입니다. 1차원 레이아웃이라고도 하며, 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있습니다. 따라서 화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 할 때 편리하게 사용할 수 있습니다. 관련 용어 설명 플렉스 컨테이너 (flex container) 텍스트나 이미지, 표 등 웹 요소들을(플렉스 아이템들을) 플렉스하게 사용하기 위한 컨테이너 플렉스 아이템 (flex item) 플렉스 컨테이너에 담기는 웹 요소 주축 (main axis) 플렉스 아이템들이 배치 기준 축 (주축이 x축일 때 아이템들이 x축 방향으로 배치됨) 교차축 (cr..

[position 속성과 같이 사용하는 css 속성들] position 속성은 요소의 위치를 지정하는 기준을 지정하는 속성입니다. 속성 값 설명 static 기본 값, 기준 없음 relative 요소 자신을 기준 absolute 위치 상 부모 요소를 기준 fixed 뷰포트를 기준 position 속성과 같이 사용하는 css 속성들은 다음과 같습니다. 속성 설명 top, bottom, left, right 요소의 각 방향별 거리 지정 z-index 요소의 쌓임 정도를 지정 [relative 속성 값] relative 속성 값은 요소 자신을 기준으로 배치합니다. position: relative; 만을 적용하면 배치 전과 동일하지만, top, bottom, left, right 속성과 함께 사용하면 배치 전..

[요소의 배경 이미지 삽입 background-image] background-image는 해당 요소의 배경에 이미지를 삽입하는 속성입니다. 기본형 background-image: url("이미지 경로"); #bgImage { background-color: orange; width: 300px; height: 300px; background-image: url("./images/tisotry.png"); } [배경 이미지의 크기 background-size] background-size는 배경 이미지의 크기를 지정하는 속성입니다. 속성 값 설명 auto 기본값, 이미지의 실제 크기 단위 px, em, rem, ... cover 비율은 유지하고 요소의 더 넓은 너비에 맞춤 (이미지 짤릴 수 있음) con..

글꼴을 제어하는 속성들 - 크기, 두께, 기울기, 높이, 글꼴 글자의 크기 font-size font-size 속성은 글자의 크기를 지정하는 속성입니다. 따로 지정하지 않았을 때의 기본 글자 크기는 16px 입니다. 속성 값 설명 16 px 기본 값 단위 px, em, rem, ... % 부모 요소의 글자 크기를 기준으로 백분율 글자의 두께(가중치) font-weight font-weight 속성은 글자의 두께를 지정하는 속성입니다. 기본 두께는 400입니다. 속성 값 설명 normal 400, 기본 값 bold 700, 두껍게 bolder 부모 요소보다 더 두껍게 lighter 부모 요소보다 더 얇게 100 ~ 900 숫자 값 글자의 기울기 font-style font-style 속성은 글자의 기울기를..

넘침 제어 overflow 속성 overflow 속성은 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성입니다. 예를 들어 부모 요소의 영역의 크기보다 자식 요소의 영역 크기가 클 때, 부모 요소에 overflow 속성을 사용하여 자식 요소의 내용을 잘라낼 수 있습니다! 개별 속성으로 overflow-x와 overflow-y 가 있습니다. 속성 값 설명 visible 기본값, 넘친 내용을 그대로 보여줌 hidden 넘친 내용을 잘라냄 scroll 넘친 내용을 잘라내고 스크롤바 생성 (가로, 세로 스크롤바 자동 생성) auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 visible hidden scroll auto .parent { width: 200px; height: 100..

박스 테두리 선 border border 속성은 박스 요소의 테두리 선을 지정하는 단축 속성입니다. 테두리를 추가하게 되면 padding과 마찬가지로 요소의 크기가 커집니다! 기본형 border: 선두께 선종류 선색상; 선 두께 border-width border-width 는 테두리 선의 두께를 지정하는 속성입니다. border-width도 단축 속성이기 때문에 margin/padding 과 마찬가지로 값을 하나만 줄 수도, 여러 개를 줄 수도 있습니다. border-width: 상하좌우 border-width: 상하 좌우 border-width: 상 좌우 하 border-width: 상 우 하 좌 속성 값 설명 medium 중간 두께, 기본 값 thin 얇은 두께 thick 두꺼운 두께 단위 px, ..