CSS
1.CSS기초
태그와 비슷하게 생겼지만 조금다릅니다.여기서 p:선택자, text-align : 스타일 속성, center:속성 값선택자 다음에는 중괄호가오고 그 사이에 속성을 입력하는데 중괄호 안에 들어가는 속성과 속성값은 콜론(:)으로 구분해 '속성 : 속성 값'과 같은 형식으로
2.주요 선택자
앞에서 스타일 속성을 적용하는 요소를 '선택자'라고 부른다고 했습니다.이 선택자는 태그 하나가 될 수 있지만 여러 개의 요소를 묶어 별도의 선택자로 지정할 수도 있습니다.이렇게 하면 일일이 스타일을 지정하지 않고도 스타일을 쉽게 저장할 수 있습니다.말그대로 스타일을
3.캐스케이딩 스타일 시트(CSS)
CSS에서 'C'는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이빈다.위에서 아래로 흐른다는 '캐스캐이딩'은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻합니다.\-1.스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에
4.글꼴 관련 스타일
font-family속성- 글꼴 지정하기 >웹 문서에서 사용할 글꼴은 font-family 속성으로 지정합니다. 이속성은 `,,`태그처럼 텍스트를 사용하는 요소들에게 주로 사용합니다. 예를 들어 텍스트 문단의 글꼴을 "굴림"으로 하고싶다면 이와 같이 정의합니다. 웹
5.텍스트 스타일
웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 떄는 color속성을 사용합니다.color 속성에서 사용할 수 있는 생상 값은 16진수, RGB, HSL또는 색상 이름으로 표기할 수 있습니다.앞에 text- 가 붙는 속성들에 대해 알아보겠습니다.te
6.문단 스타일
텍스트를 어느 방향으로 부터 쓰기 시작해 화면에 표시할지 결정아랍어는 오른쪽에서 왼쪽으로 씁니다.다만,한글이나 영어처럼 왼쪽에서 오른쪽으로 쓰는 언어일 경우 속성 값으로 trl을 입력해도 텍스트 표시 순서는 바뀌지 않고 왼쪽에서 오른쪽으로 정렬되어 나타납니다.텍스트가
7.목록 스타일
decimal-leading-zero : 앞에 0이 붙는 십진수 (01,02,03)lower-alpha :소문자 알파벳 (a,b,c,d)upper-alpha :대문자 알파벳 (A,B,C,D)
8.배경 색과 배경 이미지
앞에서 공부했지만 글꼴이나 글자크기 등은 <body>태그 선택자에서 지정하면 문서 전체에 상속되지만, 예외적으로 background-color값은 상속되지 않습니다.예를 들어 <body>태그 선택자에서 background-color 속성을 이용해 웹 문서의
9.CSS 레이아웃
웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다.CSS의 width속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산하여 배치해야 합니다.이럴 때 box-sizing속성을 사용하면 콘텐츠 영역의 너비에
10.다단으로 편집하기
한 화면을 여러 단으로 구성할 떄 단의 너비를 고정해 넣고 화면을 분할할 수도 있고 단의 개수를 고정해 놓고 화면을 분할할 수도 있습니다.단의 너비를 고정해 놓고 구성하는 법은 화면이 커지면 단의 개수가 많아지고 화면이 좁아지면 단의 개수가 줄어듭니다.다단으로 편집할때
11.연결 선택자
하위 선택자는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것입니다.자식 요소뿐만 아니라 손자요소,손자의 손자 요소등 모든 하위요소까지 적용됩니다.하위 선택자를 정의할때는 상위 요소와 하위 요소를 공백으로 구분하고 대괄호 안에 속성을 지정합니다.다음 예는 하
12.속성 선택자
이 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용합니다.사용하는 방법은 대괄호(,)사이에 찾으려는 속성을 지정하면 됩니다.다음 예제는 ahref 선택자를 사용해 <a>태그 중 href라는 속성이 있는 요소를 찾아내 배경색을 지정하는 것입니다.(예제에서는
13.가상 클래스와 가상 요소
사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일을 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용합니다.문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다.텍스트 링크는 기본적으로 파란색글자와 밑줄로
14.변형
이미지를 회전시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용해야 하는데 transform: 다음에 변형 함수를 함께 입력해 사용합니다.예를 들어 .photo라는 클래스 선택자를 가진 웹 요소를 x축으로 50px, y축으로 100px 이동시키려면
15.변형과 관련된 속성들
transform-origin속성- 변형 기준점 설정하기 >앞에서 transform속성에 쓰이는 변형 함수를 배울 때 x,y,z축을 기준으로 변형했습니다. 하지만 transform-origin속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있습니다.
16.트랜지션
트랜지션(transition)이란 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것 처럼 스타일 속성이 바뀌는 것을 말합니다.시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 트랜지션이라고 합니다.트랜지션을 만드는 첫 번째 단계는 트랜지션을 어느
17.상품 페이지에 가격 떠오르게 만들기
신상품 목록<클릭
18.반응형 웹디자인
뷰포트는 <meta>태그를 이요하여 <head>와 </head>사이에 작성합니다.기본형식은 <meta name ="viewport" content="<속성1=값>,<속성2=값2>,... ">로 나타냅니다.웹 사이트의 레이아웃을 정할 때
19.미디어 쿼리
미디어 쿼리는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해줍니다.미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다.즉 PC나 태블릿,스마트폰의 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 바