냐울당 햄버거 메뉴

목차

    반응형

    가끔 게시판에 지도를 불러오면 지도만 가운데 정렬이 안될 때가 있죠?

    이럴 때 간단하게 소스로 가운데 정렬을 해줄게요.

     

    코드를 조금 다룰줄 아시는 분들은 바로 4번을 봐주세요.


    1. 왼쪽정렬 된 지도

    왼쪽 정렬 지도

    게시판 수정에 들어가서 아무리 가운데 정렬을 눌러도 이렇게 지도로 가져온것에는 가운데 정렬이 안 먹을 때가 있어요.

    그렇다면 게시판에서 제공하는 에디터 말고 소스로 수정을 해줍시다. 괜찮아요 어렵지 않아요.


    2. 소스보기

    게시판 소스 보기

    대부분의 게시판 작성 모드에서는 HTML 소스보기를 제공해줍니다. 티스토리도 제공해주는 것 아시죠?

    보통은 맨 왼쪽 끝이나 맨 오른쪽 끝에 있어요. 지금 사용하는 게시판은 맨 왼쪽에 있네요. 저 HTML 소스 버튼을 눌러줍니다.

     

    소스코드 화면

    으악 영어다!!!

     

    자, 진정하시고 여러분은 이 모든 글을 다 보실 필요가 없습니다.

     

    맨 앞줄의 코드

    지도 부분 중 맨 앞줄의 코드만 살펴봐주세요. <>이런 꺽쇄가 태그라고 했던 것 기억하시죠? 

    근데 얘는 엄청 기네. 이런 생각이 드실 거예요. 이름이랑 스타일이 같이 들어가서 그런 건데요. 어렵다고요? 그럼 그냥 그런 게 있구나 하고 넘어갑시다.

     

    style

    여기 보시면 style이라서 쓰여있는 부분이 있어요. 대부분 지도를 가져오셨다면 있으실 텐데, 이건 없으시다면 넣어주셔야 하니까 잘 봐주세요. 지금부터 태그에 스타일을 넣어줄 거예요.

     

    <div style=" ">

    스타일이 없다면 위의 코드처럼 넣어주시면 되는데요. div는 태그의 이름이에요. 이름 옆에 style=""을 적어서 직접 스타일을 꾸며줄 수 있게 세팅해줍니다. 이미 있다면 따옴표 안쪽으로 추가하면 돼요.

    *style을 두 개 넣으시면 안 돼요. 

     

    style=""

    이것의 뜻은 이제부터 따옴표 안쪽에 있는 스타일을 적용할 거야.라는 의미예요. 컴퓨터는 형식이 조금이라도 틀리면 이해하지 못하니까 꼭 사람인 저희가 오타가 없게 잘 신경 써줍시다.


    3. width 확인

    width

    스타일을 추가하기 전에 잠깐!

    style 따옴표 안쪽에 width가 있는지 봐주세요. 음. 이 친구는 있군요. 720px이래요. width는 가로 사이즈를 의미해요.

    왜 가로사이즈가 있어야 하는지는 뒤에 가서 설명드릴게요. 일단 이게 있는지 봐주시고 없으면 본인이 원하는 사이즈로 지정해주세요. 

     

    width:720px;

    꼭 따옴표 안쪽에 작성해주시고요. width라고 가로 값을 설정할 거야! 하고 선언해주시고 :(땡땡-이거 이름 뭔지 아시는 분)을 이용해 가로 값에 얼마를 넣을지 정해줍니다. 여러분 수학 시간에 배운 방정식 아시죠? 그거랑 비슷해요.

    미지수=값 이거 미지수에 값을 넣는다는 의미잖아요? width는 가로 값이니까 가로값:720px하면 가로값이 720px인 거예요.

     

    아 모르겠다 하시면 그냥 저대로 쓰고 숫자만 바꿔주세요. 몰라도 괜찮습니다. 

     

    그러면 마지막에 ;(세미콜론)이 남는데, 얘는 뒤에 꼭 붙여주셔야 해요. 저 따옴표 안쪽에서 쓰는 콤마 같은 거라서 세미콜론이 없으면 우리의 컴퓨터가 뒤에 오는 다른 스타일과 구분을 못합니다. 구분하기 위해서 꼭 ;(세미콜론)을 써주세요.


    4. 스타일 추가

    마진 추가

    휴 설명이 길었죠? 

    스타일의 맨 끝이나 맨 앞에 margin:0 auto;를 넣어줍시다.

     

    <div style="width:720px; margin:0 auto;"> </div>

    간단하게 보면 이런 거예요. 

     

    margin:0 auto;

    마진 영 오토라고 불리는 이 친구는 무엇이냐. 마진은 여백을 의미해요.

    그리고 뒤에 나오는 두 개의 값은 위아래 값과 오른쪽 왼쪽 값이거든요. 위아래가 0 오른쪽 왼쪽이 auto 즉, 자동이에요.

     

    마진 설명 이미지

    이 이미지에서 초록색 부분이 마진인 거예요. 0이면 없다는 소리지만 가시적으로 보여주기 위해서 만들어봤으니 마음의 눈으로 봐주세요. 여기서 중요한 점은 좌우가 auto값인 건데요. 자동으로 하면 뭐가 좋으냐 하면

    자동으로 브라우저 사이즈를 계산해서 양쪽 값을 똑같이 맞춰줍니다. 

     

    무슨 말이냐고요? 

     

    가운데 정렬된 지도

    이렇게 가운데 정렬을 시킬 수 있다는 말이에요.

    위에서 가로 값이 있어야한다고 했던 것 기억하시나요? 가로값이 있어야 그걸 제외한 마진을 컴퓨터가 계산해서 양쪽으로 넣어주기 때문이랍니다. 가로값이 없다면 컴퓨터는 마진을 어디를 기준으로 줘야 할지 헷갈리는 거죠.

     

     

    세미콜론 주의

    *주의

    스타일 값이 있는 상태에서 맨 뒤에 넣을 때 세미콜론이 없는 경우가 있습니다. 꼭 세미콜론을 넣어주고 마진 값을 설정해주세요. 컴퓨터는 이해하지 못합니다. 왜 안되나 하고 울지 말고 오타를 꼭 주의합시다!


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바