개발나라 스용공주

[생활코딩] CSS 왕기초 15장 - Visual Studio Code / 예제 실습 (1) 본문

WEB/HTML & CSS

[생활코딩] CSS 왕기초 15장 - Visual Studio Code / 예제 실습 (1)

스용공주 2024. 6. 26. 23:46
728x90
728x90

아래 사진과 같은 형태의 웹페이지를 만들어 볼 것이다.

제목과 목차는 고정인 상태이고 목차를 선택하면 그 목차에 해당하는 본문 내용이 뜨는 것이다.

그리고 제목 밑과 목차와 본문 내용 사이 두 곳에는 실선을 그어 공간을 구분시켜줄 것이다.

 

 

 

[ 제목 밑에 실선 긋기 ]

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <style>
        h1 {
            text-align : center;
            border-bottom : grey solid 2px;
            margin : 0;
            padding : 15px;
        }
    </style>
</head>
<body>
    <h1>Youtuber</h1>
</body>
</html>

 

아래 사진은 위의 코드와 다르게 margin : 0;과 padding : 15px;을 안해주었을 때이다.

콘텐츠인 Youtuber 글씨 밑에 바로 실선이 생기고 그 콘텐츠를 둘러싼 border 부분의 상하로 margin 값이 있는 것을 아래 사진의 주황색 부분으로 확인할 수 있다.

따라서 margin을 0으로 한 뒤 콘텐츠와 border 사이에 간격을 위해 padding 값을 넣어준다.

 

 

그럼 이제 아래 사진과 같이 padding을 이용해 콘텐츠와 실선 사이의 거리를 떼주고 불필요한 margin이 삭제된 것을 확인할 수 있다.

연두색 : padding / 파란색 : contents
결과물

 

 

 

 

[ 목차 옆에 실선 긋기 ]

현재 아래 사진과 같은 형태이다.

제목, 목차, 본문이 위에서부터 아래로 순서대로 정렬되어져 있다.

목차와 본문을 옆에 두기 전 목차 옆에 실선을 위에 제목 아래에 실선을 긋는 것과 동일한 방법으로 해보겠다.

 

아래 코드와 같이 <ol> 태그로 묶여있는 목차에 회색 선을 긋는 코드를 작성하니 아래 사진과 같은 결과물이 나왔다.

<style>
        ol {
            border-right : grey solid 2px;
        }
</style>
<body>
    <ol>
        <li><a href="index.html">Youtube</a></li>
        <li><a href="2.html">Contents</a></li>
    </ol>
</body>

그 이유는 아래 사진과 같이 ol 태그 또한 제목과 같이 콘텐츠 사이즈를 사용하는 것이 아닌 화면 크기 전체를 사용하고 있기 때문이다.

 

따라서 아래 코드와 같이 width로 <ol> 태그의 너비 값을 지정해준다.

ol {
            border-right : grey solid 2px;
            width : 100px;
            margin : 0;
        }

 

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

HTML 유용한 사이트  (0) 2024.06.27
[생활코딩] CSS 왕기초 16장 - Visual Studio Code / 예제 실습 (2) - 그리드(Grid) 사용하기  (0) 2024.06.27
[생활코딩] CSS 왕기초 14장 - Visual Studio Code / CSS 일부 요약 (박스 모델)  (0) 2024.06.25
[생활코딩] CSS 왕기초 13장 - Visual Studio Code / 검사하기 (F12)  (0) 2024.06.25
[생활코딩] CSS 왕기초 12장 - Visual Studio Code / 박스 모델  (0) 2024.06.25
'WEB/HTML & CSS' Related Articles more
Comments