* 본 포스팅은 스타일 시트의 기본을 위한 CSS 정보글입니다.
2. 스타일 시트의 기본을 위한 CSS 정보글
문서 내용을 자유롭게 표현 "간단한 웹문서 제작을 위한 HTML의 기본" 글을 통해서 HTML을 통해서 문단을 구성하고, 글씨체를 바꾸고, 이미지를 첨부하거나 여백을 설정하는 등 간단한 웹문서를
hooks.tistory.com
HTML에서 배운 여러 가지 코드들, 예를 들어 <p>, <h>, <body>, <header> 등등 여러 가지 모든 코드들은 하나의 요소로 작용하여, 웹문서에 적용됩니다. 이러한 요소들을 웹페이지의 문서에 여백을 설정하는 방식으로 레이아웃을 설계할 수 있습니다. 이를 한번 배워보도록 합시다.
1. 여백 설정 코드, margin
요소들의 여백을 설정하는 코드는 margin입니다. 예를 들어 다음과 같이 홈페이지를 만들고 싶다고 합시다.
이렇게 디자인이 있으면 크게 홈페이지 제목 부분과 메뉴 부분, 그리고 바디의 속성에 맞는 웹 코드를 선언해야 합니다. 예시 코드로 다음과 같이 웹문서를 만들어봅시다.
스타일 코드:
header {
background: rgba(255,0,0,. 2);
width: 1800px;
height: 100px;
border : 2px solid;
padding: 20px;
}
p1 {
background: rgba(0,255,0,. 2);
width: 200px;
height: 100px;
border : 5px outset;
padding: 10px;
}
p2{
background: rgba(0,255,0,. 2);
width: 200px;
height: 100px;
border : 5px outset;
padding: 10px;
}
p3{
background: rgba(0,255,0,. 2);
width: 200px;
height: 100px;
border : 5px outset;
padding: 10px;
}
p4{
background: rgba(0,255,0,. 2);
width: 200px;
height: 100px;
border : 5px outset;
padding: 10px;
}
body{
background: rgba(0,0,255,. 1);
border : 10px;
padding: 10px;
}
html 코드:
<header><center><h1> Happy Happy Happy DAY </h1><center> </header>
<p1> HOME </p1>
<p2> INTRO </p2>
<p3> THEME1 </p3>
<p4> THEME2 </p4>
<body>
Today, I met my friends. So, I am happy~ </body>
웹문서 자체가 body로 구분되어 잇는 것 같습니다.
그래서 그런지 body 요소의 css코드에 padding코드가 먹히네요.
그러면 이번에는 body 요소의 padding 코드를 없애고, margin 코드 20px 씩 적용하여 각 요소들을 구분하겠습니다. 위의 css 코드에서 body를 제외한 모든 요소에 margin : 20px; 를 추가하였습니다.
padding 이 내부의 여백을 조절했다면, margin은 외부의 여백을 조정합니다. 여백을 상하좌우 따로 조절하고 싶다면 각각 margin-top, bottom, left, right을 이용하여 따로 조정하는 것이 가능합니다.
예시 코드를 자세히보시면, 바디에 구성한 내용은 메뉴 바로 옆에 붙어서 입력된 것을 볼 수 있습니다. 이렇게 통상적으로 위에서 아래로 그리고 왼쪽에서 아래로 차곡차곡 쌓여가는 요소들의 흐름을 flow라고 합니다.
2. 요소들간의 흐름(flow) 정하기 , floating
A. 요소 정렬하기, float
요소들 간의 흐름을 정하기 위해서, float 코드를 사용합니다. 이 float 코드는 요소들의 위치를 왼쪽에서 오른쪽 등으로 지정해줄 수 있습니다. 다시 말해서, float 코드는 요소들의 흐름을 정렬하는 것으로 한글이나 워드 같은 응용프로그램에서 "왼쪽/오른쪽으로 정렬" 하는 기능과 동일합니다. 위의 예시 코드로 예를 들어서, p2 상자는 왼쪽으로 p4 상자를 오른쪽으로 정렬해 봅시다.
* p1,2와 p3,4 스타일 코드에 float : left; 와 float : right; 코드를 각각 추가하고 width와 height를 적절히 조절
B. 다중 흐름(flow) 제어하기, class="float"
하나의 요소로 다중의 흐름을 제어하고 싶을때는 class 속성을 부여하면 됩니다. 예를 들어 p 하나만으로 총 6개의 일련의 박스를 다음과 같은 예시 코드로 구현했다고 합시다.
스타일 코드:
p{
background: rgba(0,0,255,. 2);
width: 100px;
height: 100px;
border : 5px solid;
padding: 10px;
margin : 20px;
}
html 코드:
<p> HOME </p>
<p> INTRO </p>
<p> THEME1 </p>
<p> THEME2 </p>
<p> THEME1 </p>
<p> THEME2 </p>
class = "float" 속성을 다음과 같은 예시 코드로 적용하면 같은 요소임에도 따로 흐름을 지정하는 것이 가능합니다.
스타일 코드:
p {
background: rgba(0,0,255,. 2);
width: 100px;
height: 100px;
border : 5px solid;
padding: 10px;
margin : 20px;
}
p.float {
float: right;
widht 200px;
background: green}
html 코드:
<p> HOME </p>
<p > INTRO </p>
<p class = "float"> THEME1 </p>
<p class = "float"> THEME2 </p>
<p class = "float"> THEME1 </p>
<p class = "float"> THEME2 </p>
글의 정렬, float 코드는 웹페이지를 좀 더 정밀하게 꾸미는 것을 가능하게 해 주지만, 레이아웃을 디자인과는 거리가 먼 것 같습니다. 그 이유는 홈페이지 창의 크기에 따라 요소들의 위치가 변하기 때문이죠...
C. flow 위치 고정시키기, position: absolute;
요소들의 위치를 고정시키는 방법으로는 스타일 코드의 요소 속성에 position : absolute; 코드를 추가하는 것입니다. 해당 코드를 입력하고 추가로 top: 크기px; left(or right) : 크기px; 코드로 해당 흐름의 위치를 제어하는 것이 가능합니다.
'COMPUTER SCIENCE > A piece of INFO.' 카테고리의 다른 글
| 저항기의 종류와 특징을 알아보자! (0) | 2021.12.19 |
|---|---|
| 티스토리 방문자 수 늘리는 매타태그 등록 방법 (0) | 2021.11.09 |
| CSS _ 문단 구분을 위한 박스 만들기 (0) | 2021.07.14 |
| CSS _ 배경색과 이미지로 배경 꾸미기 (0) | 2021.07.10 |
| CSS RGB _ 색의 표현 (0) | 2021.06.17 |
