첫 번째 가의 주제는 가운데 정렬이다.
웹사이트(website)를 만들기 위해서 가장 먼저 해야 하는 것은 레이아웃(layout)이고 레이아웃 기법들 중 가장 보편적인 게 가운데 정렬이라고 한다. 예제 코드를 깃허브에다 올려놓긴 할 건데 이 글에도 남겨 놓겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
가운데 정렬
</title>
<link href="./style.css" rel="stylesheet"/>
</head>
<body>
<div class="box">
<img src="./cat.jpg" alt="cat" class="box-cover"/>
<h1>CAT</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis eaque animi distinctio ipsa modi adipisci molestias laborum velit optio, delectus, eveniet, harum libero minima mollitia commodi dolore dignissimos. Cumque, optio.L</p>
</div>
</body>
</html>예제로 쓰일 HTML 코드이다.
css를 적용할 때 순차적으로 적용하는 게 중요한데 전체적인 것부터 시작을 하는데 body부터 style을 추가한다. css를 추가하면서 블록 요소(block element)에 대한 내용을 간단히 설명해준다.
body {
background-color: #ddd;
}
.box {
background-color: white;
width: 960px;
}
블록 요소를 가운데 정렬하기 위해 마진(margin) 프로퍼티를 설명하지만 깊게 설명하지 않고 margin-left, margin-right 프로퍼티(property)에 대한 설명 한다. (마진 프로퍼티 참조)
위에 있는 두 개의 이미지처럼 마진 프로퍼티에 따라 바뀌는데 주황색 영역이 div.box가 갖는 margin 영역이다.
그럼 margin-left와 margin-right 프로퍼티의 값이 auto이면 어떻게 될까?
body {
background-color: #ddd;
}
.box {
background-color: white;
margin-left: auto;
margin-right: auto;
width: 960px;
}
위 이미지처럼 div.box 블록 요소의 margin영역을 left와 right가 균등하게 반반씩 나눠 갖기 때문에 div.box는 가운데 정렬된다.
앞서 css를 적용할 땐 순차적으로 진행하는 것이 좋기 때문에 body -> div.box를 했으니 이제 div.box 안에 있는 이미지와 텍스트 요소들이 가운데 정렬되도록 css를 적용할 순서이다. 이미지와 텍스트 요소들은 블록 요소가 아닌 인라인 요소라 하는데 영상에선 자세히 설명하진 않는다.
인라인 요소들을 가운데 정렬하도록 css를 추가하면서 살짝 이해하기 어려운 상속에 대해 나온다. 인라인 요소를 가운데 정렬하기 위해선 text-align이라는 프로퍼티를 사용해야 하는데 해당 프로퍼티는 상속이 된다. 예를 들어 div.box에 text-align 프로퍼티를 명시하면 div.box의 자식으로 있는 인라인 요소 정렬 기준의 기본값이 된다.
body {
background-color: #ddd;
}
.box {
background-color: white;
margin-left: auto;
margin-right: auto;
width: 960px;
text-align: center;
}
텍스트 얼라인(text-align)의 상속된 내용이 궁금하다면 개발자 도구(크롬 기준 f12 누르면 나옴)에서 확인할 수도 있다.
여기서부턴 동영상 강의보단 본인이 이해한 내용으로 설명하겠다. (맞는지 확인하실 분은 강의를 꼭 참고하세요.)
중요한 내용은 div.box의 자식 요소 중 인라인 요소는 img 요소뿐이고 h1과 p 태그 블록 요소인데 가운데 정렬됐다는 것이다. text-align은 블록 요소를 가운데 정렬할 순 없지만 h1과 p 태그의 자식 요소인 text element는 인라인 요소이기 때문에 text-align property의 영향을 받는다.
이후 내용은 디자인적인 내용과 위에 설명한 h1 블록 요소의 자식 요소인 text element가 왜 가운데 정렬이 됐는지 설명하는 내용이다.
body {
background-color: #ddd;
}
.box {
background-color: white;
margin: 50px auto;
width: 960px;
text-align: center;
/* 이 밑으론 디자인 적인 내용 (설명 없음) */
border-radius: 20px;
border-right: 5px solid #ccc;
border-bottom: 5px solid #999;
}
.box h1 {
color: orangered;
border-bottom: 10px solid orangered;
width: 250px;
margin: 40px auto;
font-size: 4rem;
}
.box p {
padding: 3rem;
}
리뷰
개인적으로 아쉬운 점은 주제에 너무 딱 맞게 설명을 해주셔서 놓치는 부분이나 혹은 설명을 이해하기 위한 기본지식이 부족하면 의문점 투성이가 될 것 같다는 생각이 들었다. 예를 들어 기본 지식이 부족하더라도 개발자 도구에서 지원하는 기능을 이용해서 시각적으로 조금 더 쉽게 이해할 수 있도록 할 수 있는데 동영상에선 이런 내용은 없다. 또한 강의를 보면서 설명이 미비하다 느꼈는데 블록 요소, 인라인 요소와 마진(margin), 텍스트 얼라인(text-align), 패딩(padding)과 같은 css property를 사용하지만 자세한 설명이 없어서다. 하지만 무료 동영상 강의라 생각하면 강의 내용의 질은 높다 생각이 들었다. 그래서 결론은 강의의 주제를 이해하기 위한 노력이 더 필요하며 css property도 별도로 공부해야 할 것 같다... ㅠㅠ
빔캠프 화이팅!!!
'web publishing > CSS' 카테고리의 다른 글
| 코딩가나다 | CSS - 나 (0) | 2022.10.03 |
|---|---|
| css 공부를 시작하는 이유 (0) | 2022.09.25 |
