초보자로서 html/css를 배우다 보면, 레이아웃을 구성하는 일이 매우 복잡하게 느껴진다. 여러 글들을 찾아 보면 각자 적용한 방법이 다르고 내 웹 사이트에 응용하다보면 원하는 결과가 안 나올 가능성이 크기 때문이다 🤔

삽질 없이 웹 사이트 구성을 잘 짤 수 있도록 필요한 개념을 정리해보았다.

1. HTML element

html 문서는 태그와 그 내부 콘텐츠의 합인 요소(element)들로 구성된다. 아래 강조한 부분을 하나의 요소라고 할 수 있는데, 이 요소들을 div와 같이 다양한 태그로 묶어 배열하고 css로 꾸미면 그럴듯한 웹사이트가 완성된다.

요소 | <tag>content</tag>

1.1 div & span

html에는 여러 태그(body, h1, br 등등)가 있고 각자의 기능이 있지만, 그 중에서도 div와 span은 공기와 같은 태그라고 할 수 있다. 콘텐츠를 감싸더라도 크게 달라지는 부분이 없기 때문이다.

하지만 요 태그들에 class, id 등으로 이름을 붙이고, css 속성을 적용할 수 있게 되면서 특별해진다. 덩어리 단위로 태그들을 배치하고 꾸밀 수 있게 되는 것이다.

1.2 selector

이렇게 이름을 붙인 특정 덩어리를'선택'하여 효과를 적용할 수 있게 만드는 것이 css의 selector(선택자)이다.

css파일 혹은 style 태그 내에서 사용되며, 만약 콘텐츠에 selector가 중복으로 적용될 경우 아래 중요도에 따라 적용된다.

tag <<<<< class <<<< id <<<<<< inline css

id, class

id는 오직 하나의 요소만 가질 수 있는 값이고, class는 중복으로 설정이 가능하다. css 적용 방법은 다음과 같다.

<!--html--> 
<div id="id_name"> id 요소예요 </div>
<div class="class_name"> class 요소예요 </di>

/*css*/
#id_name { /*id 폰트에 색깔 적용하기*/
color: red;
}
.class_name { /*class 배경 색깔 적용하기*/
background-color: yellow;
}

선택자 결합

여러 selector를 결합해서도 사용할 수도 있다. 결합 시 우선 순위는 inline css가 1000점, id가 100점, class가 10점, tag가 1점이라고 생각해서 값을 더하면 쉽다. 기본 태그는 띄어쓰기로, 클래스는 dot으로, id는 #으로 연결한다.

p.p-tag { /*p태그이면서 p-tag 클래스 */
  color: gray;
}
p#third-line { /*p태그이면서 third-line 아이디*/
  text-decoration: underline;
}
.pre span { /*pre 클래스의 span tag, 띄어쓰기 되어있음 주의!*/
  background-color: yellow;
}

상속

상속은 css가 가진 특성으로, 부모 태그의 스타일이 상속되어 자식에게도 같은 스타일이 적용된다. 하지만 본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용된다는 점을 참고하자.

semantic element

1.1과 같이 div, span 태그에 이름을 붙여 레이아웃을 구성해도 되지만, HTML5 에서는 div를 대신할 여러 태그가 나왔다. 아래 태그들을 사용해서 더 편리하게 레이아웃을 관리할 수 있다.

즉, div에 이름을 붙여가며 구분할 필요가 없다는 뜻!

semantic?

사전적으로는 의미론의, 의미의 라는 뜻의 형용사. 태그 관련 용어로는 아래와 같은 의미이다.

• non-semantic: div, span과 같이 콘텐츠에 대해 언급이 없는 태그
• semantic: header, table과 같이 콘텐츠를 정의하는 태그
  

1.3 table

요즘에는 대부분 div, span 혹은 header와 같은 semantic element로 레이아웃을 구성하지만, 과거에는 테이블로도 영역을 구분했다고 한다.

그래서 영역을 나누는 법보다 테이블 만드는 법에 대해서 간단하게만 정리하고 넘어가고자 한다. 첫 줄은 제목이니까 tr 안에 th이고, table body는 tr 안에 td를 만들면서 위에서 오른쪽으로 셀이 만들어진다고 생각하며 쉽다.

syntax

• th: table heading. 열 또는 행의 제목
• tr : table row. 열 만들기
• td : table data. 데이터 넣기

<table class="test-table">
      <tr>
        <th></th> <!--1~2열-->
        <th>1pm</th>
        <th>2pm</th>
        <th>3pm</th>
      </tr>
      <tr>
        <th>Gym</th>
        <td>Dodge ball</td>
        <td>Kick boxing</td>
        <td>Sack racing</td>
      </tr>
      <tr>
        <th>Exercise Room</th>
        <td>Spinning</td>
        <td colspan="2">Yoga marathon</td> <!--열 병합-->
      </tr>
      <tr>
        <th>Pool</th>
        <td colspan="3">Water polo</td></td>
      </tr>
    </table>

병합

table 병합 방법으로 rowspan은 행 병합, colspan은 열을 병합한다. 위처럼 html에서 병합하고자 하는 셀에 숫자를 표기해주면 된다.

<td colspan="2">Yoga marathon</td>

테두리

표에 테두리를 넣기 위해서는 css 에서 th, tr에 border를 주면 된다.

.test-table th, .test-table td {
  border: 1px solid black; 
}

특정 셀 선택

구글링하면 표 꾸미는 방법에 대한 설명은 많은데, 특정 셀을 타겟팅하는 방법이 없다. 영어로 검색하니 stack overflow에 바로 나와서 CSS: How to target a specific cell inside a table? 링크를 달았다. list나 table같이 순서가 있는 내용에 대해 css를 적용할 때 쓰는방법이니 참고하자.

• nth-child(숫자): 몇 번째 요소에 대해 지정하는 것.
• li:nth-child(even): 리스트에서 특정 줄에 대한 css 적용 용도로 사용한다.

.test-table tbody tr:nth-child(3) td:nth-child(3) {
  background-color: gray;
} /*3열 3행 셀 배경을 회색으로*/

.test-table tbody tr:nth-child(4) td:nth-child(2) {
  background-color: gray;
} /*4열 2행 셀 배경을 회색으로*/

2. CSS property

정말 많은 속성들이 있지만, 그 중에서도 디스플레이 배열 관련한 속성을 정리하고자 한다.
*참고: w3schools.com property value list

2.1 display

display 속성은 요소의 display behavior을 특정하는 속성이다. block, inilne, flex 등 여러 value들이 있고, 속성 변경을 원할 경우 아래와 같이 원하는 요소로의 적용이 필요하다.

.inline_something { /*inline 속성을 가진 요소를 block으로 변경*/
display: block;
}

block

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> ...

• 좌우에 다른 요소를 붙여넣을 수 없다.
• 디폴트로 한 줄을 모두 차지하기 때문에, 요소를 나열하면 새로운 줄에서 시작한다.
• 때문에 박스 나열 시 세로로 배치되며, 가로 배치를 위해서는 inline이나 float 속성을 사용한다.
• 가운데 정렬 margin: 0px auto;

margin

요소의 테두리를 기준으로 바깥 공간. 값을 네 개 주면 위에서부터 시계방향으로 위,오른쪽,아래,왼쪽 값을 주는 것이고, 값이 두개이면 첫 번째 값이 상하, 두 번쨰 값이 좌우를 나타내는 것이다.

auto로 값을 주면 나머지 공간은 균등하게 배분되어 여백을 갖게 됨을 의미한다.

padding

요소의 테두리를 기준으로 안쪽 공간. 버튼 사이즈를 조절할 때를 연상하면 생각하면 쉽다!

inline

<span>, <a>, <img>...

• inline 요소끼리 좌우에 위치할 수 있다.
• 텍스트 영역만큼만 차지하기 때문에, 높이나 넓이를 설정해도 임팩트가 없다.
• 가운데 정렬 text-align: middle;

inline-block

• inline 레벨의 block container.
• inline 요소로 나타나지만 높이와 넓이 값을 설정할 수 있다.

none

html에는 존재하지만 웹 페이지 구현 시 보이지 않는다. 처음에는 왜 none이 필요하지? 의문이었는데, wecode 강의 예시를 보니 이해가 쉽게 되었다.

네이버 검색창에 특정 키워드를 검색하면 드롭 다운으로 연관 검색어가 촤르르 나오게 되는데, 요게 바로 display none 속성을 사용해 인터랙티브 웹을 구현한 것이다.

예: 텍스트 입력 시 display:none -> block 요소로 변경되면서 숨겨져 있던 연관 검색어 리스트가 나타난다

flex

요소를 block 레벨 컨테이너로 나타낸다. block 요소는 한 줄 전체를 차지하기 때문에 수직 레이아웃만 가능하다. 때문에 수평 배열이 다소 어렵다.
하지만 flex를 사용해 부모 요소 container와 자식 요소item으로 다음에 나올 float 개념에 비해 수평 구성을 보다 간단하게 할 수 있다. heropy tech 사이트에 개념이 매우 잘 정리되어 있어 사용 할 때 해당 사이트를 참고하자!

• Container: display, flex-flow, justify-content 등의 속성 사용
• Items: order, flex, align-self 등의 속성

2.2 float

float은 본래 웹 페이지 내에서 텍스트와 이미지를 배치할 때, 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지를 해결하기 위해 만들어졌다.

하지만 최근에는 페이지 전체 레이아웃을 잡을 때에도 많이 사용된다.

<조심조심🚨>

• 기본적으로 block element에서만 사용 가능하다.
• float 속성을 가진 요소는 부모가 높이를 인지할 수 없어, 부모 범위를 벗어나게 될 수 있다.
• 때문에, clear 속성 혹은 clearfix hack을 사용해야 한다.

clear

float 태그로 인해 둥둥 떠다니는 문서 흐름을 조정하기 위해 쓰인다. float 요소 근처의 요소들에 적용해 좌우 또는 양옆을 비울 수 있다. 아래 세 가지 값으로 활용할 수 있다.

• left / right / both

overflow

콘텐츠가 너무 커서 요소의 블록 서식에 맞출 수 없을 때 쓰는 태그로, 예를 들어 블록 안에 너무 많은 텍스트가 들어가 있다면,

• visible: 넘쳐도 다 보여줄건지
• hidden: 자를건지
• scroll: 스크롤해서 보여줄 건지
• auto: 브라우저가 알아서 결정해 보여줄 건지

를 정하는 속성이다.

<조심조심🚨>
이 방법은 구 버전의 IE 브라우저에서는 동작하지 않을 수도 있다. 때문에 IE6에서는 overflow 속성과 더불어 "zoom : 1"이라는 속성을 추가해야 한다.

가상 요소 사용

float요소의 부모 요소에 ::after를 사용해, 중간에 공간을 만듦으로써 내용이 흐르는 것을 방지할 수 있다.

2.3 position

relative

상대적 위치에 사용하는 속성. 자체로는 특별한 의미가 없고, 어느 위치로 이동하지 않는다. posion: relative를 가진 요소를 기준으로 다른 요소에 top/right/botton/left 속성을 적용해 위치를 변경한다.

.relative {
  position: relative;
}
.top-20 { /* relative 속성을 기준으로 이동 */
  top: -20px;
  left: 30px;
}

absolute

절대적 위치에 사용하는 속성. 특정 부모(relative, fixed, absolute)를 기준으로 움직이게 된다.

fixed

부모가 필요 없이 고정되는 속성. 스크롤을 내려도 요소가 계속 같은 위치에 있도록 고정시키는 것이다. 페이지 header를 만들 때 쓰이는 예시를 연상하면 기억하기 쉽다.

3. Media Query

3.1 syntax

media query는 반은형 웹을 만드는 css 기술로, 어떤 조건에서 어떤 css를 적용하자! 라는 명령을 줄 때 쓴다. 아래 태그를 기반으로 설명해보자.

@media only screen and (max-width: 480px) {  
  body {  
    font-size: 12px;  
  } 
}

@media

media 쿼리를 시작한다는 의미로 사용된다.

only screen

어떤 디바이스에서 적용하는지에 대한 의미이다. 다른 예시는 아래와 같다.

• only print: 프린트를 하고싶을 때 적용하려면
• screen: 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용
• and (max-width : 480px): media feature다. 어느 조건에 아래의 css를 적용할지

3.2 scss

Sass는 스타일시트 언어인데, 아래와 같이 간단한 내용은 알아놓는 것이 좋을 것 같아 추가했다. 변수 정의는 $, 변수 할당은 :(콜론)으로 마무리한다.

$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";

우선 이 정도로 정리하고, 계속 배우는 내용에 대해 추가적으로 덧붙여야겠다 😃