CSS 실습1
- 최종적으로 만들 홈페이지
실습하기전에 이전에 만들었던 소스 가져오기.
이 소스코드
실습 1. 맨 위 그림에서 빨간색 네모부분으로 바꾸기
html에서 header 부분이다.
border을 사용하면 되는데 4면이 다 필요한 것이 아니라 하단의 border만 필요하므로
border-bottom 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
<style>
header {
border-bottom:1px solid gray;
}
</style>
</head>
<body>
<header>
</header>
<nav>
<ol>
</ol>
</nav>
</body>
</html>
실습 2. 제목과 border 사이가 너무 가까워서 좀 떨어뜨리고 싶다.
padding 사용
padding:20px; 추가.
header {
border-bottom:1px solid gray;
padding:20px;
}
실습 3. 위의 그림에서 왼쪽 아래부분 만들기
본래 코드에서 nav에 해당되는 부분
앞에서 배운 float를 사용하고 left를 사용하면 된다.
nav{
border-right:1px solid gray;
}
이렇게만 하면
맨 위의 그림과 다르게 화면 맨 끝에 테두리가 생기게 됨 : right 로 하면 화면 끝에 생긴다.
수정하기 위해 필요한 것 : width
이렇게 하면 화면 끝이 아닌 설정한 width 뒤에 선이 생기게 된다.
nav{
border-right:1px solid gray;
width:200px;
}
실습 4. 맨 위 그림처럼 아래의 설명 부분이 오른쪽으로 오게 하기.
먼저 설명이 있는 html 파일. 예를 들어 이전에 만들었던 page_html에서 위에서 설명한 만큼 수정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
<style>
header {
border-bottom:1px gray solid;
padding:20px;
}
nav {
border-right:1px gray solid;
width:200px;
float:left;
}
</style>
</head>
<body>
<header>
</header>
<nav>
<ol>
</ol>
</nav>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>
여기서 아래로 내려간 글자를 오른쪽으로 옮기기 위해 float 추가
nav {
border-right:1px gray solid;
width:200px;
float:left;
}
이렇게 하면 li의 height를 초과하는 부분은 왼쪽 끝부터 글자가 시작되어서 보기가 안좋다.
1번 방법 이를 위해 nav의 height를 늘려주자.
nav {
border-right:1px gray solid;
width:200px;
height:600px;
float:left;
}
2번 방법 아래 내려가는 문자들을 float로 올려주자
article {
float:left;
}
글자가 적절한 길이이면 자동으로 올라간다.
실습 5. article 영역에 적절한 여백 주기.
너무 붙어있어서 보기가 안좋다.
padding 사용
article {
float:left;
padding:20px;
}
- tip : Ctrl + Space ==> 추천기능
실습 6. 앞의 숫자가 마음에 들지 않는다.
소속된 곳에서 list-style:none 삽입
nav ol {
list-style: none;
}
'웹 프로그래밍' 카테고리의 다른 글
| PHP & JavaScript (0) | 2017.12.18 |
|---|---|
| CSS 실습2 (0) | 2017.12.17 |
| CSS 이론 - float (0) | 2017.12.17 |
| CSS 이론 - 박스모델 (0) | 2017.12.17 |
| CSS 이론2 (0) | 2017.12.16 |