🖥️Feeling lucky
다음으로는 검색 입력창 아래에 있는 두 개의 버튼을 작업해보겠습니다.
현재 우리가 목표로 하는 결과물을 보면, 두 개의 버튼이 일정 여백을 두고 떨어져 있지만, 가운데 정렬되어 있음을 확인할 수 있습니다.
우선 버튼을 넣어보겠습니다.
두개의 버튼은 기본적으로 같은 스타일을 띄고 있기에 동일한 class 이름을 넣도록 하겠습니다. 일타쌍피.. 😌
그리고 CSS에서 다음과 같이 버튼의 스타일을 지정해줄까요?
이제 위와 같은 우리의 화면에서 두 개의 버튼을 가운데 정렬해보도록 하겠습니다. 이번엔 조금 새로운 속성을 한번 이용해볼텐데요.
Flex
CSS의 display
속성에는 flex
라는 값을 사용할 수 있습니다. Flex는 기존 요소들의 흐름에서 벗어나, 다양한 방식으로 자식 요소들을 배치할 수 있는 유연함을 제공합니다.
아래 예제를 보시면, 간단한 웹페이지를 만들어 놓았습니다. 모든 요소들은 일반적인 Block 요소의 흐름대로 수직으로 나열되어 있습니다.
Flex를 사용하지 않은 예제 링크
위의 웹페이지 예제에서 보셨던 <section>
과 <aside>
요소는 Block 요소이기 때문에, 기본적으로 위/아래 형식으로 배치됩니다. 이제 두 요소를 양 옆으로 나란히 배치해보도록 하겠습니다. <section>
요소와 <aside>
요소의 부모인 ".main"
요소에 flex
를 적용해보겠습니다.
Flex 속성은 매우 다양한 기능들을 제공합니다. 하나씩 배우면 되니, 아직 너무 고민하지 마세요.
Flex를 적용하여 버튼들을 가운데 정렬해보도록 하겠습니다. 매우 쉬워요. 😏
우선 다음과 같이, 버튼들을 포함하고 있는 부모 요소에게 .search
라는 class를 추가합니다.
그리고 아래와 같이 .search
요소의 스타일을 수정합니다.
Flex를 활용하여 정렬을 조정하고 싶다면, 조정하고 싶은 요소들의 상위 부모 요소에게 Flex 속성을 부여해주어야만 합니다.
자, 이제 또 결과물을 한번 확인해볼까요?
처음 시작보다 많이 그럴싸해졌죠? 💫
이제 많은 선생님들이 늘 단골멘트처럼 말씀하시듯, 지금까지 배운 내용을 활용하여 여러분께서 직접 남은 부분을 완성해보거나 아니면 여러분이 만들어 보고 싶은 웹사이트를 선택하여 직접 코드를 작성해보세요.
1-2개의 웹사이트를 만들어보는 시간만 가져도, HTML/CSS는 실력이 쑥쑥 자라납니다. 💪🏻
Last updated