neda의 블로그

Position이란? 문서에서 요소를 배치할 때 위치를 지정하는 방법 정상 위치 - Static Position (기본값) 요소를 일반적인 흐름에서 정상적인 위치에 지정 (기본값) position: static; 상대 위치 - Relative Position 요소를 일반적인 흐름에서 정상적인 위치에 지정한 후 이 위치를 기준으로 top, right, bottom left와 같은 offset을 통해 위치를 이동시킬 수 있다. position: relative; 절대 위치 - Absolute Position 요소는 일반적인 흐름에서 제외되고, 페이지에 요소를 위한 공간이 생기지 않는다. 가장 가까운 조상의 위치를 기준으로 top, right, bottom left을 통해 상대적으로 위치를 지정한다. posi..

1. grid-column과 grid-row를 이용하는 grid body { width: 90%; max-width: 900px; margin: 2em auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; } .container { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-gap: 20px; } header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); } aside { border-right: 1px solid #999; } header {..

flex 적용 전 HTML 삽입 미리보기할 수 없는 소스 display: flex 적용 HTML 삽입 미리보기할 수 없는 소스 flex-direction: column; HTML 삽입 미리보기할 수 없는 소스 요수가 개수가 많을 때 HTML 삽입 미리보기할 수 없는 소스 flex-wrap: wrap를 통해 여러 행으로 나눔 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 align-items은 크로스 축에 대한 정렬 align-items: center; HTML 삽입 미리보기할 수 없는 소스 justify-content은 주 축에 대한 정렬 justify-content: center; HTML 삽입 미리보기할 수 없는 소스 Flexbox playground ... codep..

inline and block layout 일반 흐름(Normal flow)에서 배치되는 모든 상자는 인라인 또는 블록 요소이다. 인라인 요소는 인라인 서식 컨텍스트에 블록 요소는 블록 서식 컨텍스트에 포함된다. 일반흐름에서 인라인 요소와 블록 요소가 배치될 때 어떻게 동작하는가 block formatting context 블록 형식 지정 컨텍스트 안에서의 상자들은 맨 위부터 시작해 수직으로 순서대로 배치되며수직 상에서 상자간의 거리는 margin top, margin bottom에 영향을 받게 된다.영어와 같은 가로 쓰기 모드에서는 수직 축이며, 한자와 같은 세로 쓰기 모드에서는 수평 축이다. inline formatting context 인라인 형식 지정 컨텍스트 안에서의 상자들은 맨 위부터 시작해 ..

Display 요소가 가지는 상자의 외부 레이아웃이 인라인인지 블록인지를 결정하고, 자식 요소들을 위한 내부 레이아웃을 결정한다. 외부 레이아웃 block: 일반 흐름에 있을 때 요소 앞뒤에 줄바꿈 생성 width를 가지지만, 줄바꿈이 일어나기 때문에 나머지 영역을 margin으로 채움 height는 지정하지 않으면 자식 요소 크기의 합을 사용 WHPBM inline: 줄바꿈을 생성하지 않고 공간이 있으면 다음 요소는 같은 줄에 위치 내부 레이아웃 flow: 블록 및 인라인 레이아웃을 통한 내부 요소 배치 flow: 루트 요소에 대한 위치를 정의하는 새로운 BFC를 설정하는 블록 요소 상자 생성 table: 처럼 동작하는 블록 요소 상자 flex: flexbox model에 따라 요소를 배치하며 블록 요..

먼저 링크()는 아래 목록에서 보듯이 여러 가지 상태를 가지고 있으며, 원하는 상태에 대해 스타일을 지정할 수 있다. a:link : 대상이 지정된 링크 a:visited: 이미 방문한 링크 a:hover: 마우스 포인터로 가리킬 때의 링크 a:focus: 포커스가 가리킬 때의 링크 a:active: 활성화된 링크 링크 기본 스타일 밑줄 방문하지 않은 링크: 파란색 방문한 링크: 보라색 마우스 포인터로 링크를 가리키면 포인터가 손 모양으로 변한다 포커스가 가리킬 때 링크 주변에 윤곽선이 생긴다. 활성 링크: 빨간색

목록은 정보를 기준에 따라 정리한 것이다. 기본적인 사용 방법은 또는 으로 목록 요소를 만들고, 개별 요소를 로 만든다. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor list-style-type 목록의 글머리 기호 즉, 마커를 지정 다음의 4가지 값 중 하나로 지정할 수 있다. symbols() keyword none 아래는 다양한 목록의 스타일들 중 일부에 대한 예이다. disc: 속이 꽉찬 원 circle: 속이 빈 원 square: 속이 꽉찬 사각형 decimal: 10진수 decomal-leading-zero: 0과 함께 시작하는 10진수 upper-roman, lower-roman: 로마 숫자 '-': 문자열 '..

글꼴 스타일: 텍스트 글꼴에 영향을 주는 것들( 글꼴, 크기, 색상, 굵기, 기울임꼴, 밑줄 등) 텍스트 레이아웃 스타일: 텍스트의 레이아웃에 영향을 주는 것들( 자간, 행간, 정렬 등) 색상(color) blue color red color green color HTML 삽입 미리보기할 수 없는 소스 글꼴(font-family) serif: 획 끝에 디테일이 있는 글꼴 sans-serif: 세리프가 없는 글꼴 monospace: 문자의 너비가 고정인 글꼴 cursive: 글리프가 연결되어 필기를 에뮬레이트하기 위한 글꼴 fantasy: 장난스러운 장식용 글꼴 글꼴 스택이란? 글꼴 여러 개를 쉼표로 구분하여 나열하면 브라우저는 맨 앞의 글꼴부터 순서대로 사용 가능한 글꼴을 찾아 적용 font-family..

색상 키워드 - red, blue, yellow 등 투명 키워드 - transparent 현재 색상 키워드 - currentcolor RGB 색상 16진수 표기법 #RGB, #RRGGBB, #RRGGBBAA p { color: f00;} /*red color*/ p { color: ff0000;} /*red color*/ p { color: ff0000ff;} /*red color*/ 10진수 표기법 rgb[a](R,G,B[,A]), rgb[a](R G B [ / A]) p { color: rgb(255,0,0);} /*red color*/ p { color: rgb(255 0 0);} /*red color*/ p { color: rgb(255,0,0,255);} /*red color*/ HSL 색상 H..

데이터 형식 설명 예시 정수 -1,0,1 십진수 0.1, -0.1, 10, 11 number에 단위가 있는 것 100px, 90deg, 상대적인 값 100% 에 있는 단위 중 하나 css에서 길이 값을 나타낸다. 글꼴(font) 기반 상대 길이 단위 설명 cap 요소의 대문자 높이 em font-size에 의한 글꼴 크기 ex font의 x-height를 나타냄. 일반적으로 소문자 높이 rem 루트 요소의 font-size에 의한 글꼴 크기 ch 글꼴에서 "0"의 사전적인 너비 측정값 lh 요소 줄 높이 rlh 루트 요소 줄 높이 뷰포트(viewport) 기반 상대 길이 뷰포트의 종류에는 4가지가 있다. Small - sv Large - lv Dynamic - dv Default 단위 설명 vh (vh,..