HTML + CSS (10) 썸네일형 리스트형 display: flex 에서 float: left, right가 먹히지 않을 때 You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle. So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the right as you can see here Fiddle. What you can do now is change order of elements and set (order: 2) on.. 테일 윈드 정리 max-w-sm Tailwind CSS는 다양한 화면 크기에 대응하는 반응형 CSS 유틸리티 클래스를 제공합니다. 일부 클래스는 아래와 같습니다. sm: 640 픽셀 이상의 작은 화면 (스마트폰 가로모드) md: 768 픽셀 이상의 중간 화면 (태블릿 가로모드) lg: 1024 픽셀 이상의 큰 화면 (노트북, 데스크탑) xl: 1280 픽셀 이상의 매우 큰 화면 (큰 모니터) 2xl: 1536 픽셀 이상의 매우 매우 큰 화면 이러한 반응형 CSS 유틸리티 클래스를 사용하면, 화면 크기에 따라 레이아웃이 자동으로 조정되어 모바일에서부터 데스크탑까지 다양한 디바이스에서 좀 더 일관성있는 UI를 구현할 수 있습니다. 예를 들어, lg:max-w-xl과 같은 클래스를 사용하면, 노트북 크기 이상의 화면에서만 최.. HTML + CSS 주요 개념 정리(8) - 마무리 이제 마지막으로 html 간단한 동적인 그림을 표현해보겠습니다 앞서 이전에 여러 가지 방법으로 동적인 표현이 가능하고 제가 생략한 부분이 많습니다. 다만 제가 중요하게 생각하고, 좀 신선 한걸로만 복습 차 작성하는 것입니다. 1. anmation.css 추가하여 동적이 표현 추가 이전까지는 html과 css 파일을 이용하여 웹페이지를 구성하였는데 이제 또 하나의 css파일을 추가 하여 동적인 표현을 추가하였습니다. 이름은 animation.css를 했으므로 단순히 같은 css파일지만 동적인 부분과 레이아웃 부분을 따로 코딩하여 나중에 수정할 때 가독성 부분에서 용이하게 하기 위하여 따로 둔 것입니다. 우선, index.html를 보겠습니다. 그림을 보면 라는 구문이 보일 겁니다. 이건 간단하게 생각하면 .. HTML + CSS 주요 개념 정리(7) - 레이아웃에 영향을 미치는 요소 Ⅲ 레이어에 Z 축 조정에 영향을 주는 z-index 속성과 브라우저의 왼쪽, 오른쪽 끝에 공간을 배치할 때 사용하는 float와 clear 속성에 대해 알아보겠습니다. 1. 레이어 z축을 조정하는 속성, z-index z축z 축 개념을 어렵게 생각할 필요는 없습니다. 수학에서 x, y 축과 z 축이 있든 html에서도 그런 개념이 존재하는 것이죠. 다만 우리가 보는 웹페이지는 우리가 현실에서 3차원을 보듯 보는 방식이 아닙니다. 마치 우리를 위에서 쳐다보는것 과 같은 방식으로 우리는 웹사이트를 바라보는 것이죠. 이해하기 편하게 그림으로 보여주겠습니다. 이런 식으로 보이기 때문에 우리는 여기서 몇 가지 주의할 점이 있습니다. 간단한 예제로 Z축의 개념과 주의할점을 알알 보겠습니다. 우선 저는 z-index-.. HTML + CSS 주요 개념 정리(6) - 레이아웃에 영향을 미치는 요소 Ⅱ 저번 글에 display 속성과 positon속성을 알아보겠다고 했느네, 바로 가보자! 1. display 속성으로 HTML 태그의 혈앨형 바꾸기 display 속성은 HTML 태그가 가진 두 가지 혈액형인 Block 요소와 InLINE 요소를 사용한다. 여기서 혈액은 요소의 고유특징이라고 생각하시면 됩니다. Block 요소와 Inline 요소에는 다음 세 가지 특징이 있다. 줄 바꿈 현상 유무 width 와 height 속성 적용 유무 margin-top, margin-bottom, padding-top, padding-bottom 속성 적용 유무 Inline 요소의 혈액형을 가진 태그의 특징을 살펴보자! 태그는 inline 요소의 특징을 가지므로 줄 바꿈 현상이 안 나타남. 또한 width, heig.. HTML + CSS 주요 개념 정리(5) - 레이아웃에 영향을 미치는 요소 Ⅰ 지금부터 웹 사이트 레이아웃에 영향을 미치는 CSS 주요 요소를 알아보겠습니다. 개인적으로 웹사이트를 구성할 때 까다로우문 부분이 '마진 병합 현상'이라는 개념인데 이 부분을 알아보겠습니다. 1. 박스 모델 HTML 태그는 우리 눈에는 안 보이지만 여려 개의 박스가 겹쳐 있는 박스 모델 형식입니다. 박스 모델에는 박스의 크기와 반스 간격을 정의하는 네 가지 요소(margin, border, padding, content)가 있다. 그러면 예제를 통해서 박스 모델이 어떻게 구성되는지 좀 더 확실하게 알아보자. 아래 그림과 같이 width, margin, padding 등의 값을 설정해보고 웹페이지에서 실행해 본다. 2. 박스 모델의 4가지 요소 박스 모델에서 간격을 정의하는 요소를 이제 대충 슬슬 아실 거.. HTML + CSS 주요개념 정리(4) - CSS 사용하기 1. 부모 자식 간의 css상속 HTML은 필연적으로 태그가 태그를 포함하는 구조인데, 이러한 구조를 부모-자식 관계라고 합니다. 예제 코드를 보면 태그 안에 과 태그가 포함되어 있습니다. 여기서 상위에 있는 태그를 '부모'라고 하고, 하위에 있는 과 태그를 '자식'이라고 합니다. 그리고 과 태그를 서로 '형제'라고 표현합니다. 상속이라는 개념을 알아야 되는 이유는 header 태그에 속성을 적용하면 다 함께 적용되기 때문이다. header 태그에 파란색을 적용하니 전체적으로 다 파란색으로 적용된 것을 볼 수 있다. 2. css 속성의 우선순위, 캐스케이딩 케스케이딩은케스케 이딩은 같은 영역에 같은 디자인을 적용했을 때 어느 디자인을 우선해서 적용하는지를 나타냅니다. 케스케 이딩은 다음 세 가지가 우선순.. HTML + CSS 주요개념 정리(3) - CSS 이용 1. HTML 문서에 입력된 정보나 공간에 CSS 디자인 효과를 적용하려면 다음 세 가지 방법 중 하나를 이용. 인터널 방식: HTML 문서 안에 태그를 사용하여 적용하는 방식 인라인 방식: HTML 태그 안에 style 속성을 사용하여 적용하는 방식 익스터널 방식 : CSS 파일을 생성하여 HTML 문서와 연동하는 방식 2-1. 인터널 방식 인터널 방식은 태그 안에 태그를 사용하여 CSS를 적용하는 방식입니다. 여러개의 Hello World 중 태그를 선택한 글만이 빨간색이 적용된 모습을 볼 수 있습니다 2-2. 인라인 방식 인라인 방식은 HTML 태그에 직접 style 속성을 추가하여 적용하는 방식입니다. 태그 안에 style 속성을 추가하여 "background-color: yellow;"를 입력하.. 이전 1 2 다음
