DIV 레이아웃에 대한 이해 2편 정보
DIV 레이아웃에 대한 이해 2편본문
먼저 저번 편에서 올려주신 질문부터 답변하면서 2편강의의 주제로 정하겠습니다.
보통 #wrap 지정해주면... 하위로 a, ul, li 하위클레스를 지정해주는데..
ul #wrap ul....li.. 이런식으로 나오는것은거은 어떻게 해주라는 것일까요?
감사합니다 ^_^
그런데 css는 아직까지 class 지정해주는 것 때문에 해맨다는 ㅠ.ㅠ
보통 #wrap 지정해주면... 하위로 a, ul, li 하위클레스를 지정해주는데..
ul #wrap ul....li.. 이런식으로 나오는것은거은 어떻게 해주라는 것일까요?
CSS 에는 ID와 CLASS가 있습니다.
<div id="idcode"></div>
<div class="classcode"></div>
와 같이 사용하여 css 에서는
ID의 경우 아시다 시피 #을 앞에 붙여 #idcode {} 를 사용하고
CLASS의 경우는 앞에 . 찍은 .classcode {} 를 사용합니다.
그러나 질문하신 ul li a 등의 태그는 html에 기본적으로 제공되는 태그로서 ID나 CLSSS로 구분속성을 주지 않아도 됩니다. 태그에 대한 일반속성 정의라고 보시면됩니다.
예를들어서
<!DOCTYPE html>
<html>
<head>...</head>
<body>
</body>
</html>
이라는 태그가 있다고 가정합시다. body에 속성을 주기위해서 css로 코딩을 하려고합니다. 어떻게 코딩할까요?
<body id="body">
</body>
이렇게 갈까요? 이렇게 생각할수도 있지만 기본적으로 제공되는 엘리먼트의 경우에는 css에서 id와 class 라는 구분자 없이 설정가능하도록 되어있습니다. body를 css로 설정하자면
앞에 아무것도 붙이지 않고 body {} 이렇게만 써주시면 됩니다.
이해가 되지 않으신가요? 그럼 본격적으로 레이아웃 파트로 넘어와서 감히 설명드리도록 하겠습니다.
저번 편에서 이중DIV 코딩에 대해서 말씀드렸습니다. 저가 홈페이지 레이아웃 구성하는 방법과 관련하여 이해가 쉽게 설명해드리 도록 하겠습니다.
아래의 코드는 저가 자주 사용하는 레이아웃 코딩법에 기초하여 간략화 해서 만들었습니다.
<div id="wrap">
<!-- 상단 -->
<div class="y1"></div>
<!-- 메인 -->
<div class="y2>
<!-- 좌측메뉴 -->
<div class="x1"></div>
<!-- 컨텐츠 -->
<div class="x2"></div>
</div>
<!-- 하단 -->
<div class="y3"></div>
</div>
자 위와 같은 코딩에 css를 입혀서 주석과 같은 홈페이지 레이아웃을 구성하고자 합니다.
먼저 저가 홈페이지 레이아웃 css를 구성하는것을 보여드리겠습니다.
#wrap {width:100%; text-align:center;}
#wrap div {margin:0 auto;}
#wrap .y1 {width:956px;}
#wrap .y2 {width:956px;}
#wrap .y2 .x1 {width:256px; float:left;}
#wrap .y2 .x1 {width:700pxl float:left;}
#wrap .y3 {width:956px;}
방금 올린 html소스와 css소스만으로 기본적인 그누보드 초기 설치후 보이는 페이지의 레이아웃과 비슷한 구조의 레이아웃이 완성되었습니다. div로 레이아웃을 짜면 코딩시간이 짧아집니다.!!
먼저 #wrap div {margin:0 auto;} 부분을 살펴보면 id로 구분한 #wrap 뒤에 한칸 띄우고 div를 쓴것이 보일겁니다. 이게 어떤의미냐면 #wrap 안에 있는 div엘리먼트는 모두 {}안의 속성을 적용한다라는 의미입니다. 따라서 #wrap 안의 모든 div가 중앙정렬을 하게 됩니다. 공통적으로 사용할 부분은 이렇게 묶어서 사용하면 코딩시 시간이 더욱더 절약됩니다.
#wrap .y1 {width:956px;} 해서 .y1클래스를 #wrap 의 안에 있는것에 한정하는 이유는 다른곳에서 다른 속성으로 .y1의 이름으로 클래스구분자를 사용할수 잇기 때문입니다.
#wrap .y1 {width:956px;}
#wrap .y1 .x1 {width:700px;}
#wrap .y1 .x1 .y1 {width:100px;}
처럼 같은 클래스명으로 y1을 사용하였지만 상속되는 위치에 따라서 같은 클래스명으로 다른속성을 적용할수있기에 많이들 애용합니다.
2편 강의 마치겠습니다. 시간이 없어서 두서없이 썻습니다.; 00 ㅠ 이상한것 있으면 올려주세요 다음에 들어와서 바로고쳐놓겠습니다.
보통 #wrap 지정해주면... 하위로 a, ul, li 하위클레스를 지정해주는데..
ul #wrap ul....li.. 이런식으로 나오는것은거은 어떻게 해주라는 것일까요?
감사합니다 ^_^
그런데 css는 아직까지 class 지정해주는 것 때문에 해맨다는 ㅠ.ㅠ
보통 #wrap 지정해주면... 하위로 a, ul, li 하위클레스를 지정해주는데..
ul #wrap ul....li.. 이런식으로 나오는것은거은 어떻게 해주라는 것일까요?
CSS 에는 ID와 CLASS가 있습니다.
<div id="idcode"></div>
<div class="classcode"></div>
와 같이 사용하여 css 에서는
ID의 경우 아시다 시피 #을 앞에 붙여 #idcode {} 를 사용하고
CLASS의 경우는 앞에 . 찍은 .classcode {} 를 사용합니다.
그러나 질문하신 ul li a 등의 태그는 html에 기본적으로 제공되는 태그로서 ID나 CLSSS로 구분속성을 주지 않아도 됩니다. 태그에 대한 일반속성 정의라고 보시면됩니다.
예를들어서
<!DOCTYPE html>
<html>
<head>...</head>
<body>
</body>
</html>
이라는 태그가 있다고 가정합시다. body에 속성을 주기위해서 css로 코딩을 하려고합니다. 어떻게 코딩할까요?
<body id="body">
</body>
이렇게 갈까요? 이렇게 생각할수도 있지만 기본적으로 제공되는 엘리먼트의 경우에는 css에서 id와 class 라는 구분자 없이 설정가능하도록 되어있습니다. body를 css로 설정하자면
앞에 아무것도 붙이지 않고 body {} 이렇게만 써주시면 됩니다.
이해가 되지 않으신가요? 그럼 본격적으로 레이아웃 파트로 넘어와서 감히 설명드리도록 하겠습니다.
저번 편에서 이중DIV 코딩에 대해서 말씀드렸습니다. 저가 홈페이지 레이아웃 구성하는 방법과 관련하여 이해가 쉽게 설명해드리 도록 하겠습니다.
아래의 코드는 저가 자주 사용하는 레이아웃 코딩법에 기초하여 간략화 해서 만들었습니다.
<div id="wrap">
<!-- 상단 -->
<div class="y1"></div>
<!-- 메인 -->
<div class="y2>
<!-- 좌측메뉴 -->
<div class="x1"></div>
<!-- 컨텐츠 -->
<div class="x2"></div>
</div>
<!-- 하단 -->
<div class="y3"></div>
</div>
자 위와 같은 코딩에 css를 입혀서 주석과 같은 홈페이지 레이아웃을 구성하고자 합니다.
먼저 저가 홈페이지 레이아웃 css를 구성하는것을 보여드리겠습니다.
#wrap {width:100%; text-align:center;}
#wrap div {margin:0 auto;}
#wrap .y1 {width:956px;}
#wrap .y2 {width:956px;}
#wrap .y2 .x1 {width:256px; float:left;}
#wrap .y2 .x1 {width:700pxl float:left;}
#wrap .y3 {width:956px;}
방금 올린 html소스와 css소스만으로 기본적인 그누보드 초기 설치후 보이는 페이지의 레이아웃과 비슷한 구조의 레이아웃이 완성되었습니다. div로 레이아웃을 짜면 코딩시간이 짧아집니다.!!
먼저 #wrap div {margin:0 auto;} 부분을 살펴보면 id로 구분한 #wrap 뒤에 한칸 띄우고 div를 쓴것이 보일겁니다. 이게 어떤의미냐면 #wrap 안에 있는 div엘리먼트는 모두 {}안의 속성을 적용한다라는 의미입니다. 따라서 #wrap 안의 모든 div가 중앙정렬을 하게 됩니다. 공통적으로 사용할 부분은 이렇게 묶어서 사용하면 코딩시 시간이 더욱더 절약됩니다.
#wrap .y1 {width:956px;} 해서 .y1클래스를 #wrap 의 안에 있는것에 한정하는 이유는 다른곳에서 다른 속성으로 .y1의 이름으로 클래스구분자를 사용할수 잇기 때문입니다.
#wrap .y1 {width:956px;}
#wrap .y1 .x1 {width:700px;}
#wrap .y1 .x1 .y1 {width:100px;}
처럼 같은 클래스명으로 y1을 사용하였지만 상속되는 위치에 따라서 같은 클래스명으로 다른속성을 적용할수있기에 많이들 애용합니다.
2편 강의 마치겠습니다. 시간이 없어서 두서없이 썻습니다.; 00 ㅠ 이상한것 있으면 올려주세요 다음에 들어와서 바로고쳐놓겠습니다.
추천
7
7
댓글 9개
강의 잘 듣고 갑니다..
좋은 강의 감사드립니다 ^^
보통 기존 소스로 이미 짜여져있는 레이어는 이것저것 건드려 노가다 하며
수정하지만 막상 레이어를 만들려면 황막해지더군요 ㅎ
홈페이지레이어 구성 다음회도 기대할게요..
보통 기존 소스로 이미 짜여져있는 레이어는 이것저것 건드려 노가다 하며
수정하지만 막상 레이어를 만들려면 황막해지더군요 ㅎ
홈페이지레이어 구성 다음회도 기대할게요..
굿입니다 앞으로도 좋은강의 부탁드립니다.
드됴 2탄이 올라왔네요..
선댓글 후공부 합니다
좋은 강의해주셔서 감사합니다 ^^
선댓글 후공부 합니다
좋은 강의해주셔서 감사합니다 ^^
좋군요 ㅋ
감사합니다.
감사합니다.
감사합니다. ^^
감사합니다.. 잘 읽었습니다
