web/CSS
flex 아이템 (Child) 의 속성
Child 박스에서 flex의 속성에 어떠한 값도 설정하지 않으면 자동으로 아래와 같은 기본값이 적용된다. flex: 0 1 auto; //기본 크기를 필요에 따라 늘리고 줄일수 있는 속성값. flex: 속성을 margin 이나 padding 처럼 따로 처리 할수도 있다 flex-grow: 0; flex-shrink: 1; flex-basis: auto; // grow 와 shrink는 단위가 없고 비율에 따라 작동한다. flex-grow > 총량을 기준으로 비율로 크기를 맞춰서 조절한다고 생각하자. .child_grow { flex: 1 1 auto; } .target { flex: 2 1 auto; } ------------------------------------- Element 1 Element..
flex 컨테이너 (Parent) 의 속성
Contents 정렬 본격적으로 html의 레이아웃을 조정할 수 있다 flex-direction (Main Axis) flex-direction: column; column-reverse; row ;(기본값) row-reverse; 방향 1 2 3 3 2 1 1 2 3 4 4 3 2 1 justifty-content 세로 가로 align-items 가로 세로 justifty-content (수평 정렬) align-items (수직 정렬) flex-start flex-start flex-end flex-end center center space-between stretch
Layout with Flex Container
display: flex display: flex 는 부모의 박스요소에 적용시켜, 자식 박스의 방향과 크기를 설정할 수 있는 방법이다. 기본값으로는 자식 element가 왼쪽에서 오른쪽으로 차례대로 이어진다. (.css) .flex-container { display: flex; //부모에서 선언 background-color: blue } .flex-container > div { background-color: lightgreen; margin: 1px; padding: 15px; font-size: 15px; } (.html) //부모 Element 1 //자식1 Element 2 //자식2 Element 3 //자식3 회색부분은 flex container, 즉 부모박스의 영역이고, 초록색 박스들은..
BOX MODEL
BOX MODEL 박스는 줄바꿈이 되는(word_wrap) 박스와 줄바꿈 없이 옆으로 이어지는 박스로 구분된다 Block box abcdefghi jklmnop..... 줄바꿈 o , , , , 등... Inline box abcdefghijklmnop.... 줄바꿈 X 크기지정 X , , ,,,..등 display: inline-block inline box 처럼 옆에 붙으며 고유의 크기를 갖는다. 박스의 종류별 특징 줄바꿈 여부 기본 너비 width, height 사용 여부 Block Box O 100% O Inline-block X 글자가 차지하는 만큼 O Inline X 글자가 차지하는 만큼 X 박스의 구성 요소 항상 여백을 고려한 디자인을 해야한다. BORDER(테두리) //body 태그에 1p..
FONT
글꼴 property(속성) = font-family .fontbox { font-family: "MalgunGothic", "Verdana", "Font1"; } *[fallback글꼴] : 해당 글꼴이 미설치된 경우, 순차적으로 뒷 폰트로 적용. 그마저도 없으면 기본글꼴 (윈도우-맑은고딕 / 맥-apple 산돌 고딕) 글꼴의 단위 1. 크기를 절대 사이즈로 고정 (px) .mainParagraph { font-size: 24px; } 2. 일반적인 상황 (rem) .mainParagraph { font-size: 1rem; } > 기본 글자 크기가 1rem. > 2배로 크게하려면 2rem 등 > root의 폰트 크기에 따라서만 상대적으로 변함 3. 반응형 웹 > 접속한 플랫폼의 너비(width)에 따..
Id & Class Selectors
Id & Class Selectors ID부여 (id Selector-선택자) 하나의 고유 요소에 id부여 / #으로 선택한다. 그렇기 때문에 id를 부여하면 그것만 딱 골라서 CSS설정을 할 수 있다. (IN HTML) blahblahblah (IN CSS) #ID이름 으로 불러온다 #paragraph_1{ background-color: blue; } **주의!!** id는 하나의 문서에서 같은 이름으로 중복사용 불가 Class 부여 (Class Selector-선택자) Id selector와는 다르게 여러개의 요소에 class를 부여해서 한번에 CSS 설정을 할 수 있다. (.html) Apple Orange Mango (.css) .fruits_in_basket { text-decoration: ..
CSS 기초
CSS 스타일 (스타일 시트 언어) 효율적인 UI (User Interface)를 통하여 UX (User Experience) 를 사용자에게 제공하는게 주 목적 정보전달력 & 가독성 향상 / 색약기능, 다크모드 등 HTML 안에서의 CSS 적용 > HTML 태그에 직접 CSS 속성을 적용 할 수 있지만 헷갈릴 우려가 크고 구조와 내용을 담당하는 HTML과 디자인인 CSS를 분리하는 관심사 분리 측면에서 비권장 된다. (즉 HTML 파일에서 구조와 틀에 관련된 내용만 작업하고 디자인은 CSS파일에서 한뒤 연결 해서 쓴다.) (3번 코드) 다만, CSS 코드가 길지 않으면 HTML 요소에 직접 CSS 속성 추가가 가능하다. (1번, 2번 코드) 1. Inline CSS style ..... 2. Intern..