[css] 내비게이션(gnb) 만들기 05 - 가운데 정렬

안녕하세요. 개자이너 씸플레이입니다. 사실 헤더 부분 전체를 가운데 정렬하는 것이지만 일단 제목을 이렇게 적어봤어요. 1. 여백 확인 ① 현재 상황 파악 지금까지 잘 따라오셨다면 로고와 카테고리가 각각 양 옆으로 붙어있을 겁니다. 그런데 뭔가 이상하죠? 다른 사이트들을 보면 글자는 중앙에 있고 양쪽은 여백인 곳이 많을 거예요. 그렇습니다. 너무 끝에 몰려있다는 생각을 하셨을 거예요. 2. 태그 추가 ① 태그 추가 컨텐츠가 있는 영역과 여백이 있는 영역 두 개가 필요하기 때문에 콘텐츠를 한 번 더 감싸줍니다. 감싸주는 태그로는 태그를 사용했습니다. 래핑 단축키는 Ctrl + Shift + P 입니다. >래핑 설명 보러가기margin: 0 atuo; 설명 보러가기

coding/html + css · 2021. 3. 4. 09:30

[꿀정보] 게시판에서 지도 가운데 정렬 하기

가끔 게시판에 지도를 불러오면 지도만 가운데 정렬이 안될 때가 있죠? 이럴 때 간단하게 소스로 가운데 정렬을 해줄게요. 코드를 조금 다룰줄 아시는 분들은 바로 4번을 봐주세요. 1. 왼쪽정렬 된 지도 게시판 수정에 들어가서 아무리 가운데 정렬을 눌러도 이렇게 지도로 가져온것에는 가운데 정렬이 안 먹을 때가 있어요. 그렇다면 게시판에서 제공하는 에디터 말고 소스로 수정을 해줍시다. 괜찮아요 어렵지 않아요. 2. 소스보기 대부분의 게시판 작성 모드에서는 HTML 소스보기를 제공해줍니다. 티스토리도 제공해주는 것 아시죠? 보통은 맨 왼쪽 끝이나 맨 오른쪽 끝에 있어요. 지금 사용하는 게시판은 맨 왼쪽에 있네요. 저 HTML 소스 버튼을 눌러줍니다. 으악 영어다!!! 자, 진정하시고 여러분은 이 모든 글을 다 ..

tip/유용한 팁 · 2020. 10. 17. 07:30

[css] 나란하게 배열

안녕하세요. 플입니다. 오늘은 float을 이용해 요소를 나란하게 만들어보겠습니다. 1. float float을 이용해 연도 부분과 내용 부분을 한 줄에 넣을 것입니다. p{ float:left; } float은 띄우다 라는 뜻으로 이것을 사용했을 때 '띄웠다'라고 표현하기도 합니다. left 즉, 왼쪽으로 띄웠으니 오른쪽 공간이 빕니다. 비는 공간으로 내용 부분이 올라오는 것입니다. 아니면 왼쪽으로 붙었다고도 표현할 수 있습니다. 2. 팁 사실 오른쪽에 있는 요소가 inline이었기 때문에 오른쪽에 있는 것이지 block요소였다면 여기에도 float을 줘야 합니다. float이 안 먹었을 때는 이렇게 뒤쪽까지 자리를 차지하게 됩니다. 띄웠다는 것은 레이어 층이 나눠졌다는 말과 같아서 두 요소는 다른 레..

coding/html + css · 2019. 11. 7. 07:30

[css] 컨텐츠 가운데 정렬하기

안녕하세요. 플입니다. 오늘은 브라우저 사이즈에 관계없이 컨텐츠를 가운데 정렬해보겠습니다. 1. 가로 사이즈 지정 ul{ width:1280px; } 우선 가로 사이즈를 지정해줍니다. 가로 사이즈는 사이트의 기본 사이즈를 정해둔 것이 있을 겁니다. 그 사이즈로 지정해주세요. 저는 1280px을 주었습니다. 최근에는 와이드 모니터가 늘어서 가로사이즈가 점점 늘어나고 있는 추세입니다. 만드는 웹사이트의 성격에 따라 사이즈가 달라지니 여러 상황을 고려해 사이즈를 정해줍니다. 저는 알아보기 쉽게 border를 넣었습니다. 보기 편하게 border를 지정한 상태로 진행하고 마지막에 제거해주셔도 됩니다. 2. 마진 이용 ul{ margin:0 auto; } 마지막으로 마진을 이용해 가운데 정렬을 해줍니다. 마진 값..

coding/html + css · 2019. 11. 5. 22:30