안녕하세요 인포돈입니다.
저번 시간에 이어서 css에 대해서 알아보겠습니다.
이전 시간에 css속성과 id, class에 대해서 알아보았습니다.
이번에는 본격적으로 꾸미기 위한 css 코드들을 알려드리겠습니다.
1. border
해당 아래 코드에는 border라는 속성이 사용되었습니다.
해당 코드는 무엇을 의미할지 고민해 보세요
<style>
h1{ border-width:5px;
border-color:red;
border-style:solid;
}
a{ border-width:5px;
border-color:red;
border-style:solid;
}
</style>본 코드의 결과는 아래와 같습니다.
보시면 css의 경우 큰 박스가 생성되고 "css is good code"라는 텍스트는 작은 박스가 생성되는 것을 알 수 있습니다.
이러한 이유는 바로 box model 때문입니다. h1태그의 경우 화면 전체를 사용하는 block 형태이고 a 태그의 경우는 자기 자신 주위만 사용하는 inline형태이기 때문입니다.
* 여기서 프로그래머들은 항상 중복을 제거해야 합니다. 그래야 코드의 용량이 줄고 더욱 효율적으로 작동하기 때문이죠
따라서 해당 코드를 아래와 같이 줄일 수 있습니다.
<style>
h1, a{
border:5px solid red;
}정말 간단해졌죠?? 같은 코드의 선택자들은 , 로 구분을 하여 같이 사용할 수 있고, 같은 이름의 속성은 하나로 묶어 띄어쓰기로 구분을 하여 중복을 제거할 수 있습니다.
2. 속성 종류
이번에 알아볼 속성은 굉장히 많습니다. 그러나 두려워할 필요가 없습니다. 이전에 배웠던 검색 방법이 있으니까요.
<head>
<style>
h1{
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
}
</style>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<a href="링크 주소"> css is good code </a>
</body>모르는 코드가 많이 있습니다. 하나씩 파 해쳐보도록 하겠습니다.
font-size 이름에서부터 알 수 있듯이 폰트의 크기를 설정하는 것입니다. px은 컴퓨터상에서 텍스트의 크기를 설정할 때 사용하는 단위입니다! 직접 숫자를 넣어보면서 웹을 새 로고 침하여 알맞은 크기를 찾아보시면 됩니다.
text-align 해당 코드는 바로 정렬해주는 코드입니다. align이 정렬이라는 의미를 가지고 있죠. center로 값을 넣어줬으니 가운데 정렬이라는 의미입니다.
border은 배웠는데 뒤에 -bottom 이게 붙어있죠 그러면 큰 내 모칸 중에 아래쪽에만 선을 그려주는 역할을 합니다.
(left면 왼쪽에 줄이 생기겠죠)
이렇게 보면 저 css제목과 아래 줄의 간격이 너무 가까워 보이지 않으신가요?? 이제 이러한 문제점을 쉽게 해결할 수 있는 기본적인 툴을 알려드리겠습니다!
바로 해당 웹 브라우저에서 ctrl + shift + i를 눌러보시면 됩니다 (크롬 기준) 만약에 다른 브라우저라면 해당 페이지에 오른쪽 마우스를 클릭해 검사를 누르시면 됩니다.
해당 빨간색 번호를 따라서 해보시면 아래와 같은 그림이 보일 겁니다.
저희가 지정했던 border-bottom : 1px 이 border의 아랫부분에 1 표시가 있는 게 보이죠? 바로 저희가 지정했던 정보들을 그림으로 표현하여 보기 편하게 합니다. 또한 해당 부분을 클릭하면 어느 부위의 값이 어느 정도인지 바로 확인이 가능합니다. 그렇다면 저희가 그은 선이 border이면 해당 글자와의 사이 간격은 바로 padding값을 주면 늘릴 수 있습니다.
바로 padding값을 추가해주면 아래와 같이 변합니다.
padding-bottom:15px;h1선택자 안에 속성 padding 값을 넣어주면 보기 좋게 줄과 텍스트 사이의 거리가 벌려진 것을 알 수 있습니다.
이처럼 그때그때 결과를 분석하여 바로 값을 변경하면서 완성도 높은 웹페이지를 바로바로 만들 수 있는 것이죠.
오늘은 기본 웹 브라우저에서 제공하는 검사 툴과 border, padding, text-align, font-size 등 많은 종류의 속성을 알아보았습니다. 해당 border속성에 -을 추가하여 또 다른 속성을 정의할 수 있다는 점도 알았죠. 그렇다면 이제 저희가 필요한 것들을 보다 쉽게 바라볼 수 있는 시각을 얻을 수가 있죠.
또한 웹 브라우저에서 제공하는 툴 기능을 잘 이용하면 보다 쉽게 홈페이지를 제작할 수 있다는 생각이 드네요.
그렇다면 다음 시간의 것을 미리 생각해 볼 수 있는데요. 위아래로는 선으로 나누었는데 카테고리 생성과 같이 왼쪽과 오른쪽을 나눌 수는 없을까?라는 의문이 듭니다.
다음 포스팅까지 이해 결점에 대해서 같이 고민해봅시다.
'토이 프로젝트 > HTML로만드는 홈페이지' 카테고리의 다른 글
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 7(홈페이지제작) (0) | 2021.03.08 |
|---|---|
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 6(CSS) (0) | 2021.03.05 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS) (0) | 2021.03.03 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 3(태그, 속성) (0) | 2021.03.02 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(개발환경구축,atom) (0) | 2021.03.02 |
