개발은 아름다워

display:block; 등을 활용하면서 추가 적용했던 부분을 flex를 배우면서 정말 편한 태그임을 확인하고 적용해보았음

부모클래스에게 적용

flex 사용하기 위해서는 부모클래스에게 display:flex; 적용 후 활용해야 한다.

자식클래스에게 적용

flex-direction : flexbox 내에서 flexbox 항목을 정렬하는 방법 (display 적용과 동일하게 활용)

flex-direction: row; : 기본값, 기본 축을 따라감(텍스트 방향과 같이 좌에서 우로 정렬)

flex-direction: row-reverse; : 주 축을 따라감, 텍스트 방향과 반대 방향으로 정렬

flex-direction: column; : 교차 축을 따라감, 텍스트 방향과 같은 방식으로 정렬

See the Pen Untitled by devCJH (@devcjh) on CodePen.

상단 메뉴바 정렬을 위해서 중간에 공백이 발생하여 이를 제거하기 위해서 여러 가지 방법이 있는데,

그중에서 가장 효율적인 방법에 대해서 작성하였습니다.

개념 : float 

* 요소를 왼쪽이나 오른쪽으로 밉니다.

float: none; → 자연스러움 유지

float: left; → 왼쪽으로 밀기

float: right; → 오른쪽으로 밀기

** 위 태그를 사용시 반드시 적용해야 함

. row::after {
  content:"";
  clear:both;
  display:block;
}

See the Pen Untitled by yeomboyeon (@yeomboyeon) on CodePen.

풀 다운 메뉴와 토글 사이드바를 종합한 실습(5분 안에 완성하기)

주요 사용 태그

• position:fixed; → 화면이 스크롤해도 끊김 없이 계속 나옴
• transition:태그명 1s; → 사이드바 나오고 사라지는 효과(시간대별로 느리게 빠르게)
• 태그명:hover  → 마우스 올리면 나오는는 효과
• display:inline-block; → 높이, 너비를 지정하지 않는 한, 최소한으로 줄어들게 하기, 가능한 최대한 한줄에 쓰기
• white-space:nowrap; → 줄바꿈 금지
• a:not(:only-child)::after  → 새로운 막내 자식 추가.(after은 맨 뒤에 표시, only-child 는 자식이 있는 부모 태그는 모두 표시하나 not이 표시되어 반대로 표시)
• content: "[+]"; → after에 이어서 작성해주어야 해당 태그가 막내 자식이 추가됨.
• border:2px solid blue; → 테두리 효과

** 역시 반복 숙달하면서 익히는게 제 맛이네요.

See the Pen Untitled by yeomboyeon (@yeomboyeon) on CodePen.

개념 : overflow CSS 약식 속성 은 요소의 오버플로에 대해 원하는 동작을 설정합니다 . 
즉, 요소의 내용이 블록 형식 컨텍스트 에 맞지 않을 때 양방향으로 설정합니다.

overflow : visible
콘텐츠는 잘리지 않으며 패딩 상자 외부에서 렌더링될 수 있습니다.

overflow : hidden
패딩 상자에 맞게 필요한 경우 콘텐츠가 잘립니다. 스크롤 막대가 제공되지 않으며 사용자가 스크롤할 수 있도록(예: 끌기 또는 스크롤 휠 사용) 지원이 허용되지 않습니다. 콘텐츠 는 프로그래밍 방식으로 스크롤될 수scrollLeft 있으므로(예: 또는 메서드 와 같은 속성 값을 설정하여 scrollTo()) 요소는 여전히 스크롤 컨테이너입니다.

overflow : clip
와 유사하게 hidden콘텐츠가 요소의 패딩 상자에 잘립니다. clip와 의 차이점 은 키워드가 프로그래밍 방식 스크롤을 포함한 모든 스크롤을 금지 hidden한다는 것 입니다. clip상자는 스크롤 컨테이너가 아니며 새 서식 컨텍스트를 시작하지 않습니다. 새 서식 컨텍스트를 시작하려면 를 사용하여 시작할 수 있습니다 display: flow-root.

overflow : scroll
패딩 상자에 맞게 필요한 경우 콘텐츠가 잘립니다. 브라우저는 콘텐츠가 실제로 잘렸는지 여부에 관계없이 항상 스크롤바를 표시하여 콘텐츠가 변경될 때 스크롤바가 나타나거나 사라지는 것을 방지합니다. 프린터는 여전히 넘치는 콘텐츠를 인쇄할 수 있습니다.

overflow : auto
사용자 에이전트 에 따라 다릅니다 . 내용이 패딩 상자 안에 맞는 경우 와 같아 보이지만 visible여전히 새 블록 서식 컨텍스트를 설정합니다. 콘텐츠가 넘칠 경우 데스크톱 브라우저는 스크롤바를 제공합니다.

overflow : overlay 더 이상 사용되지 않음
와 동일하게 작동 auto하지만 공간을 차지하는 대신 콘텐츠 위에 스크롤 막대가 그려집니다.

개념 : white-space CSS 속성은 요소 내부의 공백을 처리하는 방법을 설정합니다.

[속성]
- 공백이 축소 되는지 여부와 방법 .
- 소프트 랩 기회에서 줄이 줄 바꿈될 수 있는지 여부.

* 참고 : 단어 자체 를 분리하려면 overflow-wrap, word-break 또는 hyphens대신 사용하십시오.

white-space : normal
공백 시퀀스가 ​​축소 됩니다. 소스의 개행 문자는 다른 공백과 동일하게 처리됩니다. 
라인 상자를 채우는 데 필요한 만큼 라인이 끊어집니다.

white-space : nowrap
와 같이 공백을 축소normal 하지만 소스 내에서 줄 바꿈(텍스트 줄 바꿈)을 억제합니다.

white-space : pre
공백 시퀀스가 ​​유지됩니다. <br>줄은 소스와 요소 의 줄 바꿈 문자에서만 끊어집니다 .

white-space : pre-wrap
공백 시퀀스가 ​​유지됩니다. 줄 바꿈 문자에서 줄은 줄 바꿈되며 <br>줄 상자를 채우는 데 필요합니다.

white-space : pre-line
공백 시퀀스가 ​​축소 됩니다. 줄 바꿈 문자에서 줄은 줄 바꿈되며 <br>줄 상자를 채우는 데 필요합니다.

white-space : break-spaces
동작은 pre-wrap다음을 제외하고 의 동작과 동일합니다.
보존된 공백의 시퀀스는 줄 끝을 포함하여 항상 공간을 차지합니다.
공백 문자 사이를 포함하여 보존된 모든 공백 문자 뒤에 줄 바꿈 기회가 있습니다.
이러한 보존된 공간은 공간을 차지하고 매달리지 않으므로 상자의 고유 크기(최소 콘텐츠 크기 및 최대 콘텐츠 크기)에 영향을 줍니다.