display의 옵션 중에 block, inline, inline-block을 배웠었다.
이제 flexbox를 배워볼 건데 이걸 활용을 하게 된다면
아주 레이아웃 배치가 쉬워질 것이다.
사용법
display : flex;
부모 자식 태그 모두 block 상태라 자식 태그가 부모 태그 범위를 가린 모습이다.
block이던 박스 2개가 inline-block이 된 것을 볼 수 있다.
* flex 쓰지 않고 쪼개는 방법 : 따로 올라간 '실습'글 참고!
그냥 이렇게 힘들고 지저분하게 쓰지 말고 깔끔하게 flex 쓰자!
flex를 적용시키는 방법은
내가 제어하고 싶은 대상의 부모한테 코드를 적어야 한다.
부모 태그가 자식을 감싸야 자식에게 적용된다는 것이다.
이때 자식이 flex가 적용되어 inline-block이 되어도,
부모 태그는 여전히 block임을 주의해야 한다.
flex 된 박스들을 배치하는 두 가지 방법이 있다.
justify-content 현재 내가 가는 방향, 내 방향축에 따라 정렬(main-axis)
align-items main 축과 반대 방향축에 따라 정렬(cross-axis)
flex-direction(flex 기본축, 방향)이라는 속성의 기본값은 row(행)이다.
그렇기 때문에 justify-content가 가로 정렬이다.
flex-direction을 column(열)로 바꿀 때
flex-direction : column;으로 변경한다.
변경 후에는 세로 정렬이 되어있을때 justify-content를 사용해 정렬한다.
align-items가 무작정 세로정렬이 아니고
justify-content가 무작정 가로 정렬이 아니라서
메인 축이 어디인지 잘 확인하고 사용해야 한다.
flexbox의 자식들에게 flex 값을 추가해주면
스프링처럼 항상 브라우저의 크기에 맞게 비율이 늘어나고 줄어든다.
이 값은 자식들 자신에게 추가해주는 게 핵심이다.
여기에서 보이는 border는 테두리를 만들어 주는 것이다.
border: 1px solid black;
1픽셀 두께, 실선, 검은색 테두리를 만들겠다는 것이다.
테두리 속성의 종류는 매우 많으므로 w3schools 에서 검색해 필요한 것 찾아 쓰도록 하자!
flex기능은 너무 편리하지만 모든 상황에서 편리한 것은 아니다.
예를 들어 일정한 크기의 메뉴들이 일정한 비율로 나누어져 있다가
브라우저의 크기가 달라지면
브라우저 크기에 맞춰 비율을 맞추는 게 아니라
크기는 유지한 채로 아래로 내려가지게끔 만들고 싶다면 flex는 알맞지 않다.
이때 사용하는 속성이 flex-wrap이다.
flex-wrap의 기본값은 nowrap이기 때문에 flex가 한 줄에서 비율을 맞추고 있는 것이다.
flex-wrap : wrap;
으로 설정을 바꿔준다면 브라우저의 크기에 맞추지 않고
일정한 비율을 유지할 것이다.
menu안에 있는 div만 취급하기 위해서 스페이스바 한 칸 띄우고 이렇게 사용한다.
하지만 재활용이 불가능한 코드이다
div는 클래스가 아니기 때문에 앞에 . 이 붙지 않는다.
한 번만 쓰고 버릴 때 일일이 class를 주는 대신 이렇게 사용한다.
CSS의 주석 다는 방법은 /* ... */ 이다.
HTML의 주석 다는 방법은 <!-- ... --> 이다.
주석이란 해석기, 즉 브라우저가 무시하는 부분이다.
ml이 margin left, mr이 margin right, m이 margin이고 뒤에 숫자 10은 10px임을
미리 말했다고 가정하자.
.ml_10이라는 클래스를 귀찮지만 메뉴에 하나하나 넣어주더라도
훨씬 알아보기 쉽고 효율적이다.
이 코드는 재활용도 가능하다.
로고의 클래스에 스페이스바 누른 뒤 옆에 적어주면 로고에 적용된다.
가독성도 좋고 재활용성도 좋아서 짧은 코드에선 티가 잘 안 나지만
몇백 줄, 몇천 줄 코드를 짤 때는 아주 유용하게 사용할 수가 있다.
프로그래밍에서는 띄어쓰기를 할 수 없다.
단어 두 개가 합쳐지면 알아보기 힘들기 때문에 html에서는 언더바'_'를 활용한다.
이것은 규칙임!
낙타 표기법(camelCase) : 각 단어의 첫 문자를 대문자로 표기하고 붙여 쓰되, 맨 처음 문자는 소문자로 표기함
ex) outerBox -> 자바에서 사용
스네이크 표기법(snake_case) : 땅바닥을 기어 다니는 뱀의 모습을 따온 것으로
단어는 모두 소문자로 쓰되 단어 간의 구분은 밑줄로 대체를 하는 방식
ex) outer_box -> html에서 사용
[출처]
https://cafe.naver.com/metacoding
메타코딩 : 네이버 카페
코린이들의 궁금증
cafe.naver.com
메타 코딩 유튜브
https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9
메타코딩
문의사항 : getinthere@naver.com 인스타그램 : https://www.instagram.com/meta4pm 깃헙 : https://github.com/codingspecialist 유료강좌 : https://www.easyupclass.com
www.youtube.com
