Bumlog

속성 선택자(Selector) 이제 선택자 심화부분을 배워보자! 1. emmet에서 사용했던 방법(p[one=two]) 처럼 Class의 특징을 가지고 선택자를 지정할 수 있다! 예시: */a태그의 url을 직접 지정하여 select/* a[href="http://www.paullab.co.kr"] { font-size: 48px; } */class명을 직접 지정하여 select(물론 이렇게 쓸 일은 없다. 보통은 ".클래스명" 을 사용.)/* p[class="paullab"] { font-size: 48px; } CSS Combinator 자세한 내용은 아래 참고 https://www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference W3S..

FLOAT 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있다. Float을 적용하면 블록요소가 마치 인라인 요소처럼 컨텐츠 크기만해지는 특징이 있다. 인라인 요소는 horizental하게 쌓인다. 그런데 position을 사용하면 nomal flow에서 벗어난다. 특징 1. overlow는 부모요소가 자식요소를 인식하게 만들어준다. (visible 제외, 보통 auto나 hidden사용) 2. width:100%에서 보더값 때문에 스크롤이 생길 수 있다. 3. 형제 요소는 clear를 통해 알아본다. 부모는 해당이 안된다. (float left는 해제하기 위해 clear left를 쓴다. float 상관없이 해제하기 위해서는 celar:..

NOTION 강사: 해봄님 https://haebom.notion.site/Pre-b0a07734e2ee4150b4ea08ceb09e0e30 멋쟁이 사자들을 위한 Pre-노션 소개 및 가이드 1. 노션 소개 및 특징 🎅 haebom.notion.site

1. TEXT text-indent를 사용하지 않는 이유 1. 본인 자체가 갖고 있는 height값 등이 있기에 예상 외 상황이 발생할 수 있다. 2. 컨텐츠 전체에 영향을 끼치기에 성능을 저하시킨다. text-decorantion: none 1. a태그 밑줄 없앨 시 사용. 그 외 용도로 다른 text-decoration은 잘 사용하지 않음. 말줄임('...')표시 1. text-overflow:ellipsis; 요소의 크기를 넘친 텍스트를 말줄임 처리합니다. 2. POSITION position이란 웹 페이지에서 만든 html 태그나 id, class 박스 등의 위치를 지정해주는 속성입니다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다. 2.1 STATIC 기본적으로 ..

블록요소 자체를 페이지 정중앙에 배치(absolute 사용) position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); position:absolute는 부모 엘리먼트 위치를 기준으로 절대적인 위치 값 설정이 가능합니다. left와 top을 50%로 설정해 중앙에 정렬. => 이때 해당 요소의 좌측상단이 중앙에 오게 됩니다. transform: transition(-50%,-50%)로 해당 요소의 좌측상단이 아닌 정중앙이 페이지 중앙에 오게 만듬. 이때 transition의 값은 (x축, y축)을 의미합니다. 궁금한점 왜 블록요소가 갑자기 인라인요소처럼 변하는 걸까? 해결 absolute 선언 시, block 레벨 요소의 widt..

HTML CSS /* animaion */ @keyframes 귀오른쪽 { from { transform: rotate(30deg); } to { transform: rotate(40deg) translate(10px); } } @keyframes 귀왼쪽 { from { transform: rotate(-30deg); } to { transform: rotate(-40deg) translate(-10px); } } /* setting */ :root { --pri: #ce705f; --sec: ivory; } /* reset */ body { margin: 0; padding: 0; } /* layout */ /* design */ *, *:after, *:before { box-sizing: borde..

우선 overflow:hidden 은 HTML5이고, display:none은 CSS이다. 관련 내용은 스택오버플로우의 내용을 참고했다. 실제로 웹브라우저에 보여지는 부분에서는 hidden이나 display:none이 차이가 없다고 한다. 하지만 유일한 차이점은 "접근성"이다. display:none의 경우 스크린리더로 읽을 때, 읽히지 않지만, hidden 같은 경우는 읽힐 수 있다는 것이다. https://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone What is the difference between the hidden attribute (..

1. CSS의 단위 1.1 VMIN과 VMAX 'n'vmin : 뷰포트에서 짧은 쪽 기준 n% 'n'vmax : 뷰포트에서 긴 쪽 기준 n% 모바일의 전체크기: width: 100vmax height: 100vmax 이해가 쏙쏙 되는 코드 vmax: 뷰포트에서 긴 쪽 기준 n% vmin: 뷰포트에서 짧은 쪽 기준 n% 2. OVERFLOW overflow 속성은 요소의 콘텐츠가 너무 커다랄 경우 요소를 어떻게 처리할지 지정합니다. overflow-x, overflow-y의 축 별로 값을 설정할 수 있습니다. overflow 속성은 첫 번째 overflow-x, 두 번째 값은 overflow-y를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용하는 축약형이 됩니다. 2.1 OVERFLOW의 중..

4. 크롬은 최소 폰트사이즈가 10px이다 문제발생! 크롬 브라우저에서 화면을 축소하다보면, 어느 지점부터 이미지 크기는 줄어드는데 텍스트 크기는 줄어들지 않는 현상을 발견 할 수 있다. 이는 크롬의 최소 폰트사이즈가 10px로 고정되어 있기 떄문이다. (브라우저마다 상황이 다 다름) (크롬 -> 세팅 -> 폰트 에서 "최소 글꼴 크기"를 통해 개인적으로 10px 이하로 설정도 가능) 기억할 점! 웹 개발자는 폰트크기를 최소 10px 이하로 하지 않도록 주의 5. 생각처럼 동작하지 않는 height: 100% 이미지를 화면 배경으로 넣어보기로 해보자! width: auto; 요소의 부모 크기 기준으로 가득찬다. height: auto; 요소의 자식 기준으로 자동 조절된다. height: 100%를 넣을 ..