플렉스 박스 레이아웃 레이아웃 구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기슬 css레이아웃은 웹 요소를 올바른 장소에 배치하는 기술 css레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해줌 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정 할 수 있음 대표적인 CSS 레이아웃 기술 일반적인 문서 흐름 display 속성 플렉스 박스 그리드 레이아웃 float속성 position 속성 기타 등등 플렉스 박스(flexbox) 플렉스 박스는 행 또는 열을 주축으로 설정하여 웹요소를 배치 및 정렬하는 1차원 레이아웃 방식플렉스 방식에서 요소의 배치와 정렬은 플렉스 컨테이너, 플렉스 아이템 간의 상호작용을 통해 결정 플렉스 컨테이너 : 플렉스 박스 방식으로 레이아웃을 결정할 요소 플렉스..
미디어쿼리 미디어 타입을 인식하고, 콘텐츠를 읽어 들이거나 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능) 모든 미디어 쿼리는 두가지 요소를 지니고 있음 미디어 타입 조건에 대한 물음(쿼리) @media 미디어 타입 and (조건에 대한 물음) { 스타일 선언문 } 미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류 속성명 정의 min-width 디스플레이 영역의 최대 넓이 max-width 디스플레이 영역의 최대 높이 min-height 디스플레이 영역의 최소 넓이 max-height 디스플레이 영역의 최소 높이 orientation portrait 또는 landspace 감지 color 기기의 색상당 비트수 color-index 출력 기기의 색상 테이블 수 aspect-rat..
반응형 웹과 뷰포트 단위 반응형 웹 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며 반응하는 웹문서 또는 이를 위해 사용하는 기법 뷰포트 현재 화면에 보여지고 있는 영역 기기 별로 뷰포트가 다르기 때문에 기기에 따라 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 발생 뷰포트 설정하기
상속 하위 요소가 상위요소의 스타일 속성값을 물려 바는 것을 의미 상위요소로부터 상속이 이루어지는 속성이 있는 반면 그렇지 않은 속성이 있음 공용키워드 스타일 속성 마다 상속 여부가 기본적으로 설정되어있음 CSS에서는 스타일 속성의 상속 여부를 제어할 수 있는 키워드 제공 모든 속성에 적용할 수 있는 키워드 inherit : 상위 요소로부터 상위 속성의 값을 받아 사용 initial : 해당 속성의 기본 값을 요소에 적용 unset : 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 inital처럼 적용
CSS 중급 다양한 효과 변형과 전환 transform 속성 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻함 위치의 요소는 x축과 y축을 기준으로 바뀜 변형을 적용하기 위해서 CSS의 transform 속성을 사용 CSS가 지원하는 다양한 변형 관련 함수들은 속성 값으로 지정 함수 설명 trnaslate(x,y) 지정한 크기 만큼 x축, y축 방향으로 이동 scale(x,y) 지정한 크기 만큼 x축, y축으로 확대 및 축소 skew(x,y) 지어한 각도만큼 x축, y축으로 비틀어 왜곡 rotate(deg) 지정한 각도만큼 회전 transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태 transition 속성 transition 속성을 이용하면 요소에 지..
의사요소와 의사 클래스 의사 클래스 의사 클래스(가상클래스)는 선택자에 추가하는 키워드 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미 사용법 선택자:의사클래스{ 속성명 : 속성값; } 자주 쓰이는 의사 클래스 속성 값 설명 hover 마우스 포인터가 요소에 올라가 있다. active 사용자가 요소를 활성화 했다. focus 요소가 포커스를 받고 있다. disabled 비활성 상태의 요소이다. nth-child() 형제 사이에서의 순서에 따라 요소를 선택한다. 의사 요소 선택자에 추가하는 키워드 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음 사용법 선택자::의사요소{ 속성명 : 속성값; } 자주 쓰이는 의사 요소 속성 값 설명 after 요소의 앞에 의사 요소를 생성 및 추가 b..
CSS 기초 요소 display - 요소의 유형 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의 요소의 유형을 변경할 수 있음 none : 요소를 화면에 표시하지 않음 block : 요소를 블록 레벨 요소로 만듦 inline : 요소를 인라인 요소로 만듦 inline-block : 요소를 인라인 요소로 표시하되 블록 레벨의 특성(크기 등)을 가진다 float - 문서의 흐름 웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에 태그가 쓰인 순서를 따름 float 속성은 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경 선택된 요소가 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징이 있음 사용가능한 속성 값 left ..
텍스트 꾸미기 글꼴 바꾸기 font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용 한 개 이상의 글꼴을 지정할 수 있음 입력한 글꼴 뒤에 쉼표를 입력후 새로운 글꼴을 이어서 입력하는 방식으로 속성값 지정 먼저 쓰여진 글꼴부터 우선적으로 요소에 지정 먼저 쓰여진 글꼴이 없으면 다음에 있는 글꼴이 적용 웹 폰트 사용하기 컴퓨터 시스템에 해당 포트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아서 사용할 수 있는 글꼴 웹폰트를 사용하여 잘못 입력된 글꼴이거나, 시스템에 설치되어 있지 않아 요소에 적용되지 않는 것을 방지 텍스트 꾸미기의 속성 속성명 설명 속성값 유형 font-size 글자 크기 지정 수치와 단위 font-weigth 글자 두께 지정 별도의 키워드 line-heig..
