CSS 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.
그리고 CSS 실습을 하면서 사용한 예제는 밑의 링크에서 만들어 놓은 HTML 파일을 바탕으로 사용했다.
HTML 예제의 제목에 태그가 들어가서 위와 같이 링크를 걸 수밖에 없었다. 그리고 이전에 CSS를 적용시키는 실습 예제 같은 경우에는 밑의 링크의 글에 게시되어있다.
2020/01/16 - [CSS] 기본 속성 및 HTML 예제 파일 CSS 적용(실습)_(2) - 짱우의 코딩일기 - 티스토리
[CSS] 기본 속성 및 HTML 예제 파일 CSS 적용(실습)_(2) - 짱우의 코딩일기 - 티스토리
CSS 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다. 그리고 CSS 실습을 하면서 사용한 예제는 밑의 링크에서 만들어..
zzangwoo.tistory.com
그리드
위의 출력 화면을 보면 목차와 본문이 나란히 위치하는 것이 더 이쁠거 같단 생각이 든다. 'CSS란 무엇인가?'의 본문을 위로 올리기 위한 방법이 '그리드(Grid)'다.
그리드(Grid) 연습
그리드를 연습하기 위해 'grid.html' 파일을 하나 새로 만들었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grid 연습</title>
</head>
<body>
<div>
GRID
</div>
<div>
연습합시다
</div>
</body>
</html>
- 각 단어에 테두리를 주고 나란히 배치를 하기 위해서는 'GRID'와 '연습합시다'를 각각 태그로 묶어야 한다. 위와 같이 나타내고 싶으면 블록 레벨 엘리먼트의 태그로 묶어 줘야 하는데 <h1> 태그 같은 경우에는 위의 상황과 맞지 않다. 위의 화면에 뿌려진 글자들은 아무 의미 없이 나란히 배열되기를 원하기 때문이다. 이때 사용하는 태그가 <div> 태그다.
- div는 division의 약자다.
- 위의 화면대로 <div> 태그는 블록 레벨 엘리먼트이기 때문에 화면 전체를 쓰기때문에 줄 바꿈이 된다. <div> 태그와 똑같은 목적으로 고안된 <span> 태그가 있는데 <span> 태그 같은 경우에는 인라인 엘리먼트다. 따라서 목적에 따라 <div> 태그와 <span> 태그를 쓰면 된다.
부피감을 확인하기 위해 <div> 태그에 테두리 지정
... 생략 ...
<style>
div {
border: 3px solid gray;
}
</style>
... 생략 ...
두 개의 <div> 태그를 감싸는 부모 태그 추가
... 생략 ...
<style>
#grid {
border: 5px solid pink;
}
div {
border: 5px solid gray;
}
</style>
... 생략 ...
<div id="grid">
<div>
GRID
</div>
<div>
연습합시다
</div>
</div>
... 생략 ...
- 'GRID'와 '연습합시다' 글자를 양옆 나란히 배치하기 위해서는 두 개의 <div> 태그를 하나의 부모 태그로 묶어줘야 한다.
- 부모 태그의 id는 'grid'로 설정했고 확인하기 쉽게 부모 태그의 테두리를 핑크색으로 설정했다.
두 개의 태그를 나란히 배치하기
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
- 두 개의 태그를 나란히 배치하기 위해서 위와 같이 부모 태그에 display 속성과 grid-template-colums 속성을 추가했다.
- display 속성은 grid로 설정했고 grid-template-colums 속성은 첫 번째 컬럼은 150px 정도의 부피를 갖고, 두 번째 컬럼은 나머지 공간을 다 쓴다는 의미로 1fr로 설정했다.
그리드 써먹기
다시 본래 예제에 써먹기 위해 2.html 파일로 돌아가본다. 이때 나란히 놓고 싶은 대상은 <ol> 태그와 <h2>, <p> 태그다. 보기 좋게 나란히 놓으려면 <h2> 태그와 <p> 태그를 하나로 묶는 것이다. 이 두 태그를 하나로 묶기 위해서 <div> 태그를 이용하겠다.
... 생략 ...
<div>
<h2>CSS란 무엇인가?</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p style="margin-top: 40px;"> CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.</p>
</div>
... 생략 ...그리고 목차와 본문내용을 나란히 하기 위해 다시 <ol> 태그와 <h2>, <p> 태그를 묶은 <div> 태그를 부모 태그로 묶어주겠다. ( <ol> 태그 같은 경우에는 블록 레벨 엘리먼트이기 때문에 <div> 태그로 묶어줄 필요가 없는 것 같다. )
... 생략 ...
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" class="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<h2>CSS란 무엇인가?</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p style="margin-top: 40px;"> CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.</p>
</div>
</div>
... 생략 ...위와 같이 태그들을 하나로 묶었고 제일 바깥에 묶은 <div> 태그의 아이디는 'grid'로 설정하였다.
... 생략 ...
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
... 생략 ...
위의 출력 화면을 보면 목차가 너무 왼쪽에 치우쳐져 있는 것을 볼 수 있다.
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
padding-left: 33px;
}
<ol> 태그의 왼쪽에 padding 값을 33px정도 주니 목차가 적당하게 떨어져서 보인다. 하지만 그로인해서 본문의 내용이 밀리는 현상을 볼 수 있다. 이를 해결하기 위해서 본문을 감싼 <div> 태그에 id='article' 속성 값을 추가해주고 왼쪽 패딩 값을 25px를 준다.
... 생략 ...
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#article {
padding-left: 25px;
}
</style>
... 생략 ...
<div id="article">
<h2>CSS란 무엇인가?</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p style="margin-top: 40px;"> CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.</p>
</div>
... 생략 ...
웹페이지가 이쁘게 출력이 된다.
#grid ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding: 20px;
padding-left: 33px;
}원래 CSS코드에서는 <ol> 태그 선택자로 ol을 사용했었다. 하지만 <ol> 태그는 id 값이 'grid'인 태그 밑에 있기 때문에 id 값이 'grid'인 태그 밑에 있는 <ol> 태그라고 지정하는 것이 훨씬 더 의미가 분명해진다.
#article 같은 경우에는 #grid 안에 있기 때문에 #grid에 묶을 수 있지만 id 값으로 'article'을 썼기 때문에 굳이 묶을 필요는 없다. 하지만 의미를 분명히 하기 위해 묶는 것도 좋은 방법이다.
