CSS레이아웃

home > CSS레이아웃

6강 : CSS레이아웃

去頭截尾(거두절미) 앞뒤의 잔말을 빼고 요점만 말함

CSS레이아웃 css에서 가장
제 블로그에 놀러오신 분들을 환영합니다!

홈페이지를 만들때 가장 기본이 되는 css
기초부터 실무(?)까지 css의 기초를 간략하게 알려드리겠습니다.
css를 왜 배울려고 하시나요?
css를 배워서 뭘 하려고 준비중이세요?
댓글로 소통하면서 같이 나누고 싶습니다
소스는 아래처럼 이렇게 분리해서 쉽게 보실 수 있습니다.
이걸 배우기위에서는 기본적으로 html, js, javascript, jsp, asp 등 다양한 활용이 가능합니다

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2; /** 코드가 6개
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.topnav a:hover {
background-color: #ddd; /** #코드가 3개는?
color: black;
}

table.a {
table-layout: auto;
width: 190px;
}

table.b {
table-layout: fixed;
width: 190px;
}
레이아웃관련 상속 자세한 정보 보기
auto 설명 : 브라우저는 자동 테이블 레이아웃 알고리즘을 사용합니다.
열 너비는 셀에서 가장 넓은 끊을 수 없는 내용에 의해 설정됩니다. 내용이 레이아웃을 좌우합니다.
fixed 설명 : 고정 테이블 레이아웃 알고리즘을 설정합니다.
표와 열 너비는 표의 너비로 설정되고 색상은 셀의 첫 번째 행 너비로 설정됩니다.
다른 행의 셀은 열 너비에 영향을 주지 않습니다.
첫 번째 행에 폭이 없는 경우 셀 내부의 내용에 관계없이 열 너비가 표에서 동일하게 분할됩니다.
initial 설명 : 이 속성을 기본값으로 설정합니다. 초기 정보 읽기
inherit 설명 : 상위 요소에서 이 속성을 상속합니다. 상속 정보 읽기

소스해설입니다. 소스에 보시면 body는 가장 중심이 되는 단어입니다.
css기초를 할때 가장 많이 만나는 단어가될 것이니 실제 반영해서 한번 잘 작동하는지 봐보세요.
어떠세요? 쉽죠?
h1~h6, 그리고 문단을 구분하는 p까지 쉽게 으 특성들을 꾸밀 수 있습니다.
하나 하나 코딩을 하는 것이 아니라 묶어서 한번에 id등을 활용해서 꾸밀 수 있습니다!
이렇게 쉽게 하실 수 있습니다.

이 강좌에서는
내용을 다릅니다. 더보기에서 확인해보세요. 댓글을 남겨주시면 제가 알고 있는 한도내에서 답변드리겠습니다.

+더보기





아직도 궁금하시죠? 다음 포스팅 보기