CSS 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.
그리고 CSS 실습을 하면서 사용한 예제는 밑의 링크에서 만들어 놓은 HTML 파일을 바탕으로 사용했다.
HTML 예제의 제목에 태그가 들어가서 위와 같이 링크를 걸 수밖에 없었다.
HTML ( CSS에 대한 페이지 ) 디자인
<h1> 태그의 아래쪽 테두리 만들기
... 생략 ...
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
}
... 생략 ...
위의 출력 화면을 보게 되면 위쪽 공간은 넓고, 아래쪽 공간은 좁다. 이를 해결하기 위해 개발자 도구를 연다.
개발자 도구를 통해 보게되면 바깥쪽의 황토색 부분 때문에 WEB이라는 글자의 위치가 애매한 것을 알 수 있다. 이를 해결하기 위해서는 margin 값을 조정하면 된다.
... 생략 ...
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
}
... 생략 ...
위와 같이 margin 값을 0px로 주니 텍스트가 너무 달라붙는다. 이제는 padding 값으로 위치를 조정하면 된다.
... 생략 ...
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
... 생략 ...
margin값과 padding 값을 적당하게 주니 WEB 글자의 위치가 이쁘게 바뀐 것을 확인할 수 있다.
<ol> 태그의 오른쪽에 테두리 만들기
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
ol {
border-right: 1px solid gray;
}
<ol> 태그 오른쪽에 테두리가 생기게 CSS 코드를 넣었는데 아무런 선도 보이지 않는다. 위의 출력 화면 맨 오른쪽을 보면 오른쪽 끝에 테두리가 생긴 것을 확인할 수 있다. 이는 <ol> 태그가 화면 전체를 사용하는 블록 레벨 엘리먼트이기 때문이다. 내가 원하는 대로 목차 옆에 테두리가 생기게 만들고 싶으면 <ol> 태그에 width 값을 주면 된다.
... 생략 ...
ol {
border-right: 1px solid gray;
width: 100px;
}
... 생략 ...
width 값을 100px 정도 주게 되면 위의 화면처럼 출력이 된다. 하지만 이제는 <h1>의 테두리와 <ol> 태그 오른쪽의 테두리와 여백 때문에 신경이 쓰인다.
이는 위의 화면처럼 <ol> 태그에 margin 값이 있기 때문이다.
... 생략 ...
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
}
... 생략 ...
다음과 같이 <ol> 태그의 margin 값을 없애게 되면 이번에는 목차 리스트와 위의 테두리가 너무 달라붙어있다.
... 생략 ...
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
}
... 생략 ...
<ol> 태그에 padding 값을 주면 <ol> 태그의 테두리위의 테두리와 붙어있고 목차 리스트는 알맞게 떨어진 모습을 확인할 수 있다.
<body> 태그에 margin 값 없애기
위의 출력 화면에서 WEB 밑의 테두리가 양 사이드에서 조금씩 떨어져있다. 이는 <body> 태그의 margin 값 때문이다. 깔끔하게 보이기 위해서 <body> 태그의 margin 값을 없애겠다.
... 생략 ...
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
}
body {
margin: 0px;
}
... 생략 ...위와 같이 <body> 태그의 margin 값을 없애면 WEB 밑의 테두리가 양 사이드에 딱 달라붙어 있는 모습을 확인할 수 있다.
