본문 바로가기

CSS

(19)

[CSS] 5-2. CSS GRID ( 2차원 레이아웃 ) CSS GRID 란?CSS Grid는 2차원 레이아웃을 구축하기 위한 CSS 속성 집합입니다.CSS Grid의 주요 아이디어는 컨테이너 요소를 행과 열로 나누어 자식 요소로 채울 수 있게 하는 것입니다.2차원 컨텍스트에서 CSS Grid를 사용하면 덜 중첩된 HTML과 더 읽기 쉬운 CSS를 작성할 수 있습니다.CSS Grid는 flexbox를 대체하기 위한 것이 아닙니다.1차원 레이아웃은 flexbox, 2차원 레이아웃은 CSS Grid를 사용하면 됩니다. Flex 와 마찬가지로 부모 태그가 container (바탕화면 또는 바닥) 역할을 하고자식 태그들이 items 가 되어 gird 안에 배치되게 됩니다.container 와 items 들은 각기 다른 속성들을 가지고 있습니다. 1. Grid 컨..

[CSS] 5-1. FlexBox ( 1차원 레이아웃 ) 실습은 여기에서 하시는 걸 추천 드립니다https://flexbox.tech/ Flexbox Playground flexbox.tech 지금까지 float 로 요소들을 수평배치하는 것을 공부했다면 이제 Flex Box 에 대해 알아보겠습니다 👉 플렉스박스는 1차원 레이아웃을 구축하기 위한 관련 CSS 속성들의 집합입니다.👉 플렉스박스의 주요 아이디어는 컨테이너 요소 내부의 빈 공간을 자식 요소들이 자동으로 나눠 가질 수 있다는 것입니다.👉 플렉스박스를 사용하면 부모 컨테이너 내에서 항목들을 수평과 수직 방향으로 쉽게 정렬할 수 있습니다.👉 플렉스박스는 수직 중앙 정렬이나 동일한 높이의 열 만들기와 같은 일반적인 문제들을 해결합니다.👉 플렉스박스는 float를 대체하기에 완벽하며, 더 적고 ..

[CSS] ::before 에서 각자 다른 content text 를 주는 법 (content: attr( ) ) .product::before { content: 'BEST'; position: absolute; top: 0; left: 50%; translate: -50% -50%; background-color: #ffdd0035; border: 1px solid #ffdd00; color: #ffdd00; padding: .5em 2em; border-radius: 100px; text-transform: uppercase;} 모든 product 클래스에 BEST 란 글자가 나타나면서 BEST 이외의 다른 텍스트를 주고 싶다면위 CSS는 1회성이 되버리게 된다. 각자 다른 텍스트를 주고 싶다면 아래처럼 사용하면 된다 HTML Course Learn the basics of web..

[CSS] 블록 서식 문맥이란 ? ( Block Formatting Context, BFC ) 블록 서식 문맥(BFC)은 웹 페이지의 CSS 시각적 서식 모델의 일부입니다.BFC는 블록 박스의 레이아웃이 발생하는 환경을 정의하며, floating 요소와의 상호작용을 결정합니다. BFC의 주요 특징컨테이너 역할BFC는 내부 요소를 포함하는 컨테이너로 작동합니다. 내부의 모든 것이 외부 요소와 분리되어 독립적으로 작동합니다.마진 병합 방지BFC 내부의 요소들은 외부 요소와 마진 병합이 일어나지 않습니다.플로팅 요소 포함BFC는 내부의 플로팅 요소를 완전히 포함합니다. 이로 인해 플로팅으로 인한 레이아웃 문제를 해결할 수 있습니다.플로팅 요소 주변 텍스트 래핑 방지BFC 내부의 텍스트는 외부의 플로팅 요소 주위로 흐르지 않습니다BFC를 생성하는 방법float 속성 값을 left 또는 right로 설정..

[CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout 1. 목적블록 속성을 가진 대상을 원하는 위치에 정렬하기 위함 2. 위치 지정을 위한 속성Box-sizing 속성 : 상자 너비 기준 설정float 속성 : 좌우 위치 설정clear 속성 : float 속성 해제position 속성 : 배치 방법 지정z-index 속성 : 순서 요소 정렬3. float엘리먼트의 수평 정렬을 위한 속성marin: auto 는 block 요소에서만 사용 가능하며 inline, inlien-block 에서는 가운데 정렬이 안된다 Ex 1 )부모요소에 clearfix 란 별도의 클래스 명을 주고, pseudo element 인 after 를 사용하여 수정했다. 이런 방식의 과거 수정법을 clearfix hack 이라고 한다 https://www.w3schools.com/howt..

[CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록 인라인(inline)인라인블록(inline-block)블록(block)크기값을 지정못함크기값을 지정할 수 있음한줄에 여러개 배치한줄에 한개만 배치좌우 마진만 가능상하좌우마진 모두 가짐기본 너비값은 컨텐츠의 너비값기본 너비값은 부모 요소의 100% ■ block 요소- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table, body, main, header, article, footer, section, nav, details, summury, center, aside, h1 ~ h6- 레이아웃( 제목, 문단, 표 )과 관련된 요소 ■ inline 요소- span, a, big, small, em, b, br, audio, video, s, u, mark, q, str..

[CSS] 1. 텍스트 서식 1. font-size : 텍스트의 크기 지정 font-size 설정이 없으면 16px 디폴트 속성이 적용됨.(단 h1 ~ h6, big, small 태그는 기본 설정 사이즈를 따름)값 ) px em pt % rem 단위로 지정 가능 2. font-weight : 텍스트의 굵기 지정100 ~ 900 사이의 값이며 bold bolder lighter normal 값 설정 가능하다 (normal 은 400, bold 는 700 값) 3. line-height: 텍스트의 높이( 줄 간격 ) 지정값 ) px em pt % rem 단위로 지정 가능 4. font-family: 글꼴 지정값 ) 폰트 이름 Ex) font-family:'Franklin Gothic Medium', 'Arial Narrow..

[CSS] 2. BOX 모델 (box-sizing: border-box) 👉 컨텐츠(Content): 텍스트, 이미지 등👉 테두리(Border): 요소 주위의 선, 여전히 요소 내부에 있음 border: 5px solid black; 이 때 그려지는 테두리 선이 border 라인 이다 👉 패딩(Padding): 컨텐츠 주위의 보이지 않는 공간, 요소 내부에 있음 border 와 컨텐츠 사이의 공간이다 👉 마진(Margin): 요소 외부의 공간, 요소들 사이의 공간 👉 채우기 영역(Fill area): 배경색이나 배경 이미지로 채워지는 영역 div { width: 300px; /* 콘텐츠의 너비 */ height: 200px; /* 콘텐츠의 높이 */ padding: 20px; /* 콘텐츠와 테두리 사이의 여백 */ border: 5..

이전 1 2 3 다음

티스토리툴바