Etc./CSS10 [CSS] position 정리 https://developer.mozilla.org/ko/docs/Web/CSS/position position의 목적은 HTML 문서 상의 요소를 배치하기 위해서이다. position은 기본적으로 normal flow, float와 함께 층위적으로 구분된다. 정확히 이렇게 층위가 구분되는 것은 아니겠지만 물리적으로 이해를 간단히 하기에 도움이 된다. http://blog.wystan.net/2009/01/12/relationships-between-position-float-display 오래된 글이지만 정리가 잘되어 있어서 리다이렉트 float, normal flow와 함께 비교하며 이해하면 더 이해가 잘된다. position에는 5가지 값이 있다. static / relative / absolut.. 2021. 11. 21. [CSS] inline vs inline-block https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=leesd88&logNo=220682157303 참고한 블로그 깔끔하게 정리되어 있어 한번쯤 보면 좋을 것 같다. 자꾸 헷갈리고 검색하게 돼서 한번 다시 정리 inline - width. height 적용 불가 - 상하 margin, padding(maring-top, margin-bottom, padding-top, padding-bottom) 적용 불가 - line-height 적용 불가 inline-block inline에서 안되던 것들이 적용 된다. - width. height 적용 가능 - 상하 margin, padding(maring-top, margin-bottom, pa.. 2021. 11. 21. [CSS] 선택자 정리 + 헷갈리는 선택자 https://devahj.tistory.com/83 과거 정리해둔 것이 있지만 허접한 정리는 잊고 다시 싹 다 정리해본다. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors 어김 없이 MDN부터 출발 기본 선택자(Basic selectors) 더보기 전체 선택자(*) -> 문서 내 모든 요소(element) 선택 * { } 타입 선택자(elementname) -> 해당 이름을 가진 모든 요소를 선택 /* for example*/ div { } -> 모든 div 요소들이 선택된다. 클래스 선택자(.classname) -> class 특성(attribute)이 classname인 모든 요소를 선택 인 태그가 있을 때 .one으로 해당 요소 선택 가능.. 2021. 11. 18. [CSS] margin collapsing 구글에 'margin collapsing'만 쳐도 이런 제목의 MDN 문서가 보인다 ㅋㅋ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Mastering margin collapsing - CSS: Cascading Style Sheets | MDN The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a beha.. 2021. 11. 11. [CSS] flex flex를 정리해보자 우선 flex를 실습 해보기에 너무 좋은 사이트 https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 사실 그냥 위에 1분 코딩 튜토리얼을 거치고 개구리까지 배치시키면 flex는 끝이라 볼 수 있다. https://developer.mozil.. 2021. 11. 6. [CSS] inline element https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/ CSS Inline vs Inline-Block vs Block | SamanthaMing.com Alright, let’s switch up Pictorials to cover CSS. Beside JavaScript algorithm questions, as a Front End Developer, you might also get asked CSS related quest... www.samanthaming.com 참고한 사이트 inline element는 height, width를 가지지 못한다. CSS로 width, height를 넣어줘도 동작하지 않는다. 단,.. 2021. 11. 5. [CSS] 선택자 우선순위 계산 거시적으로 따지면 tag와 가까울 수록 우선 순위가 높다고 할 수 있다. 인라인CSS(태그 요소로 들어 있는 style) > 내부CSS(head 영역에 들어가 있는 style) > 외부CSS(html 밖에 있는 css 파일) 이런 원리에 의해서 style 태그 내부 가장 아래에 있는 선택자가 우선시 되는 것이다. 그런데 이렇게 단순하게 해소가 된다면 얼마나 좋겠냐만 실제로 그렇지 않다. https://developer.mozilla.org/ko/docs/Web/CSS/Specificity https://specifishity.com/ -> MDN에서 redirect해준 쉽게 이해할 수 있는 예제 가중치 점수 계산을 통해 우선순위가 정해진다. 가중치 점수 !important >>>> style attrib.. 2021. 11. 3. [CSS] 가상 클래스(Pseudo-class) vs 가상 요소(Pseudo-element) 헷갈리기 쉬운 선택자. 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용한다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDN A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. developer.mozilla.org htt.. 2021. 11. 3. [CSS] float 이거 분명히 나중에 검색할 단어 찾기도 어렵고 헷갈릴꺼다. 왼쪽 정렬 오른쪽 정렬 이런 HTML 코드가 있을 때 /* CSS 코드 */ .left-align { text-align: left; } .right-align { text-align: right; } 이렇게만 쓰면 왼쪽 정렬 오른쪽 정렬 이렇게 다른 줄로 나온다. 이 둘이 한 줄로 나오게 하고 싶다면 float를 써야한다. /* CSS 코드 */ .left-align { float: left; } .right-align { float: right; } 이렇게 써주면 "왼쪽 정렬 ~~ 오른쪽 정렬" 한줄로 나온다! https://developer.mozilla.org/ko/docs/Web/CSS/float https://developer.mozi.. 2021. 10. 29. [CSS] 선택자(후손 및 자손, 동위) CSS를 너무 겉핥기처럼만 보고 지나갔나 보다.. 다 까먹었네 div li { /* 이거는 후손 선택자, div 안에 li든, div 안에 div 안에 div 안에... 암튼 div 안에 있는 모~든 li 태그 선택자 */ /* 쓰고자 하는 코드 */ } div > h1 { /* div 바로 밑에 있는 h1 태그만, 자손 선택자 */ /* 쓰고자 하는 코드 */ } 동위 선택자 + vs ~ h1+div{}/* 얘는 h1태그 바로 밑에 붙어 있는 동등한 위치의 div 한개만 선택하는 선택자 */ h1~div{}/* 얘는 h1태그와 동등한 위치에 있는 div 태그 싹다 선택 */ 2021. 10. 28. 이전 1 다음