레이아웃잡을때... 순서 질문입니다.
블레이
수다닷컴에 올라와 있던 소스들을 참조해서 이런 기본 레이아웃을 잡아보았습니다. ^^:
그런데요, div 코딩의 장점 중에 하나가 테이블과 달리 위- 아래 , 왼쪽 - 오른쪽의 순차적인 순서가 아니라
컨텐츠 자체의 중요도에 따라 html 코드들의 순서를 조정할 수 있다고 봤는데요
그래서 저 위에 레이아웃중에
왼쪽칼럼 - 뉴스칼럼 - 오른쪽칼럼 순이 아니라
뉴스칼럼 - 왼쪽칼럼 - 오른쪽칼럼 순으로 코드 순서가 나오고 화면상으로는 저처럼 나오게 하고 싶은데
그런건 어떻게 하는건가요?
너무 초보적인 질문이라 죄송합니다. ^^:
(첨부한 파일은 div로 레이아웃을 잡았지만 테이블과 다를바 없이 코드 순서가 왼쪽칼럼 - 뉴스칼럼- 오른쪽칼럼으로 되어 있는 소스입니다... -__-;)그러니까... 아래처럼 해서 왼쪽-뉴스-오른쪽 이렇게 나오게 하고 싶은데
애들이 막 뒤집어지네요. 소스상에 뉴스칼럼이 왼쪽칼럼 다음에 나올땐 잘되는데 말이죠... ^^;;;
#CONTENT{position:relative;width:980px;margin:0 auto;text-align:left;}
#leftcolumn {float:left;width:240px;background-color:#EFEFEF;}
#newsColumn {display:inline;float:left;width:480px;margin:0 10px;background-color: #000;}
#rightcolumn {float:right;width:240px;background-color: #EAEEF7;}div id=CONTENT
div id=newsColumn
뉴스칼럼
/div
div id=leftcolumn
왼쪽칼럼
/div
div id=rightcolumn
오른쪽칼럼
/div
/div
-
한누리
소스 편집창에서 순서를 바꾼다는거라면
#wrapper 전체레이아웃 감싸주시고요
각 id를 float 설정에 따라 웹상에서 보여지는 순서를 적용할수있습니다
html 코드상의 위치는 web에 적용되지 않습니다. -
튼튼
아쇼라찡뽕빵 ㅎㅎㅎㅎ 참고하겠습니당. ^^
-
화이트
마크업을 하실 때 반드시 위에서 아랫 방향으로 왼쪽에서 오른쪽 순서를 잡으시고 마크업을 하셔야 합니다. 만약 순서가 뒤바뀐 상태에서 홈페이지가 완성된다면, 키보드 접근 순서가 뒤바뀐 아주 아쇼라찡뽕빵한 결과를 가져올 수 있습니다.
-
라온제나
#leftcolumn {float:left;width:240px;background-color:#EFEFEF;margin-left:-740px;}
#newsColumn {display:inline;float:left;width:480px;margin:0 10px 0 250px;;background-color: #000;}
#rightcolumn {float:right;width:240px;background-color: #EAEEF7;}
이렇게 줬더니 -
여름
검색을 좀 하다보니 저렇게 코딩을 하려면 \margin의 음수 값을 사용해야하는...참.....아스트랄한 코딩이 되실꺼예요\라고 수다님의 댓글이 있던데... 음. 누가 음수가 되어야 하는지 ^^:
-
안찬
음... 지금 왼쪽칼럼,뉴스칼럼,오른쪽칼럼은 content라는 div로 한번 감싸줬는데요... 왼쪽은 left로 오른쪽은 right로 줬더니 뉴스칼럼이 왼쪽 위에 나오고 바로 아랫단에 왼쪽칼럼이 왼쪽에 오른쪽칼럼이 오른쪽에 자리잡네요. 뉴스칼럼에도 float를 줘야하는건가봐요.. 그런데 어떻게 줘야 할런지 ^^:
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2653721 | [플러그인]질문드립니다!! (3) | 이리온 | 2024-05-04 |
2653697 | 포문의 고수님들 도와주세여...포문이 복잡하네여.... | 족장 | 2024-05-04 |
2653671 | 메뉴 스크립트 문의드립니다. | 하루키 | 2024-05-03 |
2653637 | 자바 안드로이드를 시작하려고 합니다.이클립스 버전에 질문이. (3) | 영글 | 2024-05-03 |
2653578 | 소스 있는데 프로그램좀 만들어주실뿐.. (8) | 갤투 | 2024-05-03 |
2653550 | 첫화면에 인스타그램 피드 나오게 하고싶은데 | 눈 | 2024-05-02 |
2653528 | 이 두개 코드 차이점이 뭔가요? | 마중물 | 2024-05-02 |
2653444 | c# email을 db로 저장 시키기 (1) | 피네 | 2024-05-01 |
2653361 | 초보에유~ filter:gray; 이거 파폭에선 어케먹이나용 ㅠㅠㅋ | 마음새 | 2024-05-01 |
2653335 | 파일확장자 구하는 방법 질문을 합니다. (2) | 한가람 | 2024-04-30 |
2653305 | [질문] 무비클립과 텍스트 그냥 일반적으로 크기 축소시 문제.. | 한누리 | 2024-04-30 |
2653224 | 프린트하기 질문입니다. | 파라 | 2024-04-29 |
2653194 | 이미지에 텍스트 삽입 질문드려요 | 라임나무 | 2024-04-29 |
2653164 | 페이지 로딩시 특정 div 투명값 조절 (1) | 은별 | 2024-04-29 |
2653136 | C언어를 배우고있는 왕초보 프로그래머 지망생입니다 (2) | 베레기 | 2024-04-29 |
2653111 | 이렇게 레이아웃 짜는거 맞나요? (3) | 은G | 2024-04-28 |
2653089 | [질문]특정글자가 몇번째자이에 위치했는지 알아내는 방법 (1) | 유라 | 2024-04-28 |
2653065 | 사파리에서 플래쉬에 얹어지지 않는 div (2) | 말근 | 2024-04-28 |
2653038 | 바이트 스트림과 문자 스트림이 왜 있는거죠? (1) | 행복녀 | 2024-04-28 |
2653005 | 대시보드 한글지원 되는 테마와 안되는 테마 (1) | 난길 | 2024-04-27 |