CSS

CSS(Cascading Style Sheets)는 HTML과 같은 구조화 된 문서를 화면에 어떻게 렌더링할 것인지를 정의하는 언어이다. HTML5이전에서는 HTML에 스타일을 컨트롤 가능한 태그(font , center)가 존재하여 스타일표현이 가능하였으나 정보와 구조를 담당하는 HTML 본연의 역할과 동떨어진 일까지 하다보니 언어의 정체성에 혼란이 왔...

1.전체 선택자 *를 이용해 HTML문서 내의 모든 요소를 선택하는 선택자이다. HTML요소를 포함한 모든 요소가 선택된다. 2.태그 선택자 태그명을 이용해 지정된 태그명을 갖는 요소를 선택하는 선택자이다. 3.ID 선택자 #id속성값을 이용해 지정된 id값을 갖는 요소를 선택하는 선택자이다. 4.클래스 선택자 `.class속

CSS 속성에는 키워드 , 크기단위 , 색상 단위 등의 특정 단위를 갖는 값을 지정한다. 1.키워드 속성에 따라 사용할 수 있는 키워드가 존재한다. 예를들어 display 속성의 값으로 사용할 수 있는 키워드는 block , inline , inline-block 이 있다. 이 외에도 많은 키워드들이 있지만 나열하기에 너무 많으므로 자주쓰거나 필요에 따라 ...

모든 HTML요소는 Box형태의 영역을 갖고 있다. 이 Box는 콘텐트 , 패딩 , 테두리 , 마진으로 구성된다. Content - 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이 다. width, height 프로퍼티를 갖는다. Padding - 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩...

1.display 속성 block - block 특성을 갖는 요소로 지정 inline - inline 특성을 갖는 요소로 지정 inline-block - inline-block 특성을 갖는 요소로 지정 none - 해당 요소를 화면에 표시하지 않는다 (공간도 없어짐) 모든 HTML 요소는 기본적으로 block 이나 inline 특성을 기본값으로 갖는다. ...

텍스트 관련 속성은 폰트의 크기 , 지정, 스타일 , 정렬등을 지정한다. 1.font-size 속성 텍스트의 크기를 지정한다. 2.font-family 속성 폰트를 지정한다. 컴퓨터에 해당 폰트가 없다면 적용 X font-family 폰트는 여러개를 동시에 지정이 가능한데 첫번째 지정한 폰트가 없는경우 다음에 지정된 폰트를 적용한다. 따라서 마지막에는 대...

Background 관련 속성은 해당 요소의 배경으로 이미지나 색상을 정의한다. 1. background-image 속성 요소에 배경 이미지를 지정한다. 2. background-repeat 속성 배경 이미지의 반족을 지정한다. 수직 수평의 반복을 지정할 수 있다. ![](https://images.velog.io/images/shkim313/po

1. position 속성 position 속성은 요소의 위치를 정의한다. top left right bottom 속성과 함께 사용하여 위치를 지정한다. 1.1 static static은 position속성의 기본값이다. 기본적인 플로우에 따라 위에서 아래서 좌에서 우로 배치되면 자식요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다. 좌표 속성(...

float 속성은 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기업이다. 정렬 float 속성을 사용하지 않은 요소들은 수직정렬 된다. float : left 속성을 사용하면 왼쪽부터 가로 정렬되고 float : right 속성을 사용하면 오른쪽부터 가로 정렬된다. float 속성은 좌,우측 정렬만 할 수 있다.

1. 상속 상속이란 상위요소에 적용된 속성을 하위요소가 물려 받는 것을 의미한다. 상속 기능이없다면 매번 요소의 속성을 각각 지정해야 한다. 하지만 모든 속성이 상속되지는 않는다. visibility opacity font color line-height text-align white-space 등이 상속되는 속성들이다. 하지만 이 속성들도 button처...

CSS3 표준으로 확정되기 이전 , 브라우저개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야 한다.

1. text-shadow 텍스트에 그림자 효과를 부여하는 프로퍼티이다. Horizontal-offest - 단위 : px - 그림자를 텍스트의 오른쪽으로 이동 vertical-offest - 단위 : px - 그림자를 텍스트의 아래쪽으로 이동 Blur-Radius - 단위 : px - 그림자의 흐림정도를 지정 Shadow-Color - 단위 : color...

애니메이션 효과는 HTML 요소에 적용되는 CSS스타일을 다른 CSS스타일로 부드럽게 변화시킨다. transition이 단순히 요소의 속성 변화에 중점을 둔다면 animation 속성은 하나의 줄거리를 구성하여 세부 움직임을 시간흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다. 위 코드를 실행시키면 div박스가 left ...

이전에는 웹상에서 사용할 수 있는 한글 폰트가 적어 포토샵 등으로 로컬 폰트를 사용하여 텍스트를 이미지로 만들어 사용하였다. 하지만 이는 많은 트래픽을 유발한다. 웹페이지는 불특정 사용자를 위해 제작되기 때문에 어떤 사용자가 웹페이지에 접근할 지 알 수 없다. 이러한 문제를 해결할 수 있는 방법이 웹폰트이다. 웹폰트는 사용자가 웹페이지를 요청하는 순간 CS...

Layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다. 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후 행 내부요소를 분리하는 것이 일반적이다. 1.Header & Navigation Bar 대부분의 웹사이트는 Navigtion Bar를 가지고 있다. 없는 사이트를 찾아보기 ...

최근들어 모바일기기의 발전에 따라 웹페이지의 반응형 디자인의 중요성이 커지고 있다. 반응형 디자인은 더이상 선택이 아닌 필수가 된것 이다. 사용자가 어떤 장치로 웹사이트를 방문할지 알 수 없기 때문에 레이아웃은 방문자의 화면 해상도를 고려해야 한다. 1. viewport meta tag viewport란 웹페이지의 가시영역을 의미한다. 데스크탑용 웹페이지...

플렉스 박스는 css3에서 새롭게 생긴 레이아웃 방식으로 요소의 사이즈가 불명확하거나 동적으로 변할때도 유연한 레이아웃을 만들 수 있다. Flexbox의 장점으로는 간단하게 수평 정렬이 가능 요소의 상하좌우 정렬과 순서변경이 간단하다 요소의 간격 조절이 쉽다 >Flexbox는 flex item이라 불리는 여러 자식 요소와 이들 담고있는 flex cont...

CSS Grid는 2차원의 레이아웃 시스템이다. Flexible Box도 좋지만 더 복잡한 레이아웃에는 Grid가 더 간단할 수 도 있다. Grid 속성 Grid는 Flex와 같이 Container와 Item 두가지 개념으로 구분된다. Container는 Item들을 감싸는 부모요소이다. Grid Container display 속성 Gride Co...