CSS 기초2

• 학습 내용

 셀렉터에 이어 속성들의 종류와 특징을 살펴보고자 한다. css에 미리 지정된 속성을 통해 다양한 디자인을 적용할 수 있다. 이번에 다룰 속성은 기본이 되는 몇 가지만 다룰 것이다. 혹시 더 많은 속성들을 찾고자 한다면, 개발자들의 교과서 MDN을 참고하기 바란다.

• 색상

글자의 색상을 변경하는 속성은 'color'이다.  HEX라는 16진수로 RGB를 표현하여 결정하는 코드를 사용하거나 색상의 이름을 사용하여 색을 결정할 수 있다. css코드는 이렇게 사용한다.

.red {
  color: #ff0000; //빨간색
}

 

• 글꼴

글꼴의 속성은 font-family를 사용한다. 속성의 값은 따움표를 붙여서 적용하고 만약 사용하려는 글꼴이 없거나 지원하지 않는 경우 fallback글꼴을 추가하여 대체할 수 있다.

.emphasize {
  font-family: "SF pro KR", "MalunGothic", Vedana";
}

 

• 크기

글자의 크기를 결정하는 속성은 font-size를 사용한다. 

.title {
  font-size: 24px;
}

글자의 크기를 결정할 때 중요한 것은 어떤 단위를 사용할 것인지를 결정하는 문제이다. 단위에는 크게 두 가지가 있는데, 하나는 절대 단위이고 하나는 상대 단위이다. 절대 단위의 예로는 px, pt가 있고 상대 단위에는 %, em, rem, ch, vw, vh가 있다. 이 단위 역시 마찬가지로 mdn에서 더 많은 단위를 찾아볼 수 있다.  문제는 상황에 따라서 어떤 단위를 써야할지 구분할 필요가 있다는 것이다. 간단히 살펴보면

1) 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우에는 절대단위인 px를 사용하는 것이 좋다. 왜냐하면 px는 글꼴의 크기를 고정하는 절대 단위이기 때문에 사용자의 접근성을 불리하게 하기 때문이다. 만약 사용자가 개인 화면의 크기를 조정하더라도 그 사용자의 개인 화면에만 변화가 있을 뿐 개발자가 정해놓은 크기는 변하지 않는다.

2) 일반적인 경우에는 상대 단위인 rem을 쓰는 것이 좋다. 이는 사용자가 설정한 기본 글꼴의 크기를 따라서 변화하기 때문에 사용자의 접근성이 유리하다. em역시 상대 단위이지만 em은 부모 요소에 따라 상대적으로 크기가 변경되기 때문에 계산이 어렵다. rem이 보다 간편하다고 할 수 있다.

3) 반응형 웹이란 웹제작과 관련된 기술로 pc, 모바일, 태블릿 등 각각의 기기별로 홈페이지 페이자가 최적화되어서 보이는 기능이다. 예를 들어 네이버 홈페이지가 pc로 접속했을 때 태블릿으로 접속했을 때 화면의 사이즈가 다름에도 불구하고 화면에 맞춰진 디스플레이를 제공하는 기술이다. 이 경우에는 디바이스 크기 별로 css를 다르게 적용할 필요가 있다. 이때 그 차이를 결정하기 위해 나누는 기준의 단위를 보통 px로 정한다.

4) 화면의 너비나 높이에 따른 상대적인 크기가 중요한 경우에는 vw(viewport width)나 vh(viewport height)를 사용한다. 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트의 경우 100vw와 100vh를 사용하여 구연한 것이다.

 

• 정렬

정렬의 기능역시 디자인적으로나 개발적으로 아주 중요한 요소중 하나이다. 정렬은 가로로 정렬하는 경우와 세로로 정렬하는 경우에 따라 방법이 다른데, 가로로 정렬할 경우 text-align을 사용한다. left, right, center, justify를 사용하여 왼쪽 오른쪽 중간 양쪽 정렬을 사용할 수 있다. 그러나 세로로 정렬을 하는 경우는 좀 복잡하다. 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자의 높이보다 큰 경우에만 적용할 수 있다. 또 세로로 정렬할 때 vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 한다. 그래서 세로로 정렬하는 기능은 박스에 대한 이해가 좀 필요하다.

 

• 박스

모든 콘텐츠에는 고유한 영역이 있다.

출처: 코드스테이츠

각 요소마다 고유한 영역이 있음을 알 수 있다. 일반적으로 하나의 콘텐츠로 묶이는 요소들은 하나의 박스가 된다. 박스는 직사각형이므로 너비(width)와 높이(height)를 가진다. 이 크기를 css를 통해 설정할 수 있다.

 박스의 종류를 줄바꿈이 되는 박스와 옆으로 붙는 박스로 구분할 수 있다. 줄 바꿈이 되는 박스를 block박스라고 부르고 옆으로 붙는 박스를 inline박스라고 부른다. block박스에는 대표적으로 <div>, <h1>, <p> 등이 있다. block박스는 기본적으로 100%의 너비를 갖는다. 옆으로 붙는 박스인 inline박스는 <span>이 대표적이다. inline박스는 width와 height 속성이 적용되지 않는다. 기본적으로 갖는 너비는 글자가 차지하는 정도이다. block박스와 inline박스를 합한 형태인 inline-block박스가 있다. 보통 메모나 주석을 달 때 잘 사용한다. width와 height를 사용할 수 있고 갖는 너비로는 글자가 차지하는 만큼이다. 그러나 줄 바꿈은 일어나지 않는다.

 

• 박스를 구성하는 요소

출처: 코드스테이츠

박스를 구성하는 요소에는 border(테두리), margin(바깥 여백), padding(안쪽 여백)이 있다.

1)border

 테두리는 디자인 용도 외에도 각 영역이 차지하는 크기를 파악하여 레이아웃을 만들 때 시작적으로 확인할 수 있어 개발 과정에서도 매우 의미가 있다. 

p {
  border: 1px solid red;
}

속성의 값으로 순서대로 테두리 두께(border-width), 테두리 스타일(border-sytle), 테두리 색상(border-color)을 넣는다. 이 값들은 vorder속성의 세부 속성이기도 하다.

2)margin

 테두리의 보다 넓은 바깥 여백이다. 각 크기와 넓이는 top, right, bottom, left로 시계방향 순서로 넣는다.

p {
  margin : 10px 20px 30px 40px;
}

만약 값을 두 개만 넣으면 top과 bottom이 설정된다. 그리고 값을 하나만 넣으면 모든 방향에 같은 크기가 적용된다. margin역시 border와 마찬가지로 각 방향마다 세부 속성을 지정할 수 있다.

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

margin은 음수 값 역시 지정할 수 있다. 음수 값을 지정하면 다른 요소와의 간격이 줄어든다.

3)padding

 padding은 border를 기준으로 박스 내부의 여백을 지정하는 박스이다. 값의 순서는 margin과 동일하다.

p {
  padding : 10px 20px 30px 40px;
}