CSS Style

CSS skills(4) - display:flex;

이번 포스팅에서는 display:flex;에 대해 알아보도록 하자. 지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 엘리먼트들의 경우 아래와 같이 부모 엘리먼트에 padding을, 자식 엘리먼트에 margin을 부여해서 컨텐츠들을 정렬하였다. 이번에 알아볼 display:flex;는 이러한 복잡한 방식을 동원하지 않고도 좀 더 편하게 레이아웃을 구성할 수 있게끔 도와주는 속성이다. 한마디로, 레이아웃을 구성할 때 알아두면 무척 편하고 좋은 속성이다. 위의 그림과 같이 레이아웃이 구성되어 있다고 했을 때 display:flex;는 container에 그 속성값을 부여한다. 다시말해, display:flex;는 정렬의 주체가 부모에게 있..

CSS 응용(2) - layer popup 만들기

이번 포스팅에서 만들어 볼 것은 바로 layer popup 이다. 아래 그림과 같이 "버튼"을 클릭했을 때 pop up되는 느낌으로 새로운 영역이 등장하는 효과를 layer popup 이라고 한다. 시작하기에 앞서 아래와 같이 css style 기본 세팅을 적용한 후에 시작하도록 하자. /* CSS style sheet */ * { margin:0; padding:0; } ul, li { list-style:none; } a { text-decoration:none; } "버튼"을 클릭하기 전과 후의 화면을 다르게 구성하기 위해서 input:checked { } 속성을 사용해 효과를 적용하려고 한다. 우선, 엘리먼트와 엘리먼트를 사용하여 "버튼"이라는 글자와 함께 체크박스를 생성하고 체크박스에 displ..

CSS skills(3) - !important , class 여러 개 주기 , input:focus { }

!important class 여러개 주기 input:focus { } 해당 속성에 대해 설명하기 위해 다음과 같은 html 코드가 작성되어 있다고 하자. 간혹 코드를 작성하다 보면 위에 있는 코드처럼 엘리먼트에 두개 이상의 css 속성이 작성되는 경우가 발생할 수 있다. 이때 동일한 속성에 대해 아래에 적혀있는 css가 위에 위치한 css를 덮어버리는 현상이 발생하는데 만약 작성된 css의 개수가 많아지게 되면 해당 부분을 찾아내서 수정하기가 번거로워지는 상황에 처하게 된다. 이러한 이슈를 해결할 때 사용되는 것이 바로 !important 이다. !important는 강제적으로 css를 적용할 때 사용하게 된다. !important가 작성된 코드에 우선순위를 부여해 해당 코드..

CSS (1) - CSS 적용 방법

css에서 스타일을 주는 방법에는 세가지가 존재한다. 이번 포스팅에서 css의 적용 방법에 대해 알아보자 인라인 style을 활용한 css 적용법 엘리먼트를 활용한 css 적용법 외부파일 생성을 통한 css 적용법 이 방법은 특정 엘리먼트에 style이라는 속성을 주고 속성값 변경을 통해 css를 적용하는 방법이다. 내용 2 3 4 5 6 위의 코드를 살펴보면 엘리먼트 안에 있는 엘리먼트의 style 속성을 이용해 해당 엘리먼트가 웹페이지 상에서 차지하는 영역에 스타일을 준 것을 알 수 있다. 에서 font-size:12px;를 이용해 폰트 사이즈를 12px로 변경하였고 background:red;를 이용해 해당 엘리먼트가 차지하고 있는 영역만큼에 색상을 넣을 수 있다. 여기서 background:red..