1. Introduction
CSS에서 float, margin 그리고 padding 같은 property를 통해 특정 요소의 공간적 배치를 조정할 수 있다. 이때 이 Properties들만으로도 해결할 수 없는 기능들이 있어 CSS에 있는 Position이라는 property를 사용해야 하는데 이는 4가지의 값을 가진다.
이 Position property안에 값으로 들어가는 것들은 총 네 개가 있는데 이들이 무엇을 각기 의미하는지 알아야 한다.
| static | 이는 HTML 요소들의 기본 값으로써 이 값으로 할당된 요소들은 페이지의 흐름데로 위치하게 된다. |
| fixed* | 특정 요소가 브라우저 윈도우와 관련없이 위치하게 하는 값으로써 페이지를 스크롤한다고 해도 움직이지 않게끔 고정되게 만든다. 다른 요소들에게 영향을 끼치지 않는다. |
| relative* | 기본적으로 static과 같이 일반적인 위치에 요소를 표현하지만 특정요소에 위치값에 따로 변화를 주었을 경우 자기 자신을 기준으로 이동시킨다. |
| absolute* | HTML에서 특정 요소가 어느 다른 태그로부터 중첩이 되었을때 그 특정 요소를 Parent element (부모 요소)의 위치로 위치시킨다. 만일 중첩이 되어있지 않는 요소라면 <body>의 위치에 따라 특정 요소의 위치가 정해진다. Absolute position은 3차원으로써 어느 요소들이 앞으로 아니면 뒤로 갈지 결정해줄 수 있으므로 absolute position으로 지정된 요소는 따로 z-index라는 property를 사용할 수 있다. 참고로 z-index에서 값이 낮을 수록 더욱 뒤로 향한다. |
이때 별표가 표시된 값들로 설정된 요소들은 또 다른 property들을 가능케 하여 위치값을 따로 또 지정해 줄 수 있다. 이때 짝으로된 두 property끼리 둘 다 하나의 요소에 값을 설정할 수 없다.
- top and bottom (pixel로 값을 정함)
- left and right (pixel로 값을 정함)
그러므로 top과 bottom을 동시에 아니면 left와 right을 동시에 값을 조절하여 포지션을 세팅할 수 없다.
2. Absolute inside Relative
Absolute 포지션으로 된 요소를 Relative 포지션안에 중첩 한다는 것은 특별한 효과를 연출 할 수 있다.
만약 아래와 같이 이미지 안에 자막같은 Caption을 넣고 싶다면 이러한 효과를 통해 실행해야 한다.
이때 알 수 있는 사실은 <img>와 <figcaption> (figure caption)이라는 태그들을 <figure>이라는 태그에 중첩시킨 다음 <figcaption>에 "Piano"라는 Class를 부여하여 따로 스타일을 생성하게 끔 우선 설정하였다. 그대신 <img>와 <figcaption>둘 다 position CSS property를 absolute로 설정하여 Parent Element의 위치 (여기서는 <figure>)를 따라가게끔 설정하였다. 이때 <figure>의 position CSS property가 relative로 설정되어있다면 중첩된 요소들 (<img>와 <figcaption>)들도 포지션이 absolute임으로 부모 요소의 position 속성을 따라 똑같이 relative로 설정될 것이다. 이때 유저가 따로 포지션의 top과 left값을 전부 0으로 표시하면 페이지 왼쪽 윗쪽에 Image가 위치하게 될 것이다. <figcaption>에 들어있는 요소는 반대로 bottom과 left값을 전부 0으로 표시하여 이미지 안 왼쪽 아랫쪽에 Caption을 위치하게끔 할 수 있다. 이때 왜 relative로 값이 들어간 <figure>태그 요소가 아닌 absolute로 값이 들어간 나머지 두 개의 요소들에 top, bottom, 그리고 left값을 부여해야 하는지 햇갈려 더욱 연구해 보기로 하였다.
a) 이는 figure태그로 들어간 값에 이동값이 들어가게 되면 안에 있는 모든 요소들이 통째로 옮겨지기 때문이다.
p.s.
- <figure>은 이미지나 시각적인 자료들을 포함해주는 태그로써 안에 <figcaption>과 <img>를 조합하면 Image와 Caption을 한번에 띄워줄 수 있다.
- 이는 부모 요소 안에 들어있는 자식 요소들이 부모 요소 안에서를 기준으로 Top/Bottom/Left로부터 얼마나 떨어져 있을지 결정해준다. 이때 아래와 같이 relative로 position이 세팅되어있는 <figure> 요소안에서를 기준으로 position이 absolute로 지정된 요소들의 위치가 결정나는데 이때 각각 top과 left가 0으로 세팅되어있어 <figure>안에서 왼쪽 위에 자리하게 되고 bottom과 left가 0으로 세팅되어있는 요소는 <figure>안에서 왼쪽 아래에 자리잡게 된다. 그러므로 relative로 설정된 <figure>요소의 크기나 위치를 조절하여 <body>안에 모든 요소들이 한번에 원하는 위치에 있도록 할 수 있게 할 수 있다. (만약 <figure>요소 자체가 top이나 left property를 통해 옆으로 이동한다면 <figure>안에 있는 자식 요소들도 absolute라는 position의 특성상 다같이 한꺼번에 움직이게 된다).
- 이때 중요한 사실은 figure의 크기가 image에 세팅되어있는 크기와 동일해야 원하는 결과가 나온다. 아래와 같은 코드로 figure 태그를 selector로 사용하여 width와 height property로 크기를 조절해야 할 때 원하는 Image의 크기만큼 설정해 주어야 원하는 결과가 나올 수 있다. 아래 사진은 <figure>요소가 조금 오른쪽 아랫방향으로 튀어나온것을 알 수 있지만 이는 그 요소를 표현해 주기 위함이지 원래는 튀어나오면 안된다. 크기가 자식 요소들중 Image와 일치해야 한다.
figure {
position: relative;
width: ...; /* same as the width of the image trying to put within figure area */
height: ...; /* same as the height of the image trying to put within figure area */
/* figure 통째 요소의 위치값 세팅… */
}
img {
position: absolute;
/*figure안의 요소의 figure크기를 기준으로 한 위치값 세팅… */
}
figcaption {
position: absolute;
/*figure안의 요소의 figure크기를 기준으로 한 위치값 세팅… */
}
이때 Absolute position을 사용하면 z-index property도 사용할 수 있게끔 만드는데 3차원상에서 어떤 요소들이 더 먼저 앞에 오냐 아니면 뒤에 오냐를 결정함으로써 순서를 값으로 줄 수 있다. (더 높은 숫자값을 가진 요소가 앞으로 오게 되고 반대로 더 낮은 숫자값을 가진 요소가 뒤로 가게 된다). 이와 같은 상황에서는 <img>의 z-index를 1로 설정하고 <figcaption>의 z-index를 2로 설정하여 caption이 image위에 올라올 수 있도록 해야한다.
3. Colours and Codes
CSS에서 가장 쉽게 요소의 투명도를 조절할 수 있는 방법은 opacity property를 사용하는 법이다. 그렇지만 이러한 방법을 사용하면 만약 background가 있는 텍스트에 opacity의 값이 들어갈경우 텍스트까지 투명도가 적용될 것이므로 배경 그 자체에만 투명도를 조절하는데 실패하게 된다. 이를 해겨랗기 위해서는 컴퓨터 상에서 색상이 어떻게 생성되는지 알 필요가 있다. 아래와 같이 코드를 작성하면 figcaption에 들어있는 모든 요소 (텍스트, 배경 등)이 전부 그 값에 맞게 투명해질 것이다.
figcaption {
background-color: #FF0000;
opacity: 0.6;
}
컴퓨터에서 색상을 조절하는 가장 접근성이 쉬운 방법으로는 HEX Code (헥스코드)로써 #FF0000 이와 같이 값을 정하면 빨간색을 띄게 된다. 이때 6글자중 두 글자끼리 RGB를 형성하는 것을 알 수 있다. eg) #FF/00/00 (R에 해당하는 부분이 16진수상 가장 높은 수인 FF이고 나머지가 0이므로 빨간색이 띄어지는 것을 알 수 있다).
이때 헥스코드를 쓰지 않고도 색상을 조절하는 방법이 또 있는데 이는 Greyscale (흑백도), CMYK (시안, 마젠타, 노랑, 검정) 그리고 RGB (빨강, 초록, 파랑)의 색상 조합을 쓰는 방법이다. 컴퓨터는 주로 RGB를 쓰므로 헥스코드가 항상 접근성이 쉬웠다는 것도 이해가 된다. 그렇지만 헥스코드를 사용하지 않고 곧바로 RGB로 값을 CSS에 입력하는 방법이 있는데 이는 RGB()라는 Function을 사용하여 안에 제 각기 0에서 255까지의 값을 집어넣어 색상 조합을 통해 원하는 값을 지정하는 방법이다. 다음과 같은 방법으로 사용 가능하다.
/* 두 코드 둘다 동일하게 배경색상을 빨강으로 설정한다 */
background-color: #FF0000; /* 헥스코드를 사용 */
background-color: rgb(255, 0, 0); /* RGB Function을 사용 */
그렇다면 의아할 것이다. 도대체 방금전에 말한 Background Color가 있는 텍스트에서 배경 그 자체의 투명도만 어떻게 조절할 것인가? 이는 RGBA()라는 Function을 사용하여 적용 가능하다. RGBA()는 RGB()의 확대된 Function으로써 마지막 A값은 Alpha의 약자로써 투명도값을 나타낸다. 이는 Opacity와 동일하며 0에서 1까지의 값만을 허용하여 소숫점의 수들을 집어넣어야 한다. 마치 다음과 같다.
/* 배경색을 빨갛지만 어느정도 투명도를 조절하여 약간 비치게 만들어라 */
figcaption {
background-color: rgba(255, 0, 0, 0.6);
}
이러한 개념을 사용하면 Semi-transparent (반투명한) 배경색상을 지정할 수 있지만 딱 적용하려는 그 요소에만 해당 Property를 지정하여 다른 요소에는 영향을 미치지 않게끔 만들어 줄 수 있다.
이 단원으로 인해 기본적인 HTML과 CSS는 끝이 난것 같다. 물론 아직 배워야 할 것이 산더미이겠지만 그것들은 차차 알아가기로 하고 다음시간부터 배우게 될 jQuery를 이용하여 더욱 웹사이트를 동적으로 만드는 원리에 대해 알아 볼 것이다.
'Web Design & Development > Front End_Web Development' 카테고리의 다른 글
| Module 6 - Google Fonts & scrollTop (1) | 2022.09.23 |
|---|---|
| Module 5 - jQuery and the DOM (1) | 2022.09.23 |
| Module 4 - Introducing jQuery (1) | 2022.09.22 |
| Module 2 - CSS Refresher (1) | 2022.09.21 |
| Module 1 – HTML Refresher (1) | 2022.09.21 |