CSS

CSS 정보 전달을 위해 작성된 HTML 문서를 꾸며주는 디자인 요소 CSS를 통해 색상, 요소 크기, 폰트, 레이아웃 등을 디자인할 수 있음 브라우저는 문서에 포함된 CSS파일을 다운로드하여 캐시에 저장해 사용 스타일 적용 방법에 따른 분류 외부(Externa

position: 요소의 위치를 결정하는 속성 > position 속성 레이아웃의 위치를 결정하는 속성, 5가지 종류가 있다. static 요소를 일반 문서 흐름에 맞게 배치함. 일반적으로 position 지정을 하지 않았을 때의 기본값 absolute* 요

display: 요소가 레이아웃 상에서 자리를 차지하는 방식을 정하는 속성 > display 속성 엘리먼트가 block, inline 등 어떤 형태를 가질 것인지 정한다. | | block | inline | inline-block | | ---

선택자: CSS를 통해 원하는 스타일을 적용하기 위한 범위를 지정하는 속성HTML 요소의 이름(태그), 클래스(class), 아이디(id)를 기반으로 스타일을 적용하는 선택자\*기호를 사용해서 모든 요소에 스타일 적용<p>, <div>, <section

두 개 이상의 기본 선택자를 조합하여 더 구체적인 요소를 선택하도록 해주는 선택자 복합 선택자(결합자) 그룹 선택자(다중 선택자, or) 선택자 사이에 콤마(,)를 사용해 여러 요소를 동시에 선택할 수 있다. 일치 선택자(복합 클래스 선택자, and) 선택자 사이에 온점. 을 사용해 여러 조건을 동시에 만족하는 요소를 선택 (태그).(클래스명)과 ...

요소의 특정 상태를 선택하는 데 사용 가상 클래스 선택자 :hover 요소에 마우스가 올려져 있는 상태를 선택 :focus 요소가 포커스를 받았을 경우를 선택(입력창 클릭, 탭키 사용 ..) :active 요소가 활성화되었을 경우를 선택(마우스 클릭 중 .

두 개의 콜론:: 으로 표현, 요소의 특정한 부분에 존재하며 정해진 기능을 하는 가상 요소를 선택 가상 요소 선택자 before & after content 속성과 함께 사용하여 컨텐츠 추가가 가능하다. ::before 요소의 앞(before)에 다른 요소나 스타일을 추가 ::after 요소의 뒤(after)에 다른 요소나 스타일을 ...

특정 요소의 속성값이 조건을 만족하면 선택 속성 선택자 a[attr] 해당 속성값을 가지고 있는 요소 선택 a[attr=”value”] 속성값이 조건과 일치하는 요소 선택(클래스의 경우 완전히 일치해야 함) p[attr~=”value”] 속성 값으로 value 가지고 있는 요소 선택(클래스 등, 공백으로 구분된 여러 개의 값을 가지는 속성 중)...

- HTML 문서의 모든 태그는 사각형 모양을 가지고 있으며, 요소들이 순서대로 화면에 배치된다. CSS를 통한 레이아웃 설계는 기본적으로 이러한 박스 구조를 기준으로 이루어진다. 하나의 박스는 내용, 패딩, 테두리, 여백으로 구성된다. 내용(content) 콘텐츠의 내용 패딩(padding) 콘텐츠를 감싸고 있는 박스(콘텐츠와 테두리 사이)의 크...

CSS Layout (1/2) CSS 레이아웃은 웹 페이지 요소의 배치를 재조정하는 데 사용되는 기술이다. Float 요소를 왼쪽이나 오른쪽으로 밀어낼 때(정렬) 사용한다. float 속성이 적용되면 해당 요소가 inline 형식으로 변경된다. fl

해당 요소가 어떻게 표시될지를 결정하는 속성block요소를 블록 요소로 지정하며 줄바꿈이 일어난다.inline요소를 인라인 요소로 지정하며 줄바꿈이 일어나지 않는다.inline-block인라인 요소와 블록 요소의 특성을 모두 가진다. 다른 요소와 같은 줄에 배치되며 높

CSS Responsive Design Responsive Design; 반응형 디자인 웹 페이지가 다양한 디바이스 및 화면 크기에 대응할 수 있도록 디자인하는 것. 이를 위해 ‘미디어 쿼리’를 사용한다. 미디어 쿼리(Meadia Query) 다양한 환경에