웹
[CSS] CSS3 (3) : 2D / 3D Transform, Transition, Animation
변형 (Transform) - transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 바꿀 수 있다 - 제공하는 동작 : 요소를 움직이거나, 회전시키거나, 크기를 변경하거나, 기울이기 > CSS 좌표 체계 - CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단 > 2D 변형 (transform) - CSS3 2D transform 속성 속성 설명 transform 요소에 2D 또는 3D transform을 적용함 transform-origin 요소에 transform을 적용하는 변환 중심을 설정 - CSS3 2D transform 메소드 메소드 설명 matrix(n,n,n,n,n,n) 모든 2D transform 메소드를 한 번에 설정 translate(x,y) 해당 요소를 주어진 x..
[CSS] CSS3 (2) : 그림자 효과, 배경, 테두리, 텍스트, 웹 글꼴
CSS3 그림자 효과 > text-shadow 속성 text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; - 그림자가 시작할 x축과 y축과 상대 위치를 명시하고, blur값으로 그림자의 흐린 정도를 명시 - (예) 다양한 그림자 효과 > box-shadow 속성 - 해당 HTML 요소에 그림자 효과 적용 box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; CSS3 배경 - 배경의 크기뿐 아니라 위치까지 설정 가능 - 하나의 HTML 요소에 여러 개의 배경 이미지 적용 가능 - CSS2의 background 속성 : background-color, background-image, background-repeat, background-position, background-..
[CSS] CSS3 (1) : CSS3 모듈, 벤더 프리픽스, 색, 그래디언트
CSS3 : 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안 > CSS3 변경 사항 : CSS3에서 새롭게 추가되거나 변경된 대표적인 기능 - Selectors Level 3 - Media Queries Level 3 - Color Level 3 - Namespaces > CSS3 모듈 (Module) : CSS3는 새로운 기능들과 함께 이전 버전 CSS 기능까지 포함하는 모듈이라는 것으로 구성되며, 다음은 CSS3를 구성하는 주요 모듈이다 - Selectors - Box Model - Backgrounds - Image Values and Replaced Content - Text Effects - 2D Transformations - 3D Transformations - Animatio..
[CSS] CSS 고급 (2) : Form 요소, @규칙
Form 요소 : 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있다 > input 요소의 크기 설정 - width 속성을 이용하여 input 요소의 크기 설정 가능 > input 요소의 테두리 설정 - border 속성을 이용하여 input 요소의 테두리 색상, 두께를 바꿀 수 있다 - border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있다 > input 요소에 배경색 적용 - background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있다 - color 속성을 이용하여 input 요소의 텍스트 색상 변경 가능 > 포커스를 가지고 있는 input 요소의 스타일 적용 - focus 선택자를 이용하여 해당 input 요소가 ..
[CSS] CSS 고급 (1) : 내비게이션 바, 드롭다운, 툴팁
내비게이션 바 (navigation bar) : 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미 > 링크를 사용한 리스트 메뉴 - 내비게이션 바 중에서도 가장 기본적인 것 - HTML에서 링크는 태그로 표현한다 - 다음은 링크를 사용하여 내비게이션 바를 구현한 간단한 메뉴 예제 Home HTML CSS 자바스크립트 > 수직 내비게이션 바 - 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정 → 메뉴의 어느 곳을 클릭해도 연결된 페이지로 바로 넘어간다 - class를 이용하면 내비게이션 방서 현재 메뉴의 위치도 표현 가능, 다음 예제에서는 :not 선택자를 이용하여 현재 메뉴인 current 클래스와 그 외의 메뉴 배경색을 구분한다 - border 속성을 이용하여 내비게이션 바에 경계선..
[CSS] CSS 선택자 : 선택자, 의사 클래스, 의사 요소, 속성 선택자
선택자 : CSS에서 스타일을 적용할 대상을 선택할 때 사용한다 1. 전체 선택자 HTML 문서 내부의 모든 요소 선택 2. HTML 요소 선택자 3. 아이디(id) 선택자 특정 아이디 이름을 가지는 요소만을 선택 ※ 여러 요소에 중복된 아이디를 사용하면 HTML, CSS에는 문제가 없지만, 자바스크립트 작업에서 오류가 발생한다 → 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스 사용 이 부분에 스타일을 적용합니다. 4. 클래스(class) 선택자 특정 집단의 여러 요소를 한 번에 선택할 때 사용 ... 이 부분에 스타일을 적용합니다. 이 부분에도 같은 스타일을 적용합니다. 5. 그룹선택자 여러 선택자를 같이 사용하고자 할 때 사용 결합 선택자 : 하나 이상의 선택자가 포함되었을..
[CSS] CSS 위치 속성 : 디스플레이, 포지션, 플로트, 정렬
디스플레이 ˙ 웹 페이지의 레이아웃을 결정하는 속성 ˙ 해당 HTML 요소가 웹 부라우저에 언제, 어떻게 보이는가를 결정 ˙ 대부분의 HTML 요소는 블록(block) / 인라인(inline) 두 가지 값 중 하나의 값을 가진다 블록 (block) : 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지 인라인 (inline) : 새로운 라인에서 시작하지 않고, 요소는 해당 HTML 요소의 content 만큼만 너비를 차지 인라인-블록 (inline-block) : 요소 자체는 인라인처럼 동작, 해당 요소 내부에서는 블록처럼 동작 visibility - 해당 요소가 웹 페이지에 표현될지 아닐지 - visible / hidden / collapse HTML 요소 숨기는 방법 1. di..
[CSS] CSS 박스 모델 : 크기, 패딩, 테두리, 마진, 아웃라인
크기 단위 다양한 크기 단위가 존재하지만 가장 많이 쓰이는 크기 단위는 다음과 같다 1. 백분율 단위(%) 2. 배수 단위(em) 3. 픽셀 단위(px) 크기 크기 조절을 위해 사용할 수 있는 속성 1. height / width 2. max-width / min-width : 해당 HTML요소가 가질 수 있는 최대 / 최소 너비 3. max-height / min-height 박스 모델 (Box model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 다음과 같이 구분한다 1. 패딩(padding) : 내용과 테두리 사이 간격 - padding, padding-top, padding-right, padding-bottom, padding-left 2. 테두리(border) : ..
[CSS] CSS 기본 속성 : 색, 배경, 텍스트, 글꼴, 링크, 리스트, 테이블, 이미지 스프라이트
CSS에서 색을 표현하는 방법 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 CSS 배경 속성 1. background-color 2. background-image 3. background-repeat : 배경 이미지의 반복에 대한 설정 4. background-position : 배경 이미지의 상대 위치 5. background-attachment : 스크롤과 무관하게 배경 이미지를 화면의 위치에서 고정시킬 수 있다. CSS text 속성 속성 설명 color 텍스트 색상 direction 텍스트가 쓰이는 방향 letter-spacing 문자 간격 word-spacing 단어 간격 text-indent 단락 첫줄 들여쓰기 설정 text-align 텍스트 수평방향 ..
[CSS] CSS 기초 : 개요, 문법, 적용
CSS Cascading Style Sheets HTML 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어 오늘날 대부분의 웹 브라우저들은 CSS를 지원한다 HTML4부터는 모든 서식 설정을 HTML 문서로부터 분리하는 것이 가능해졌다! CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작하면 세부 디테일을 일일이 지정해주어야 한다. 이는 작업하기에도 어렵지만, 스타일의 변경이나 유지보수 시에도 힘들어집니다! 이러한 문제를 해소하기 위한 언어가 CSS CSS는 웹 페이지의 스타일을 별도의 파일로 저장하여 사이트의 전체 스타일을 일관성있게 제어할 수 있다. CSS 문법 선택자(selector)와 선언부(declaratives)로 구성 선택자 : 스타일을 적용하고자 하는 HTML 요소 선언부..