수정 블로그

버튼 스타일    Hello, World!    다운로드    다운로드 출력 결과배경 색과 글자 색 변경div 태그를 만들고 배경색은 초록, 글자색은 노랑으로 만들어보자 색상 출력 결과앵커 태그와 테두리앵커태그앵커태그를 바꾸고 싶을 땐 link-색상명을 사용한다.테두리를 지정할 땐, 먼저 border로 세팅하고 테두리색을 지정한다. 출력 결과글자 스타일display1 ~ display6h태그보다 더 큰 글자h1 ~ h6중요한 글자에 사용(글자 크기, 폰트 두께, 간격 등을 변경)fs-1 ~ fs-6단순히 글자 크기만 변경다른 속성 변경되지 않음태그.클래스속성${콘텐츠내용$}*숫자 + Enter : 태그에 클래스 속성과 콘텐츠 내용을 지정해서 여러 개를 빠르게 만들 수 있는 단축키. $를 포함하면 1부터 ..

플렉스(flex)란 그리드 레이아웃을 기본으로 플렉스 박스를 원하는 위치에 배치하는 것이다. 사용 방법display 속성을 이용해 배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정한다.display: flex | inline-flex flex-direction플렉스 항목의 배치 방향을 지정한다.flex-direction: row | row-inverse | column | column-inverse flex-wrap플렉스 항목을 한 줄 또는 여러 줄로 배치한다.flex-wrap: no-wrap | wrap | wrap-reverse flex-flow플렉스 배치 방향과 여러 줄 배치를 한꺼번에 지정할 수 있다.flex-flow:  flex플렉스 항목의 크기를 조절하는 속성이다.flex: [ ] ..

미디어 쿼리란 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 하는 것이다. 미디어 쿼리 구문@media [only | not] 미디어 유형 [and 조건] * [and 조건] 미디어 유형의 종류 웹 문서의 뷰포트 단말기의 뷰포트 화면 회전 웹 문서 화면 비율 단말기 화면 비율 중단점(breakpoint)서로 다른 CSS를 적용할 화면 크기를 정해줘야 한다. 모든 기기를 반영할 수 없기 때문에 스마트폰, 태블릿, 데스크톱 정도로 구분한다./* 스마트폰 세로 */@media only screen and (min-width: 320px) { …… }/* 스마트폰 가로 */@media only screen and (min-width: 480px) { …… }/* 태블릿 세로 */@media only s..

반응형 웹 디자인이란 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이다. 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적이다. 그렇기 때문에 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다. viewport실제 내용이 표시되는 영역이다. 태그 안에 태그를 이용해 뷰표트를 지정할 수 있다./* 제일 많이 사용하는 방법 */ 그리드화면을 여러 개의 칼럼으로 나누어, 필요할 때마다 칼럼들을 묶어 배치하는 방법이다.화면 너비 값에 따라 960, 1200 등으로 나뉜다.칼럼 개수에 따라서 12, 16, 24 등으로 나뉜다.주로 960 픽셀 12..

transform특정 요소의 크기나 형태 등 스타일이 바뀌는 것을 변형이라고 한다. 변형은 2차원 변형, 3차원 변경 두 가지로 나눌 수 있다. 2차원 변형수평이나 수직으로 웹 요소 변형크기나 각도만 지정하면 됨2차원 좌표 사용 3차원 변형x축과 y축에 원근감 추가z축은 앞뒤로 이동, 보는 사람 쪽으로 다가올수록 값이 더 커짐 2차원 변형 함수 3차원 변형 함수 backface-visibility요소의 뒷면, 즉 반대쪽 면을 표시할 것인지 결정backface-visibility: visible | hidden transition웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것을 트랜지션이라고 한다. transition의 속성 animation웹 요소에 애니메이션을 추가할 수 있다. 애니메이션을 시작해..

box-sizing박스 모델 너비 값의 기준을 지정하는 속성이다. CSS를 이용해 여러 박스 모델을 화면상에 배치하려면 박스 모델의 너비 값을 정확하게 계산해야한다. 박스 모델의 너비 값을 쉽게 계산하기 위해 border-box 속성 값을 주로 사용한다.box-sizing: content-box | border-boxfloat요소를 왼쪽이나 오른쪽에 떠 있게 만들어주는 속성이다.float: left | right | none clearfloat 속성을 무효화 시키는 속성이다.clear: none | left | right | both position텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성이다. position: static | relative | absolute | fixed

박스 모델은 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용하는 개념이다. 박스 모델을 이용하면 웹 문서의 전체 레이아웃을 정의할 수 있고, 각종 요소들을 원하는 위치에 배치하여 화면을 디자인할 수 있다. HTML5 태그 중에서 , 등을 제외하면 거의 모든 태그가 박스 모델을 따른다. 박스 모델 콘텐츠 영역 : 실제 내용이 표현되는 곳패딩 : 콘텐츠와 테두리 사이의 여백(안쪽 여백)테두리 : 박스의 테두리 두께마진 : 테두리와 박스의 최종 경계 사이의 여백(바깥쪽 여백) width, height실제 콘텐츠 영역의 크기를 지정width: | | autoheight: | | auto 실체 콘텐츠 너비 계산하기 padding, margin박스의 안쪽 여백은 padding, 바깥쪽 ..

웹에서 색상 표현하기16진수 표기법#ffffff처럼 #과 함께 6자리의 16진수로 표시앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시두 자리씩 중복될 경우 줄여 사용할 수 있음 rgb/rgba 표기법rgb(255, 0, 0)처럼 세 자리의 숫자로 표시앞의 숫자부터 빨강, 초록, 파랑의 양하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255로 표시투명도를 조절할 때는 rgba(255, 0, 0, 0.3)처럼 마지막에 알파값 추가알파값은 불투명도를 나타내는 값으로 0~1 값 중에서 사용(0에 가까울수록 투명) hsl/hsla 표기법hsl(240, 100%, 50%)처럼 세자리의 숫자로 표시앞의 숫자부터 색상, 채도, 밝기의 양투명도를 조절할..

font-family웹 문서에서 사용할 글꼴 지정. 둘 이상의 글꼴 이름을 지정할 때는 쉼표로 글꼴 구분font-family: [,, ...] font-size글자 크기를 조절하는 속성. 기본값은 상대 크기인 mediumfont-size: | | |  font-weight글자 굵기를 조절하는 속성font-weight: normal | bold | bolder | lighter | 100~900 사이의 수치 font-varient대문자를 소문자 크기에 맞추어 작게 표시font-variant: normal | small-caps font글꼴 관련 속성들을 한꺼번에 묶어 표기font: ... color글자 색 지정. 16진수 값이나 rgb, hsl, 색상 이름 중에서 사용color:  text-decor..

선택자는 HTML의 특정 태그 하나를 선택하거나 또는 여러 개를 동시에 선택할 때 사용한다. CSS에는 이러한 선택자가 다양하게 제공된다. 기본 선택자종류사용 방법설명전체 선택자* { 속성선언; }모든 태그에 스타일을 적용한다.타입 선택자태그 { 속성선언; }지정한 태그에 스타일을 적용한다.클래스 선택자.클래스 이름 { 속성선언; }지정한 클래스에 스타일을 적용한다.아이디 선택자#아이디 { 속성선언; }지정한 아이디에 스타일을 적용한다.속성 선택자[속성] { 속성선언; }[속성=값] { 속성선언; }지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다. 가상 선택자웹 문서에 사용하는 태그 중에는 눈에 보이지 않는 속성을 가진 태그가 있다. 예를 들면 태그에 마우스 포인터를 올리는 순간 속성이 나타나..