본문 바로가기

개발자 꿈나무/CSS18

margin: 0 auto; 가운데 정렬이 되지 않을 때 가운데 정렬을 하는 방법은 여러가지가 있는데 나는 그 중에서도 text-align:center; 와 margin: 0 auto;를 가장 많이 사용하는 편이다. 그런데 간혹 margin:0 auto;를 적용해도 가운데 정렬이 되지 않을 때가 있다. 이러한 상황에서 체크해 볼 수 있는 세가지 방법에 대해서 소개하도록 하겠다. margin: 0 auto; 가운데 정렬이 되지 않을 때 해결방법 1. 가장 첫번째로 해야 할 일은 선언이 제대로 되었는지 확인해보아야 한다. 2. auto는 자동으로 사이즈를 설정해주는 것이다. 그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능하다. margin: 0 auto; 가 반응하지 않을 때에는 해당 영역의 가로 사이즈가 제대로 설정되어 있는지 확인해보고, 만약.. 2021. 8. 2.
CSS로 색상 표현하기(HEX, RGB, 색 이름) html 파일에 사용된 텍스트나 div 배경 등에 색상을 사용할 때는 CSS를 이용하면 된다. CSS에서 색상을 표현하는 방법 세가지를 포스팅으로 정리하려고 한다. 색 이름 사용하기 우리가 사용하는 색상 이름을 바로 입력하여 사용이 가능하다. p { color: red; background-color: white; } CSS에서는 140가지의 색상을 이름으로 지원한다고 한다. 아래 url을 클릭하면 지원하는 색상표를 확인할 수 있다. 그러나 이 방법은 black, white가 아닌 이상 색상을 세밀하게 원하는 대로 조절할 수 없어서 디자이너들은 거의 사용하지 않는다. 이를 보완하여 더 다채로운 색상을 표현하는 방법은 HEX, RGB를 사용하는 것이다. https://www.w3schools.com/css.. 2021. 7. 22.
position: fixed 이용해서 footer, div 하단에 고정시키기 최근에 회사에서 삼* 브랜드 기업과 서비스 제휴를 맺어 카시트 클리닝을 신청하는 고객용 랜딩 페이지를 제작했다. 디자인 컨펌을 하고 퍼블리싱을 진행하는 김에 css를 사용하며 몇가지를 함께 정리해 두었다. 어렵지 않지만 막상 하려면 기억이 가물가물한... 그러다가 검색해서 코드를 보고나면 '맞다, 이거였지!' 하는 css 코드 몇가지를 이번주에 블로그에 정리해 두려고 한다. 스크롤과 상관없이 div 하단에 고정시키는 방법 신청하기 랜딩 페이지의 시안은 아래와 같다. 가장 먼저 타이틀이 보여지고 스크롤을 아래로 내리면 상세페이지를 확인할 수 있다. 그리고 서비스가 마음에 들어 신청을 하고 싶다면 '신청하기' 버튼을 클릭하면 된다. 상세페이지가 꽤 길어서 신청하기 버튼을 상세페이지 아래에 둔다면 스크롤을 많.. 2021. 4. 7.
아이템(div)의 너비 설정하기 - flex item 속성(2) 얼마 전에 flex css 속성들에 대해 포스팅하기로 했었는데 flex item 속성(1)까지 포스팅을 하고 그 후로 시간이 꽤 지났다. (이런 저런 일들로 너무 바빴...) 늦었지만 마무리는 해야하니까 오늘은 flex item 속성 제 2탄! 지난 번에 item 정렬과 순서를 설정하는 css를 알아보았다면 오늘 소개할 아이들은 item 너비와 관련된 css 들이다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex .. 2021. 1. 1.
div 박스 & png 투명배경 이미지에 그림자 효과주기 이벤트 페이지를 퍼블리싱하던 도중 css 스타일시트를 이용하여 그림자 효과를 주어야 하는 div 박스와 투명배경 png 이미지를 만났다. 이 두가지는 각각 그림자 효과를 적용하는 방법이 다른데 블로그에 정리해두려고 한다. div 박스 그림자 효과주기 그림자효과를 주려는 대상이 네모난 모양이라면 box-shadow 를 사용하여 그림자 효과를 줄 수 있다. .box { box-shadow : none; /* 그림자 효과를 없앰 */ box-shadow : x-position y-position blur color inset; /* 왼쪽부터 차례대로 가로 위치, 세로 위치, 그림자의 흐린 정도, 그림자 색상 가로 위치, 세로 위치는 양수이면 오른쪽, 음수이면 왼쪽에 그림자를 만들고, 블러값은 클수록 흐려짐 i.. 2020. 11. 29.
아이템(div) 정렬과 순서 설정하기 - flex item 속성(1) 지난 포스팅에서는 flex와 flex-container(부모 요소)에 사용할 수 있는 속성들에 대해 알아보았다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) 이번 포스팅에서는 flex-item(자식 요소)에 사용할 수 있는 속성 중에서 순서, 정렬을 변경하는 css에 대해 설명할 예정이다. order item의 순서를 설정하는 css이다. 숫자가 클수록 순서가 밀리며 음수, 0, 양수.. 2020. 11. 13.
아이템(div) 정렬과 여백 설정하기 - flex container 속성(2) div 박스의 사이 간격을 동일하게 하고 싶다면? 내부 컨텐츠 길이에 상관없이 div 박스가 동일한 넓이를 갖게 하고 싶다면? 이번 포스팅은 이러한 물음들에 대한 좋은 해결책이 될 것이다. 이번에 소개할 css 태그 모두 지난 포스팅과 마찬가지로 flex container에 적용 가능한 속성이다. justify-content 수평축의 정렬 방법을 설정하는 css이다. 속성값은 아래와 같다. .flex_container { justify-content: flex-start; /* 기본값, 아이템을 시작점으로 정렬 */ justify-content: flex-end; /* 아이템을 끝점으로 정렬 */ justify-content: center; /* 아이템을 가운데 정렬 */ justify-content: .. 2020. 11. 7.
아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) flex css 제 2탄! 오늘은 flex container에 사용할 수 있는 속성 중에서 item(div)을 수직/수평 정렬하는 방법에 대해 소개하려고 한다. 더해서 브라우저 사이즈에 따라 줄바꿈 여부를 결정하는 css도 함께 알아두면 도움이 될 것이다. flex-direction item을 수평(가로) 정렬할 것인지, 수직(세로) 정렬할 것인지 결정하는 css 이다. .flex_container{ flex-direction: row; /* 기본값, 아이템을 왼쪽에서 오른쪽으로 수평 정렬함 */ flex-direction: row-reverse; /* 아이템을 오른쪽에서 왼쪽으로 수평 정렬함 */ flex-direction: column; /* 아이템을 위에서 아래로 수직 정렬함 */ flex-dire.. 2020. 11. 6.
flex 기초 - flex란 무엇인가? 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다. flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다. flex container가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이다. flex 시작하.. 2020. 10. 29.
스타일시트 vertical-align 사용해서 <div> 수직 정렬하기 vertical-align은 inline 또는 table-cell에서 수직 정렬을 지정해주는 css 속성이다. 속성값은 아래와 같다. vertical-align: baseline; /* 부모 baseline에 맞추어 해당 요소의 baseline을 정렬 */ vertical-align: sub; /* 해당 요소의 baseline을 부모의 아래첨자 기준에 맞추어 정렬 */ vertical-align: super; /* 해당 요소의 baseline을 부모의 위첨자 기준에 맞추어 정렬 */ vertical-align: text-top; /* 해당 요소 상단을 부모 요소 폰트의 상단에 맞추어 정렬 */ vertical-align: text-bottom; /* 해당 요소 하단을 부모 요소 폰트의 하단에 맞추어 정렬.. 2020. 10. 17.