본문 바로가기

HTML+CSS

 (30)
html/css #15-2-부족한 점 보충2 (지그재그/이벤트 풀이2) flexbox의 통제에서 벗어나려면 -> position: absolute 왼쪽 사진과 오른쪽 컨텐츠박스가 flex로 잡혀있을 때 두 컨텐츠들을 고려하여 상하정렬이된다. 이를 깨기 위해서는 왼쪽 cover에 position: absolute를 준다. >> 이전에 바리스타때 나왔던 이야기이다. display: block으로 수직정렬해준다면 지정되어있던 position을 unset으로 풀어줘야 이미지가 나온다. (이미지가 absolute로 물리적으로 잡히지 않고 있기 때문에) .plate { display: block; } .plate-cover { width: unset; aspect-ratio: 8/6; } .plate-cover-src { position: unset; } 내의 텍스트 길이가 너무 늘어..
html/css #15-부족한 점 보충 (지그재그 풀이) flex-grow: 1 flex-basis: 0 flex-grow로 여백공간이 가득찬 상태에서 flex-basis가 움직이지 않으므로 (flex-basis: auto 가 아님) 가득찬 상태로 유지가됨! -> 컨텐츠 길이에 따라 좌지우지 되지 않고 고정됨 .plate-contents { box-shadow: inset 0 0 20px lime; flex-grow: 1; flex-basis: 0; /*basis가 가득찬 상태에서 grow로만 가득 찬 부분이 있다! -> 컨텐츠에 의해 좌지우지 되지 않는다.*/ } 이미지 초기화 width: 100% -> 기본스타일 초기화로 부적합하다. max-width: 100% -> 기본스타일 초기화로 적합하다. 부모보다 클때는 부모 컨테이너, 작을때는 작게 vertica..
html/css #14-transform, 애니메이션 가운데 정렬하는 방법 (position + absolute 사용) position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50%) position: absolute; left : 50%; top : 50%; /*position은 컨테이너 블록 기준의 너비, 높이 퍼센테이지이다. 꼭짓점이 해당 위치에온다. */ transform: translate(-50%, -50%); /*자기자신의 너비, 높이 기준의 퍼센테이지이다. 우리 눈으로 안맞는 부분을 맞춰주기 위해서 쓴다. */ transform: translate( x, y) 이 상황에서 머리를 아래로 이동하려고 하면 transform: translateY(60%); = 내 자신의 높이를 ..
html/css #13 Braista 실습 position, --, media쿼리복습, 그리드시스템 이미지가 변경될 가능성이 높은지? (header 배경) -> 업데이트가 되는 부분은 마크업으로 들어가는 것이 훨씬 유리하다! absolute로 지정된 요소는 flex items가 될 수 없다. ㄴ 이 요소의 배경은 absolute로 지정되어, z-index: -1로 배경처럼 설정되어 있다. 그렇다면 flexbox를 적용하더라도 flexitems가 되지 않는다 . -- 사용해서 사이즈/색상 관리하기 :root { --gap: 20px; --color-primary : salmon; --color-primary-light : seashell; } .section{ background-color: white; border: 1px solid var(--color-primary); padding: var(--g..
html/css #12-css variables 색상관리 .card.type~~ 하위에 있는 자식 요소에는 모두 var(--accent-color) 를 선언하여 해당하는 색상을 관리해줄 수 있음 색상 변경과 같은 유지보수에적합하다. ex) color : var(--accent-color); background-color: var(--accent-color); :root로 초기화하면 global vatiable이 된다.
html/css #11-vw단위, z-index 쌓임맥락, 벤다이어그램 쌓임맥락 MDN https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context 쌓임 맥락 - CSS: Cascading Style Sheets | MDN 쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 developer.mozilla.org 창 크기에 따라 이미지가 비율을 유지할 수 있도록 만든다 1번째 방법) min-height에 vw값 주기 .header { box-shadow: inset 0 0 20px ..
html/css #9-flexbox 반응형 맛보기: 수도 엘리먼트, 네거티브마진 (insideout 과제) insideout 과제 l-wrapper로 통일된 레이아웃 만들기 header와 body 안의 컨텐츠가 한덩어리로 관리가 되어야 한다. ㄴ같은 클래스를 주어 width 크기를 동일하게 준다. line-height : 1 -> 폰트 크기와 같이 가져가겠다! 수도 엘리먼트 contents_subtitle::before{ content: 'oooo'; } => 새로운 개념! css에서 마크업을 조작할 수 있는 기법. : -> 한개짜리는 sudo class 이고 :: -> 두개짜리는 ::before -> 내부 컨텐츠 이전에 해당 마크업을 추가한다. ::after -> 내부컨텐츠 이후에 해당 마크업을 추가한다. *꾸미는 용도에서 마크업을 추가하는 일에 활용한다. (확장이 많이될 수 있다.) 컨텐츠 flexbox나..
html/css #10-My Bucket List 정리 (수도 엘리먼트, flexbox 내부 컨텐츠 안정화, box-sizing) *수도 엘리먼트는 inline 이다. 수도엘리먼트를 통해 꾸밈 주기 .bucketlist-header { height: 120px; /*디자이너가 의도한 값*/ display: flex; align-items: center; color: #FF007A; } .bucketlist-header::before { background-color: currentColor; /*★수도 엘리먼트는 inline 이다!!! ★*/ display: inline-block; content: ' '; width: 8px; height: 32px; border-radius: 0 10px 10px 0; flex-shrink: 0; } ㄴ 상위 박스는 flex 로 부여하여 좌우 정렬한다. ㄴ sudo 엘리먼트 before를 통해 ..

티스토리툴바