whatisthis?
생활코딩 WEB2 - css 편 (2/3) 본문
2-8. 박스 모델
근본적인 태그의 사용에서 알 수 있듯이
<h1>태그는 줄바꿈이 되어 화면을 다 사용하고, <a>태그는 줄바꿈이 되지 않고 자신의 컨텐트 크기만큼만 사용한다.
<h1>My future life</h1>
I want to be a <a href="https://mywebproject.tistory.com/"> web front-end developer. </a>
Since I was 17, I have liked computer games and I want to make it myself.
Now, I want to create a website that is helpful to many people, not only games.다음과 같이 <h1>태그와 <a>태그가 있을 때 둘의 차지하는 공간에 대해 알아보자.
<style>태그로 border,즉 테두리가 어느정도 크기인지 보자.
<style>
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>border-width는 테두리 두께, border-color는 테두리 색상, border style은 테두리 스타일을 설정하는 속성이다.
h1태그와 a태그 모두 같은 효과를 주었을때, 테두리가 나타내는 부분을 살펴보면 다음과 같다.
즉, h1태그는 화면 전체를 쓰는 태그이고, a태그는 자신의 공간만큼만 쓰는 태그이다.
html태그들 중 h1태그처럼 화면 전체를 사용하는 태그를 Block Level Element 라고 한다.
a태그처럼 자신의 content만큼만 사용하는 태그는 Inline Element 라고 한다.
** Block level element인 <h1>태그를 Inline element처럼 쓸 수도 있다.
<style>
h1{
display:inline;
}
</style>-> display 속성의 속성값을 inline이라 작성해주면 된다.
+) <a>태그도 마찬가지로 display:block;으로 작성하면 블록 레벨 엘리먼트로 사용할 수 있다.
| 참고 |
| display 속성의 속성값 중에 'none' 이라는 것이 있다. display: none; 입력시 해당 선택자에 해당하는 부분은 우리 눈에 보이지 않게 된다. <h1>태그에 display:none;을 해보면 다음과 같이 사라진다.  |
**위에 적은 코드는 h1과 a태그 모두에게 같은 선언(declaration)이 적용되므로 중복된 코드라고 할 수 있다.
-> h1, a와 같이 선택자를 함께 입력하여 중복 제거.
**또한, border에 대한 속성값을 한꺼번에 모두 작성할 수 있다. (순서는 상관 X)
| original code | 선택자를 합쳐서 중복 제거 | border에 대한 속성값을 합쳐 적음 |
| <style> h1{ border-width:5px; border-color:red; border-style:solid; } a{ border-width:5px; border-color:red; border-style:solid; } </style> |
<style> h1, a{ border-width:5px; border-color:red; border-style:solid; } </style> |
h1, a{ border: 5px solid red; } |
Content와 테두리 사이에 간격이 생기도록 해주는 방법
<style>
h1{
border: 5px solid red;
padding: 20px;
}
</style>padding 속성을 추가하여, content(즉, <h1>태그의 내용)과 그 테두리 사이에 간격이 생기도록 해준다.
- padding = 충전재 쯤으로 생각하면 된다. 즉 속에 무언가를 채워 넣는것.
h1과 h1태그끼리의 간격을 없애주려면 margin 속성을 추가한다.
h1 선택자에 margin:0; 을 입력하면 된다.
 |
 |
** <h1>은 원래가 block level element이므로 display:block;을 내장한 것이나 마찬가지이다.
<style>
h1{
border: 5px solid red;
padding: 20px;
margin:20px;
display:block;
width:100px;
}
</style>
- image cr: https://ko.khanacademy.org/
Styles에서 border, padding, margin, width등에 마우스를 올려보면 해당 부분이 색으로 뜬다.
2-9. 박스모델 써먹기 강의를 듣기 전, 내가 한번 위 도면대로 웹사이트를 직접 꾸며보기로 했다.
정답이 아닐 것을 대비하여 사본 폴더 test폴더를 만들어 제작해보았다.
<style>
a {
color:black;
text-decoration: none;
}
div{
float: left;
padding: 30px;
}
#active {
color:red;
}
.saw {
color:gray;
}
h1{
font-size: 60px;
text-align: center;
border: 5px solid red;
padding: 60px;
display: block;
width: 100%;
margin: 0;
}
.list{
font-size: 20px;
border: 3px solid blue;
text-align: left;
height: 100vh;
}
.content{
border: 3px solid green;
text-align: justify;
height: 100vh;
}
</style> <body>
<h1><a href="index.html">MY WEB STUDY</a></h1>
<div class="list">
<ol>
<li><a href="1.html" class="saw">Introduce Me</a></li>
<li><a href="2.html" class="saw" id="active">What I Like</a></li>
<li><a href="3.html">My Dream</a></li>
</ol>
</div>
<div class="content">
<h2> WELCOME TO MY PAGE </h2>
<p> <i>Please click the menu</i> </p>
<P style="margin-top:40px;">* REFERENCE LECTURE *</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
</div>
</body>우선 나는 이렇게 했는데 물론 당연히 너무 비효율적이고 어거지로 우겨넣은 느낌이다.
그리고 해결 안되는 점 ---> height는 맞췄는데 width를 못맞추겠다.
암튼 이런식으로 되긴 했다.
강의를 듣고 고쳐보는걸로..
<style>
h1{
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
</style> <style>
h1{
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width: 130px;
}
</style>다음과 같이 border-bottom과 border-right로 해당 선택자 부분 아래와 오른쪽에 테두리 선을 긋는다.
이때, 크롬에서 [우클릭]-[검사]로 문제 해결을 근본적으로 해보자.
지금 위와 같이 <ol>부분을 보면 세로선 사이에 공백이 보인다.
이는 margin값이 16으로 설정이되어있기 때문임을 알 수 있다.
따라서, 코드에 margin:0;을 추가해주면
다음과 같이 잘 해결이 된다.
+) padding값도 설정해준다.
또한 이렇게 전체적으로 공백이 있는 이유는
<body>에도 margin값이 설정되어 있기 때문임을 알 수 있다.
-> body에도 margin:0;을 설정해준다.
<지금까지의 진행 사항>
1-10. 그리드(Grid) 소개
우선, 그리드가 무엇인지 살펴보기 위해 grid.html파일로 실습해보자.
<body>
<div>NAVIGATION</div>
<div>ARTICLE</div>
<br>
<span>NAVIGATION</span>
<span>ARTICLE</span>
</body>우리가 디자인'만'을 위해서 사용할 수 있는, 기능이 없는 무색무취의 태그인 <div>에 대해 알아보자.
div와 span이라는 태그를 쓸 수 있는데, div는 블럭 단위이고 span은 인라인 단위이므로 위 코드의 결과는 다음과 같다.
<body>
<div id="grid"
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>다음과 같이 두 div태그를 감싸는 부모 element인 div를 추가하고, id를 "grid"라고 설정한다.
<style>
#grid{
border:5px solid pink;
}
div{
border:5px solid gray;
}
</style>다음과 같이 style을 설정해주면 다음과 같은 결과가 나타난다.
이제 NAVIGATION 부분과 ARTICLE 부분을 나란히 두기 위해 다음과 같은 코드를 입력한다.
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
</style>
| display: grid; |
| grid-template-columns: 150px 1fr; |
display를 grid로 설정한 후에,
grid template의 columns(열)의 값을 150px, 1fr로 설정하면 다음과 같은 결과가 나온다.
여기서, fr이란 화면 전체를 쓰게 하는 단위이다.
만약, grid-template-columns값을 1fr 1fr로 주었다면,
+) 2fr 1fr로 설정한다면?
위와 같은 grid 기술은 최근에 나온 기술인데, (강의일인 2017년 기준)
이를 사용해도 되는지에 대한 것을 알려면 어떻게 해아할까?
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
위 사이트에 들어가서 빈칸에 알고싶은 기술을 입력하면 된다.
grid 라고 입력하면, CSS Grid Layout 이라 뜨면서, 사용가능 여부를 알 수 있다.
초록색 - 사용 가능
빨간색 - 지원 X (사용할 수 X)
연두색 - 일부는 지원
** 오른쪽 상단에 Global : 96.22%는 -> 전세계 96.22%가 grid기술을 사용한 것을 이용할 수 있다는 의미이다.
직접 웹사이트 만들던 것에 적용해보자.
우선, <div>태그로 이어붙일 부분을 지정해주자.
즉, 본문 부분을 <div>로 먼저 감싸주고,
ol부분을 포함한 전체 부분을 부모element인 또다른 <div>로 감싸준다.
<div id="grid">
<ol>
<li><a href="1.html" class="saw">Introduce Me</a></li>
<li><a href="2.html" class="saw" id="active">What I Like</a></li>
<li><a href="3.html">My Dream</a></li>
</ol>
<div>
<h2> WELCOME TO MY PAGE </h2>
<p> <i>Please click the menu</i> </p>
<P style="margin-top:40px;">* REFERENCE LECTURE *</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
</div>
</div>이때, 전체를 감싼 <div>는 id를 grid로 지정해준다.
그리고 style을 적용해준다.
<style>
#grid{
display:grid;
grid-template-columns: 200px 1fr;
}
</style>display를 grid로 설정하고, columns(열)을 각각 200px과 1fr(화면전체비율단위)로 설정해준다.
<최종 결과>
+) 디테일 다듬기
대충 32px정도가 좋겠다는 것을 알아본 후 코드를 수정해본다.
-> 여기서 바꾼다고 실제로 바뀌는게 아님! 그저 test해보는것만 가능함.
| ol{ border-right:1px solid gray; width: 130px; margin: 0; padding:20px; padding-left:32px; } |
ol태그 부분의 margin-left를 설정하고나니, 다음과 같이 본문 부분(<div>부분)이 약간 밀려나서
공백이 적어진 것을 알 수 있다.
<div id="article">
<h2> WELCOME TO MY PAGE </h2>
<p> <i>Please click the menu</i> </p>
<P style="margin-top:40px;">* REFERENCE LECTURE *</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
</div>본문 부분에 article이라는 id를 설정해주고,
style을 적용해준다.
| #article{ padding-left:25px; } |
** 효율적인 선택자
우리는 위에서 <ol>부분의 스타일 적용시 다음과 같이 선택자를 ol로 적용했다.
<style>
ol{
border-right:1px solid gray;
width: 130px;
margin: 0;
padding:20px;
padding-left:32px;
}
</style>
이는 효율적이지 못하다. 우리는 저 ol을 웹페이지의 네비게이션(nav, 즉 메뉴부분)으로 사용했기 때문이다.
그 이후 본문 부분에서도 <ol>태그가 나올 수 있기 때문에 우리는 저 선택자 대신 다음과 같이 사용할 수 있다.
우선, 아래 코드를 보면, 우리가 스타일을 지정해준 <ol>부분은
| <div id="grid"> <ol> <li><a href="1.html" class="saw">Introduce Me</a></li> <li><a href="2.html">What I Like</a></li> <li><a href="3.html">My Dream</a></li> </ol> |
grid라는 아이디를 가진 div에 포함되어있는 <ol>임을 알 수 있다.
따라서, 다음과 같은 선택자로 표현할 수 있다.
<style>
#grid ol{
border-right:1px solid gray;
width: 130px;
margin: 0;
padding:20px;
padding-left:32px;
}
</style>
→ # grid ol
= grid라는 아이디에 속해있는 =<ol>태그
<div id="grid">
<ol>
<li><a href="1.html" class="saw">Introduce Me</a></li>
<li><a href="2.html">What I Like</a></li>
<li><a href="3.html">My Dream</a></li>
</ol>
<div id="article">
<h2> WELCOME TO MY PAGE </h2>
<p> <i>Please click the menu</i> </p>
<P style="margin-top:40px;">* REFERENCE LECTURE *</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
</div>
</div>또한, article이라는 아이디 또한 grid아이디를 가진 <div>안에 속해있으므로,
선택자를 #grid #article이라 적어주면 조금 더 명확히 할 수 있다.
<style>
#grid #article{
padding-left:25px;
}
</style>
<총 정리>
| <추천 방법> | <내가 쓴 코드 리뷰> |
| display:grid 를 사용하여 grid-template-columns(열)을 설정해준다. 이때 화면에 꽉차게 하려면 1fr 단위를 입력. id=grid와 id=article을 지정하여 선택자에 #grid, #article이용 border-bottom, border-right 이용하여 선그음 padding-left를 이용하여 여백 조정함 |
1. 우선 div코드를 본능적으로 썼는데, 디자인만을 위한 태그인 div를 사용한 것은 잘 했다. 2. div를 두개로 나눠서 class를 부여한 것도 잘 했다. 3. height: 100vh를 찾아낸 것 = vh: 한페이지 꽉 채우도록 높이 설정. (fr과 vh단위의 차이에 대해 추후에 알아보겠다. 4. 너무 투머치하다. display:block을 해야할 때와 아닌 때는 언제인지. border을 잘 이용했어야 했다. border을 테두리로만 생각하면 X. border-right를 쓰면 오른쪽으로 선을 그을 수 있다. 또한 padding-left로 왼쪽 패딩값을 따로 설정해줄 수 있다. margin, padding, border에 대한 것은 우클릭-[검사]를 잘 활용해서 테스트해보자. 5. 선택자를 잘 이용하자. 나같은 경우엔 class로 설정했는데, 하나만 있는 부분에 대해서는 id를 사용해보자. 또한 div를 상-하위 즉, 부모태그와 자식태그를 이용하는 것을 해보자. |
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
| CSS - link href를 이용해야하는 이유 <캐싱> (0) | 2021.08.24 |
|---|---|
| 생활코딩 WEB2 - css 편 (3/3) (0) | 2021.08.23 |
| 생활코딩 WEB2 - css 편 (1/3) (0) | 2021.08.21 |
| 생활코딩 WEB1 - html 편 (+α) (0) | 2021.08.20 |
| 생활코딩 WEB1 - html 편 (3/3) (0) | 2021.08.18 |
