HTML 요소의 스타일을 제어

들어가기에 앞서서 유저가 따로 지정하지 않아도 브라우저가 제공하는 기본적인 속성들이 있다.

자신의 심미적 감각과 정확한 배치를 위해 이를 초기화해줄 필요가있는데 Reset css를 통해서 초기화해줄 수 있다.

들어가기 앞서

단축 속성들은 속성 : 상 우 하 좌로 단축해서 선언할 수 있다.

시계방향으로 생각하면 편하다.

상과 하가 같은 값을 가질 경우 속성 : 상하 좌 우와 같이 단축해서 작성할 수 있고 같은 원리로 속성 : 상하 좌우와 같이 사용할 수도 있으며 속성 : 상하좌우역시 가능하다. 이는 모든 방향에 동일한 값을 적용하겠다는 의미이다.

색상

색상을 선언하는 방식은 여러가지가 있다.

  • transparen(투명)
  • 색상 이름(red, blue등)
  • 16진수
  • rgb
  • rgba

이중에서 색상 이름은 브라우저마다 달라질 가능성 있기 때문에 16진수로 사용하는 경우가 많다.

인라인 vs 블록

html의 태그들은 두가지로 분류할 수 있다. 인라인 요소와 블록요소.

블록요소는 레이아웃을 잡기 위한 태그로 너비와 높이값을 가진다.

인라인 요소는 내용을 채울 때 사용하는 태그로 span이 대표적인 인라인 요소이다.

요소가 배치되는 성질도 다른데 인라인 요소는 왼쪽에서 오른쪽으로 배치되고 블록요소는 위에서 아래로 배치된다.

기본적으로 블록요소는 브라우저가 자동으로 높이와 width값을 설정하는데 블록요소의 너비는 최대한 늘어나려는 성질이 있다. 따라서 width값을 명시해주지 않으면 화면의 오른쪽 끝까지 늘어나는 것을 볼 수 있다.

그리고 높이는 최대한 줄어들려하는 성질이 있어서 기본값은 0이 된다.

인라인 요소는 가로와 세로너비가 요소의 크기만큼 줄어드는 성질이 있다. 기본적으로 인라인 요소는 가로와 세로값을 가지지 않고 가지게 하려면 display속성을 block으로 변경해주면 된다.

블록요소를 다룰 때 유용한 속성이 있는데

  • max-width/max-height 기본 none(제한 없음) px등의 단위로 제한할 수 있다.

위와 같다. 요소의 기본적인 성질을 이용하여 최대 늘어나려는 길이와 최소 길이 등을 명시해서 사용할 수 있다.

단위

  • px
  • %
  • em - 글꼴의 크기 기준
  • rem - 최상위 요소의 글꼴 크기 기준(최상위 요소 - html태그)
  • vw - 뷰포트의 가로너비에 대한 백분율
  • vh - 뷰포트의 세로너비에 대한 백분율

margin

margin은 요소 바깥의 여백을 지정할 때 쓰인다.

단축속성으로 상하좌우 방향을 명시해서 마진을 적용할 수 있다.

속성 값
기본값 0
auto 브라우저가 자동으로 계산
단위 px,em,vw등
% 요소의 가로너비 기준

padding

요소의 내부 여백을 지정하는 단축 속성

내부 여백이 생긴 만큼 요소의 크기가 커진다는 특징이 있다.

마진과 마찬가지로 단축 속성으로 상하좌우를 명시해서 패딩을 적용할 수 있다.

속성 값
기본값 0
단위 px,em,vw등
% 요소의 가로너비 기준

border

요소의 테두리선을 만들기 위한 속성이다.

요소의 크기가 테두리선의 두께만큼 커진다는 특징이 있다.

다음과 같은 속성들을 사용할 수 있다.

  • 두께 - 단위(px)로 사용하는 것이 일반적
  • 종류
  • 색상

보통 아래와 같이 선언한다.

border : 1px solid black;

다른 순서로 작성해도 되지만 위와같이 작성하는 것이 관행이다.

상하좌우 다르게 입력할 수도 있다.

  • 선의 종류
속성 설명
기본값 none
solid 실선
dashed 파선

border-radius

모서리를 둥글게 하고 싶을 때 사용한다.

속성 설명
기본값 0
단위 px.em,vw등
  • 원리 - 직각 모서리에 인접한 선과 접하는 border-radius 값을 반지름으로 가지는 원을 만들고 원의 둘레에 맞게 깎아낸다.

단축속성으로 상하좌우에 각기 다른 값을 줄 수 있다.

box-sizing

앞에서 봤던 속성들 중에 padding과 border는 선언된 값 만큼 요소의 크기가 커진다. 이런 성질은 디자인하는데 불편함을 줄 수 있다. 이를 해결할 수 있는 속성이 바로 box-sizing이다.

값 설명
기본값 content-box
border-box 요소의 내용 + 증가되는 요소의 크기

overflow

넘침 제어라고 한다.

요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 속성으로 | 값 | 설명 | | – | – | | 기본값 | visible | | hidden | 넘친 내용을 잘라냄 | | scroll | 스크롤바를 생성 | | auto | 넘치는 축에만 스크롤바 생성. |

scroll과 auto는 잘린 내용에 사용자가 인지해야하는 내용이 있는 경우 사용할 수 있다. 둘 다 스크롤 바를 만들지만 scroll의 경우 내용이 넘치지 않은 축에서 스크롤바를 만들어 ux적으로 단점이 생긴다. 그렇기에 auto를 많이 사용한다.

x축과 y축을 명시할 수도 있다.

display

값 설명
기본값 태그의 기본 값
inline 인라인
block 블록
flex 1차원 레이아웃
grid 2차원 레이아웃
none 보이지 않음.

opacity

요소의 투명도를 지정한다. | 값 | 설명 | | – | – | | 기본값 | 1(불투명) | | 0~1 | 0~1사이의 소수점으로 나타내어진 숫자 |

투명도뿐만 아니라 소수점으로 표현하는 숫자들은 .5 이런식으로 0을 생략할 수 있다.

글꼴

  • line-height : 행간의 크기를 제어하는 목적 외에도 옛날에는 요소의 수직 중앙정렬을 위해 사용했던 속성이다. 행간의 수직 중앙에 글자가 위치하는 성질을 이용해 요소의 높이만큼 line-height를 주면 중앙정렬 효과 그러나 정렬을 위한 속성인 flex가 나온 뒤론 이런 방식이 쓰이지 않는다. 숫자(배수) 단위(px)등을 이용해서 사용한다. 숫자를 사용하는 것을 권장한다.

  • font-weight : 글자의 두께

    값 설명
    기본값 normal
    단어 normal,bold등
    숫자 400(보통), 700(굵은 글씨)

    보통 400, 700와 같은 숫자 형식으로 선언하는 경우가 많다.

  • font-size | 값 | 설명 | | – | – | | 기본값 | 16px | | 단위 | px,em,rem 등 |

문자

  • text-align | 값 | 설명 | | – | – | | 기본값 | left | | right | 우측 정렬 | | center | 중앙 정렬 |

  • text-decoration | 값 | 설명 | | – | – | | 기본값 | none | | underline | 밑줄 | | line-tthrough | 취소선 |

    a태그는 기본적으로 언더라인이 적용되어있어서 개발자가 none으로 선언해주는 경우 많다.

  • text-indent 본문의 들여쓰기를 적용할 때 사용.

    값 설명
    기본값 0
    단위 px, em 등

음수를 사용하면 내어쓰기도 가능하다.

배경

  • background-image

    값 설명
    기본값 none(이미지 없음)
    url() 괄호안에 이미지의 경로를 명시

  • background-size

    값 설명
    기본값 이미지 파일의 크기
    단위 px, % 등
    contain 요소의 더 짧은 너비에 맞춤
    cover 요소의 더 긴 너비에 맞춤

  • background-repeat | 값 | 설명 | | – | – | | 기본값 | 반복 | | no-repeat | 한 번만 출력됨 |

    단축속성으로 x,y속성을 입력할 수 있고 그럼 해당 축으로만 반복된다.

  • background-position

    값 설명
    기본값 이미지 파일의 크기
    방향 top,right,bottom,left
    center 중앙

  • background-attachment | 값 | 설명 | | – | – | | scroll(기본값) | 요소를 따라서 같이 스크롤 | | fixed | 뷰포트에 고정, 스크롤 x |

  • background-color | 값 | 설명 | | – | – | | transparent(기본값) | 투명 | | 색상 | red, #fffff등 |

position(배치)

요소를 내가 원하는 위치에 배치

값 의미 기본값
static 기준 없음 0
relative 요소 자신 X
absolute 위치상 부모 요소 X
fixed 뷰포트 X 
top : 10px;
right: -10px;
bottom: 20px;

위와 같이 사용한다.

relative값은 브라우저가 디폴트로 계산한 요소의 위치를 기준으로 배치한다. 그러나 배치하는 용도로는 잘 쓰이지 않는데 그 이유는 html요소는 위에서 아래로 쌓이는 구조로 배치된다. 1,2,3과 같이 위에서 아래로 배치되는 구조에서 2번 요소가 다른 곳에 배치된다면 2번자리는 비어있게되고 사용자로 하여금 1,2,3순으로 쌓이는 레이아웃을 이해하기 힘들게하기 때문이다.

배치에서 absolute값을 가장 많이 쓴다.

적용해보면 요소가 위로 붕뜨고 원래 위치해있던 공간이 사라지는 것을 볼 수 있는데 그 이유는 부모요소를 기준으로 배치되기 때문이다. 더 이상 형제 요소들과 상호작용할 필요가 없다.(주위 요소와의 상호작용이 무너진다.)

absolute에서 가장 중요한 개념은 위치(position)상의 부모요소이다.

위치상의 부모요소에 대해 이해하지 않고 사용한다면 부모요소가 아닌 뷰포트를 기준으로 배치되는 것을 볼 수 있다.

absolute가 적용된 자식 요소는 위로 올라가며 위치상의 부모요소를 찾는다. 찾지 못한다면 더 위로 올라가며 결국에는 뷰포트가 되어버린다.

위치상의 부모요소란 자식요소가 배치의 기준으로 삼는 부모요소로 포지션값의 기준이 있어야한다. 즉 부모 요소에 position:xxx라는 속성이 선언되어있어야한다.

그래서 위치상의 부모요소를 기준으로 배치(absolute)하려 한다면 부모요소에 position값이 있는지 확인하고 없다면 position: relative를 선언해주어야한다.

fixed는 뷰포트를 기준으로한다. absolute와 마찬가지로 배치의 기준이 달라졌기에 더 이상 주변 요소들과 상호작용하지 않아서 원래의 위치에서 벗어나 붕 뜨게된다.

주로 뷰포트상의 특정 위치에 고정되어 스크롤해도 움직이지 않는 요소(scroll to top 버튼)를 만들기 위해 쓰인다.

배치와 같이 쓰이는 속성은 z-index가 있다. 앞에서 봤던 것처럼 배치를 사용하면 요소가 붕 뜨게된다. 이로 인해 다른 요소들이 보이지 않게 되는 경우가 생기는데 이 때 z축상의 순서를 정해준다. 주의할 점은 지나치게 크게 설정하지 않는 것이다. 만약 z-index를 999로 설정했는데 이 것보다 더 앞에 나와야하는 요소가 생긴다면 더 큰수를 사용해야하고 그렇게된다면 관리가 어려워지기 때문이다.

일종의 트릭으로 어떤 요소가 z축상 뒤로 빠지게 하려면 z-index를 음수값으로 설정해주는 방법이 있다.

(포지션을 지정하면 요소가 자동으로 block으로 바뀐다.)

flex(정렬)

HTML은 기본적으로 위에서 아래로 쌓이는 레이아웃을 가진다. 그렇기 때문에 주로 수평정렬을 할 때 플렉스를 사용한다.

flex에는 플렉스 컨테이너(부모요소)와 플렉스 아이템(자식요소)의 개념이 있는데

속성도 부모요소에 적용하는 속성과 자식요소에 적용하는 속성으로 나뉜다.

부모요소에 flex를 입력하면 기본값으로 요소들이 수평으로 쌓이게된다.

부모 요소에 적용되는 속성들

display : flex 블록 요소와 같이 컨테이너 정의 inline-flex: 인라인 요소와 같이 컨테이너 정의

부모요소가 블록을 가진다. 인라인은 인라인 요소처럼 왼쪽에서 오른쪽으로 수평으로 쌓인다.

  • flex-derection

    값 설명
    row(기본값) 좌우로 배치
    row-reverse 우좌로 배치

사용할 수 있는 값에 column도 있는데 기본적인 html은 위에서 아래로 배치되기 때문에 쓸일이 많이 없다.

플렉스에는 중요한 개념들이 몇 가지가 있는데 다음과 같다.

  • 주축
  • 교차축
  • 시작점
  • 끝점

flex를 적용하면 기본값은 row를 적용해 좌우로 배치한다. 이 때의 주축은 x축이 된다. 그리고 교차축은 y축이다.

주축이 시작하는 지점을 시작점이라고 하고 끝나는 점을 끝점이라고 한다.

  • flex-wrap

    플렉스 컨테이너 안에 여러개의 아이템을 넣을 때 플렉스 아이템들의 크기가 컨테이너보다 크다면 요소가 자동으로 줄어든다. 이럴 때 크기가 줄어드는게 아닌 줄바꿈을 하고싶을 때 사용하는 속성이다.

    값 설명
    nowrap(기본값) 줄바꿈 없음
    wrap 여러줄로 묶음
    wrap-reverse 역순으로 여러줄 묶음

  • justify-content(주축 정렬)

    값 설명
    flex-start(기본값) 시작점으로 정렬
    flex-end 끝점으로 정렬
    center 중앙 정렬

space-between, space-around 속성도 있지만 활용도가 떨어지는 편이다.

  • align-content(수직 정렬) 앞에서 봤던 줄바꿈을 했을 때 사용하는 속성이다.

    값 설명
    stretch(기본값) 시작점으로 정렬하고 높이값을 최대로 가지려고한다
    flex-start 시작점으로 정렬
    flex-end 끝점으로 정렬
    center 중앙 정렬

  • align-items(수직 정렬) | 값 | 설명 | | – | – | | stretch(기본값) | 시작점으로 정렬하고 높이값을 최대로 가지려고한다 | | flex-start | 시작점으로 정렬 | | flex-end | 끝점으로 정렬 | | center | 중앙 정렬 |

    위의 두가지 속성의 차이점은 align-content는 여러줄의 아이템이 있을 경우 적용되고 align-items는 한 줄의 아이템이 있을 경우 교차축 정렬을 하는 속성이다.

교차축의 한 줄 정렬 방법(align-content보다 이 속성을 많이사용함) 자식요소에 flex-grow 주축의 너비의 비율

자식요소에 적용되는 속성들

  • flex-grow

    요소의 크기를 제외한 공간을 차지하게하는 속성이다. 기본값은 증가 없음이다. 모든 아이템들에 flox-grow를 1로 주면 모두 동일한 비율로 빈 공간에 맞추어 늘어나게 된다.

  • flex-basis

    공간 배분전 기본 너비를 의미하고 기본값은 auto이다. 요소의 컨텐츠 너비를 제외한 공간을 나누어 사용하고 우리가 원하는 것은 컨텐츠의 크기에 상관없이 박스의 크기가 같은 비율을 가지는 것이기 때문에 flex-basis를 0으로 설정하면 박스의 크기 비율과 flex-grow의 비율이 일치하게 된다.

  • order

    값 설명
    0(기본값) 선언된 순서대로 정렬된다.
    숫자 선언한 숫자대로 정렬된다.

  • flex-shrink | 값 | 설명 | | – | – | | 1(기본값) | 줄어들어 한줄에 출력하려는 성질 | | 숫자 | 비율을 지정할 수 있다. |