'CSS' 카테고리의 글 목록

CSS skills(4) - display:flex;

2021.12.30

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

CSS

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

2021.12.28

이번 포스팅에서 만들어 볼 것은 바로 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

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

2021.12.28

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

CSS

CSS 응용(1) - 햄버거 버튼(메뉴바) 만들기

2021.12.27

이번 포스팅에서는 css를 활용해 메뉴바를 만들어 보고자 한다. 웹페이지 상에서 마우스 커서에 반응하여 움직이는 메뉴바를 많이 본 적이 있을 것이다. 아래와 같이 생긴 메뉴바 혹은 버튼을 일명 "햄버거 버튼" 이라고 하는데 이 버튼을 클릭했을 때 세부 메뉴 항목들이 나올 수 있게끔 html과 css 코드를 작성해 보고자 한다. 위의 그림처럼 메뉴바를 클릭했을 때 세부 메뉴 영역이 표출되면서 메뉴바의 모양이 X 모양으로 변하는 효과를 넣어보고자 한다. 과정을 따라가면서 새롭게 등장하는 css 속성들은 그때 그때 언급하면서 알아가보도록 하자. 우선 첫째로 햄버거 버튼 모양을 만들어야 하는데, 필자는 다음과 같은 과정을 통해 만들었다. div영역을 만들고 을 이용해 높이 5px 짜리 선들을 만들어서 각각의 위..

CSS

CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child