코드라이언 일단 만드는 HTML/CSS 6강에 나오는 내용 및 추가 공부한 내용이다. div 박스 자체를 문서의 중앙에 배치하는 방법을 알아보고 div, article, section, span의 공통점과 사용상 차이점에 대해 알아보자.
div 태그
div는 division의 앞 세 글자이다. 여러 요소를 한 번에 꾸밀 때 편의를 위해 div 태그를 사용하여 요소를 묶는다. 아래 코드 블록에서 div를 보면 div class에 mainbox라는 이름을 지정하고 <h1> 요소와 <p> 요소를 div로 묶은 것이 보인다. 이제 CSS로 mainbox를 어떻게 꾸밀 것인지 써 주면 div로 묶은 모든 요소들에 해당 CSS코드가 적용된다.
- HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
<link rel="stylesheet" href="codeline.css">
</head>
<body>
<div class="mainbox">
<h1>김멋사</h1>
<p>HTML/CSS 개발자</p>
</div>
<footer>copyright</footer>
</body>
</html>- CSS 코드
footer {
text-align: center;
background-color: #1E1E1E;
color: #919191;
}
.mainbox {
border: 1px solid #ebebeb;
width: 610px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
border: 두께(너비) 방식(스타일) 색상 순서로 쓴다. 주변에서 코드가 작동이 안 된다고 해서 보면 사이사이에 쉼표를 써 놓은 경우가 많았다. 쉼표가 없이 띄어쓰기로 구분한다는 것을 꼭 명심하자. border를 꾸밀 수 있는 방법은 정말 다양하다. solid는 실선, dotted는 점선, dashed는 작대기 구글에서 'html CSS border'이라고 검색하면 여러 가지 스타일을 볼 수 있다. 색상 이름은 white, black, red, blue처럼 색상명을 적어도 되고 헥스(HEX), RGB, HSL을 사용할 수도 있다. 이 중 쉽고 자주 사용되는 것이 헥스코드인 것 같다. 헥스는 알파벳의 조합 또는 숫자와 알파벳의 조합으로 이루어진다. 총 여섯 자리인데 RGB의 농도를 각각 두 자리씩 나누어 표현하는 것이다. 00/00/00 가끔 지금 내가 모니터에서 보고 싶은 색의 헥사 코드를 알고 싶을 때가 있는데 그럴 때 내가 사용하는 크롬 확장프로그램이 있다. 구글에서 ColorPick Eyedropper라고 검색하면 첫 번째 검색결과에 뜨니까 관심 있으시다면 검색해 보시고 다운로드하시길.
div를 중앙에 배치하는 두 가지 방법
division을 가운데 정렬하는 코드 두 가지를 알아보자.
- margin-left: auto;
margin-right: auto; - margin:0 auto;
내 기억으로 강의에는 1번 코드가 나왔고 2번 코드는 다른 곳에서 본 것 같다. 주의할 점은 코드 순서이다. 만약에 margin: 0 auto; 코드를 작성하고 나서 margin: 30px;하면 기존 가운데 정렬이 아닌 상하좌우 30px이 먹힌다. 반대 경우도 마찬가지이다. margin: 30px; 하고 margin: 0 auto; 하면 뒤의 것이 적용된다. 미디어 쿼리도 그렇고 겹치는 부분은 나중에 오는 값이 덮어쓴다.
div와 span의 차이점은?
둘 다 영역 지정 태그이지만 차이점이 있다. div는 텍스트를 입력해서 표현할 때 텍스트를 사각형 박스 안에 넣어서 표현하고 span은 텍스트가 문장 단위로 끊긴다. 즉, div로 감싼 텍스트에 배경색을 지정하면 전체 상자에 배경색이 붙지만 span으로 감싼 텍스트에 배경색을 지정하면 줄 바꿈이 되는 각 줄마다 오른쪽에 비는 공간이 생기는데 그 비는 공간에는 당연히 배경색이 보이지 않는다. 글자 하나하나에 배경색이 붙는다. 다른 하나도 알아보자. div를 여러 개 생성하면 div 하나당 한 줄에 자리한다. 즉, <br> 태그 없이도 줄 바꿈이 된다. span을 여러 개 생성하면 자동 줄 바꿈이 되는 것이 아니라 왼쪽에서 오른쪽 순으로 줄 바꿈 없이 옆에 생성된다.
article, section, div 등
내가 혹은 남이 코드를 보고 각 영역의 역할과 의미를 쉽게 파악할 수 있도록 적절한 태그를 사용하는 것이 좋다. 게시판 영역이라면 article 태그, 논리적인 구분이 필요한 경우 section 태그, 단순히 블록요소가 필요한 경우 div 태그를 쓰면 된다.
'프로그래밍' 카테고리의 다른 글
| [코드라이언] HTML/CSS 박스 쪼개기 padding, border, margin (0) | 2023.03.25 |
|---|---|
| [코드라이언] HTML/CSS로 이력서 만들기 (1) (0) | 2023.03.13 |
댓글