CSS (8) 썸네일형 리스트형 [CSS] display에 대하여 # inline - 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치 - 대표 lnline 엘리먼트 : , , 태그 등 여러 개의 inline 엘리먼트들을 아래와 같이 마크업하면, 줄바꿈없이 순서대로 한 줄에 보이게 된다. HTML 삽입 미리보기할 수 없는 소스 - width, height 속성 : 무시 → 해당 태그가 마크업하고있는 컨텐츠의 크기만큼만 공간을 차지하도록 되어 있기 때문 - margin, padding 속성 : '좌우'간격만 반영 O. 상하 간격은 반영 X. *inline요소는 안에 내용이 있어야 화면에 표시된다. HTML 삽입 미리보기할 수 없는 소스 , , 태그 모두 CSS로 꾸몄음에도 불구하고 화면에 나오지 않고 있다. # block - 전후 줄바꿈이 들어가 다른 엘리먼트들을 .. CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript # Flexbox란? - box(container)와 item들을 행, 열로 자유자재로 배치시켜줄 수 있는 유용한 것. - CSS의 꽃이라고 불린다. - Flexbox만 잘 이해해도 웹사이트의 layout을 잘 구성할 수 있다. 예전에는 layout을 만들기 위해서 position, float, table을 이용했었다. 가능은 했지만, 너무 복잡하고 시간도 많이 소요됐다. ** float에 대하여 원래의 목적 : 이미지와 텍스트들을 어떻게 배치할 것인가에 대해서 정의하기 위해 나타난 것. "float: left"로 지정하면 이미지가 왼쪽으로 지정되고 텍스트들이 이미지를 감싸면서 배치된다. # Flexbox에서 중요한 2가지 Flexbox는 2가지만 이해하면 된다. 1/ container-item cont.. 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ by 드림코딩 언제, 어떤 경우에 어떤 unit을 쓰는게 좋은지 한번 알아보자! 많은 unit은 두가지 카테고리로 나눠질 수 있다. - 절대적 unit : px - 상대적 unit : %, v*, em, rem 언제, 어떤걸 쓰는게 좋을까? 1/ 부모요소의 사이즈에 따라서 사이즈가 변경되어야 한다면 → %, em 2/ 부모요소의 사이즈에 상관없이 브라우저 사이즈에 따라 변경되어야 한다면 → v*, rem 3/ 요소의 너비와 높이에 따라서 사이즈가 변경되어야 한다면 → %, v* 4/ font 사이즈에 따라서 사이즈가 변경되어야한다면 → em, rem # em vs rem 어떤 차이점이 있나요? - em: relative to parent element - rem : relative to root element em v.. 가상 클래스 셀렉터(Pseudo-Class Selector) 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. [ 특정 상태의 예 ] 마우스가 올라와 있을 때 링크를 방문했을 때와 아직 방문하지 않았을 때 포커스가 들어와 있을 때 이러한 특정 상태에는 원래 class가 존재하지 않지만, 가상 class를 임의로 지정하여 선택하는 방법이다. 가상 클래스는 마침표(.) 대신, 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다. selector:pseudo-class { property: value; } # 예시 다음은 a 요소가 hover 상태일 때(마우스가 올라와 있을 때-특정 상태) 글자색이 red로 변경되고, input요소가 focus 상태(특정 상태)일 때 backgroud-color가.. [CSS] transition (트랜지션) # transition이란? CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 기간(duration)에 걸쳐 일어나도록 하는 것. 아래 div 요소는 기본 상태에서 'hover상태'로 변화할 때, CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화한다. 상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 변화는 지체없이 즉시 발생한다. 위 예제의 경우, div요소에 마우스가 올라가서 hover상태가 되면, div 요소의 border-radius, background 프로퍼티의 값이 즉시 변경된다. See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen. transition은 상태 변화에 동반하여 변경되는.. HTML파일에 CSS 적용하는 방법 3가지 HTML 파일(문서)에 CSS 스타일을 적용하는 방법은 3가지가 있다. 바로, 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 1. 인라인 스타일(Inline style) : HTML 요소 내부에 style속성을 사용하여 CSS스타일을 적용하는 방법. 해당 요소에만 스타일을 적용할 수 있다. 인라인스타일 위 예시에서는 해당 h2 요소에만 color:green, text-decoration:underline 스타일을 적용할 수 있다. 인라인스타일 방식은 한번 설정된 스타일을 변경하기 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용.. 박스를 가운데정렬해주는 방법 margin: 0 auto 정렬대상이 block 요소일때 사용할 수 있다. 그리고, 이 정렬대상인 block 요소의 width가 정해져있어야한다. div 태그같은 경우, width="165"과 같이 고정된 값이 있어야한다. 그래야 width를 제외한 나머지 공간을 margin값이 똑같이 나눠가지면서 가운데 정렬이 된다. margin : 0 auto margin 위아래 값은 주지 않고, 좌우는 균등하게 값을 주어 정중아에 두게 되는 것. 출처 : https://www.codeit.kr/community/threads/10663 text-align : center inline 요소가 정렬되는 방식. 정렬을 시킬 경우, 부모 block 요소를 가진 부분에 적용하면 된다. Q. inline요소에 직접 text-align:center을 할때 적용이 안되는 이유? inline 요소는 그 content의 넓이만큼 공간을 차지한다. ex: , 그래서 그 inline 요소에 직접 text-align: center를 한다면 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 거기다가 text-align을 해도 움직일 공간이 없다. 그래서 부모 block요소에 적용을 하게 된다. ex1: block 요소인 h1 태그에 text-align: center를 적용한 경우 See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen. ex2: inlin.. 이전 1 다음
