개발/HTML CSS
-
[CSS] fixed sticky개발/HTML CSS 2022. 2. 5. 19:32
출처: MDN fixed fixed의 설명을 보면 다음과 같은 문장이 있습니다. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. ... This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page. 해당 요소는 정규 문서 흐름에서 ..
-
[CSS] box-sizing개발/HTML CSS 2022. 2. 5. 16:18
출처: MDN box-sizing의 기본 값은 content-box입니다. 다음 코드의 결과를 봅시다. This is box div { width: 100px; height: 100px; background-color: red; } 위와 같으며 빨간색 영역이 100 x 100에 해당합니다. 오른쪽 그림은 개발자 모드에서 Computed 탭에서 확인하는 데이터입니다. 기본 값이 box-sizing의 기본 속성이 content-box이기 때문에 css에서 설정한 width, height의 값이 컨텐츠의 크기가 됩니다. 여기에서 패딩 10px을 주면 어떻게 될까요? 결과물만 보면 잘 된 것 같지만 Computed를 보면 border의 총 크기가 120px 되어버렸습니다. 이게 의도한 거라면 상관 없겠지만 대부..
-
HTML Emmet개발/HTML CSS 2022. 2. 4. 00:00
자주 쓰는 단축키를 소개합니다. 자동완성은 tab을 누릅니다. 아래 소개할 단축키는 전부 tab으로 완성됩니다. 참고 1. 텍스트: div{안녕} 안녕 2. 자식 요소: div>div 3. 형제 요소: div>p+a 4. 올라가기: div>p^div 5. 반복하기: ul>li*4 6. 그룹화: ul>(li>a)*4 7. 클래스: div.class-name 8. 아이디: div#id 9. 속성: img[alt="이미지 설명"] 10. 넘버링: div.item$*4
-
[CSS] Flexbox 간단 정리개발/HTML CSS 2022. 1. 31. 21:50
※ MDN 공식문서를 참고했습니다 flex container와 flex-items flex items가 flex container을 초과한 모습 flex-wrap: wrap을 사용해 아이템 정렬 flex-flow: row wrap Flexible sizing of flex items flex:1, flex:2 이런 식으로 해서 사이즈에 관한 비율을 정할 수 있습니다. 아래 그림은 앞의 두 아이템엔 flex:1을 적용하고 세 번째 아이템엔 flex:2를 적용한 것입니다. 1+1+2=4이므로 세 번째의 크기가 앞의 두 아이템을 합친 크기와 같습니다. 여기에서 앞의 두 아이템에 flex:1 200px, 세 번째 아이템에 flex:2 200px을 입력해보겠습니다. 이것의 뜻은 다음과 같은데요. flex-grow..
-
[CSS] flex 관련 짧은 팁개발/HTML CSS 2022. 1. 31. 19:37
flex를 이용하면 메인 축이 row일 때 가로 방향으로 아이템들을 편하게 정렬할 수 있습니다. 만약 텍스를 div 태그로 감싸서 정렬한다고 했을 때 column 방향에서는 무슨 일이 일어날까요? 컨텐츠 크기만큼 자동으로 잡아주는 것일까요. 다음 예제는 MDN에 나와 있는 것입니다. 같이 확인해봅시다. One Two Three has extra text more .box { display: flex; --align-items: flex-end; justify-content: space-around; } .box > div { border: 1px solid red; } .box :first-child { --align-self: center; } 위 코드는 아래처럼 페이지에 표시됩니다. flex-dire..
-
[CSS] justify-self개발/HTML CSS 2022. 1. 31. 19:18
MDN을 보면 다음과 같은 설명이 있습니다. flex 레이아웃에서는 적용이 되지 않는다고요. 그래서 예제를 보면 grid layout으로 되어 있습니다. 여기서 궁금한 건 flex 레이아웃에서 적용이 안 되는 이유입니다. more을 클릭해서 확인해봅시다. 여러가지 설명이 나오는데 간단하게 정리하고 넘어가겠습니다. 기본으로 설정된 메인 축(main axis)는 row입니다. 쉽게 말하면 가로 방향입니다. 가로 방향은 inline direction이라고도 표현할 수 있습니다. flex-direction:column; 명령어를 통해 메인 축을 column 방향으로 바꿀 수 있습니다. 쉽게 말해 세로 방향입니다. block direction이라고 표현할 수 있습니다. justify-content는 메인 축 방향..