content => 여러 줄 items => 1 줄 self => 요소 1개 justify => 주축 align => 교차축 1. 배치 flex-direction flex-wrap 2. 공간 분배 justify-content align-content 3. 정렬 align-items align-self

None 요소를 화면에 표시하지 않는다 공간 조차 부여되지 않음 평상시 None type 적용 개발자 도구를 보면, 코드가 존재하고 있기는 하다. 그런데 그냥 화면에서 사라진 것일 뿐이다. 나중에 반응형 웹사이트를 만들 때, 사용하게 된다. 디바이스의 크기가 작아지면, 레이아웃의 일부 영역이 사라지게 해야한다. 레이아웃을 바꿀 때, display none을 활성화시키면서 이 display를 없애고 감싸고 있던 다른 display를 보여주게 되는 것이다. 더보기 box1 box2 - None box3

CSS Box Model inline type의 수평정렬 inline은 margin 영역이 비어있기 때문에, text-align이라는 속성을 통해서 정렬을 진행한다. 똑같은 box라도, inline이냐 block이냐에 따라서 정렬하는 스타일이 다르게 된다. * 참고 block type의 수평정렬 (h1~h6, p, div) https://bayleaf07.tistory.com/184

CSS Box Model BLOCK type의 수평정렬 block은 항상 margin이 꽉 차있기 때문에 margin을 통해서 수평정렬을 진행한다. Q. 문제 1 (BLOCK의 수평정렬 _ h1~h6, p, div ) 파란색 박스를 가운데로 옮겨보세요. 이렇게 생각하면 안된다. NONO 답이 안나옴. 정렬의 주체 (파란색 상자)를 어떻게 할지 생각하는게 아니라 남는 영역 (margin)을 어떻게 할지 생각해야한다. 이제 CSS 배치에서는 생각하는 관점을 바꿔야한다. 만약 파란색 상자가 로 감싸진 block box라고 해보자. 그러면 이 block box를 옮기려면, 오른쪽에 남는 margin 영역을 컨트롤 해야한다. CSS에서 배치라는 건, 영역을 나누는 싸움이다. 오른쪽에 있는 margin 영역을 좌,..

Inline a, img, span 다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로 밀어낼 수는 없다. Inline 본인의 영역이 커지기는 했지만, 다른 요소들을 밀어낼 수 는 없음 a, span, img { /* inline 요소들 */ border: 3px solid rgb(58, 161, 240); /* padding을 사용해서 수직방향으로 밀어내보기 */ padding-top: 100px; } Inline은 수평방향으로는 다른 요소들을 밀어낼 수 있음 아래에 보면 "자체 콘텐츠..."라는 말이 오른쪽으로 밀려난 걸 알 수 있음 a, span, img { /* inline 요소들 */..

* Normal Flow CSS를 적용하지 안핬을 경우 웹페이지 요소가 기본적으로 배치되는 방향 모든 웹페이지의 시작 요소들은 모두 다 좌측 상단에서 시작한다. (박스, 텍스트, 이미지 등등) inline flow Block flow Q. 블락 요소는 왜 아래로 흐를까? 오른쪽을 다 차지하고 있기 때문에, 다음 것이 오른쪽으로 나올 수가 없기 때문이다. 오른쪽이 다 있기 때문에 어쩔 수 없이 아래로 나오게 되는 것. inline이 파란색 block이 검정색이다. 더보기 Normal flow Lorem, ipsum dolor sit amet consect explicabo block 요소는 기본적으로 부모 요소의 너비 100%를 차지하며, 자식 콘텐츠의 최대 높이를 취한다. block 요소의 총 너비와 총..

https://bayleaf07.tistory.com/102 CSS Box Model _ 구성요소 보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요. bayleaf07.tistory.com ▷ box-sizing 속성 content-box (x) vs ♥border-box(o)♥ 비교하기 content-box(X) ♥border-box(O)♥ 내가 설정한 박스 사이즈는 200px이다. 그런데, 실제로 잡히는 width값은 248px ㅇㅅㅇ ! Q. 왜 그럴까? content 200px + padding 20px*2 + border4px*2 = 248px 내가 원하는 값과는 다르게 나온다 너무 불편... ㅠㅠ 내가 설정한 박스 사이즈는 200px이다. 내가 원하는대로 width값이 잘 잡혔다...

CSS 상속 기본적으로 CSS는 상속을 통해 부모 요소의 속성을 자식에게 넘겨준다. 재사용성을 높이기 위해서 Q. 궁금한 것 parent 의 컬러를 바꿨을 때, child 의 색도 바뀌게 될까? => 되는 경우도 있고, 안되는 경우도 있다. 되는 경우 O 안되는 경우 X Text에 관련된 것 (폰트, 색깔, 폰트의 정렬 text-align) opacity 투명, 불투명 visibility 가시성 배치에 관련된 것 Box Model (너비, 높이, 보더(border), box-sizing 등) * 보더는 테두리의 두께 Position ( position, top/right/bottom/left, z-index) 1. 텍스트 관련 O 더보기 Father child1 child2 2. 배치 관련 X 더보기 F..

Quiz ) 1 ~ 7이 어떤 색이 될지 보지 않고 맞춰보기 1 2 3 4 5 6 7 8 ▷ 정답 더보기

Q. 선택자가 겹쳤을 때, 누구를 먼저 보여줄 것인가? Specificity 명시도 결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘 이 알고리즘 안에 내부적으로 명시도 점수가 존재한다. 1. ! important 2. Inline 스타일 3. id 선택자 > class 선택자 > 요소 선택자 (h1~h6, p) 4. 우선순위 같을 때는 마지막에 선언한거 4. 만약에 우선순위가 같다면, 마지막에 나오는 선언이 사용된다 더보기 This is Specificity