veamcamp HTML+CSS 재미있게 입문하기 2주차

오늘 배운 내용은 선택자(selector)에 대한 내용. 그리고 하나의 페이지를 구성하는데 있어서의 접근법. 다른 UI framework를 다루더라도 유사하게 적용되는 개념이다.

디자인은 단순히 예쁜 화면을 의미하는 것이 아니라 의사 결정, 사고 방식을 포함하는 개념임을 잊지 말자.

레이아웃을 만드는데 앞서 우선 html을 구성하는 각 태그가 block element인지 inline element인지 알아야 한다. div, ul, li, h1~h6과 같은 태그는 block element에 속한다. 그리고 a, span, img 등의 태그는 inline element에 속한다. Block element는 box-model을 따르며 inline element는 그렇지 않으므로 둘을 올바르게 구분할 수 있어야 원하는 결과물을 얻을 수 있다.

img 가운데 정렬 (* inline element 가운데 정렬)

img 태그로 작성된 내용이 text-align: center;에 의해 가운데 정렬이 된다는 점에선 다소 불만스러운 부분이 있지만 어쨌든 inline element에 대한 가운데 정렬엔 text-align 스타일 속성이 쓰인다고 한다. 모든 태그 요소에 대해 하나의 방법으로 horizontal align과 vertical align 속성을 지정할 수 있다면 누구에게나 좋은 상황일텐데 표준화란게 참 어렵긴 어려운가 보다.

css 별도 파일로 구분하기

역할이 다른 내용은 서로 다른 파일로 관리하는 것이 바람직하다. 특히 인라인 스타일은 지양해야 한다. css 파일은 별도 파일로 분리하는 것이 관리 측면에서 좋다.
<link rel="stylesheet" href="style.css">

레이아웃

화면을 구성할 때엔 레이아웃을 먼저 생각해야 한다. 당연한 얘기지만 큰 단위에서 작은 단위로, 작은 단위에서 더 작은 단위로 구체화 시켜 나가야 한다. 개별 요소에 대한 style은 가장 나중의 일이다.

화면 요소의 단위를 나누는 데에도 일종의 룰, 컨벤션이 있다. header - contents - footer의 3분할 구성이 일반적으로, 가장 외곽의 div는 wrapper라든가 container라든가 하는 이름을 붙인다
<div class="wrapper">
  <div class="header"></div>
  <div class="contents"></div>
  <div class="footer"></div>
</div>

Reset css

h1, li 등의 태그엔 bold체로 지정된다든가 bullet이 붙는다든가 하는 등의 기본적으로 할당되는 스타일이 있다. 거슬린다면 스타일을 제거하고 원하는 형식으로 새롭게 지정해줄 수 있다. 크롬의 검사 기능이 유용하게 쓰이는데 크롬의 검사 기능을 이용하면 각 요소가 잡히는 사이즈를 확인할 수 있을 뿐만 아니라 기본으로 지정된 스타일이 무엇인지에 대해 알 수 있다. 

기본 스타일을 무효화 해보자.
h2, ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

선택자

자세한 내용은 w3schools.com reference를 참고하자. (https://www.w3schools.com/cssref/css_selectors.asp)

선택자, selector는 특정 요소에 스타일을 지정하거나 동작을 부여할 때 활용되는 개념이다. 상위-하위의 관계를 표현해 특정 요소를 한정할 수 있으며 별도로 부여한 class나 id 값을 기준으로 특정 요소를 지정할 수 있다. (class는 '.'으로, id는 '#'으로 참조한다.) 그리고 :hover 등의 가상 선택자를 통해 특정 액션에 대한 스타일을 지정해줄 수도 있다.
.section li:hover {
  border-left: 5px solid dodgerblue;
  color: dodgerblue;
}

.info {
  background-image: url(images/icon-info.png);
  background-repeat: no-repeat;
  background-position: right center;
}

끝.