About | Canal Street Market
Canal Street Market is a curated retail market, food hall & community space open year-round, located in downtown New York between Soho and Chinatown.
canalstreet.market
위 사이트를 클론하던 중 재미있는 디자인들을 보았다.
1. 점선으로 된 위 아래 테두리가 있다.
2. 점선으로 된 테두리가 상하좌우 있다.
3. 비스듬하게 선이 그어져있는 테두리가 위 아래로 있다.
위 3개의 디자인을 이해하기 위해서는 다음 6개의 css를 알아야한다.
1. background-image
2. background-position
3. background-size
4. background-repeat
5. linear-gradient
6. repeating-linear-gradient
1. background-image
맨날 사용하던 background-image는 그림을 삽입하기 위해서만 사용해봤지, 다른 것을 시도할 이유도 생각도 없었다.
이름에 image만 들어있어서 그림만 삽입할 수 있는줄 알았는데, linear-gradient도 넣을 수 있었다.
마치 필터를 끼는 것 처럼 그림 위에 linear-gradient를 넣어서 디자인을 신박하게 할 수 있었다.
linear-gradient도 하나의 이미지로 받아들이는 모양이다.
여러개의 요소를 넣기 위해선 콤마로 구분해주면된다.
ex) background-image: linear-gradient(red, blue), url(img/image.jpg);
이때 이미지는 순서대로 맨 위부터 아래방향으로 적용된다. 위의 예시는 linear-gradient가 맨 위에있고,
그 밑에 url로 지정한 이미지가 있다.
2. background-position
background-image에 넣었던 이미지들의 위치를 지정할 수 있다.
위치는 공백을 통해 x좌표, y좌표 순서대로 적용된다.
x좌표의 시작점은 맨 왼쪽이고, y좌표는 맨 위이다. 0 0 으로 지정하면 왼쪽 위가 된다.
ex) background-position: 10px 20px; --> 이미지의 x좌표를 왼쪽에서 10px오른쪽으로, y좌표는 위에서부터 20px아래로.
background-image가 여러개의 이미지로 되어있다면,
마찬가지로 background-position으로 콤마를 통해 여러개의 이미지들의 위치를 조정할 수 있다.
3. background-size
그동안 background-size는 이미지를 그 사이즈에 맞게 cover만 사용했었는데,
여러개의 이미지가 있다면 그 이미지들의 너비와 높이를 지정해줄 수 있었다.
공백을 통해 너비, 높이 순서대로 적용된다. 마찬가지로 콤마를 통해 각각의 이미지에 적용할 수 있다.
ex) background-size: 10px 10px, 20px 20px;
4. background-repeat
이미지가 container의 크기보다 작다면 반복해서 나타나는데,
아마 css를 다뤄봤다면 당혹스러운 감정을 숨기지 못했을 것이다.
이미지가 반복될 시 x축 방향과 y축 방향 모두 반복되게 되어있다.
이때 x축이나 y축 혹은 둘다 반복되게 하지 않을 수 있다.
x축만 반복되게 하려면 repeat-x를 y축은 repeat-y를 사용하면 된다.
아예 반복되는 게 꼴보기 싫다면 no-repeat를 사용하자.
5. linear-gradient
linear-gradient는 색상을 이쁘게 적용하고 싶을 때 찾게되는 것 같다.
기본적으로 linear-gradient는 위에서 아래로 색상이 적용된다.
즉 linear-gradient(red, blue)라고 했으면 위쪽이 빨간색, 아래쪽이 파란색이 된다.
각도까지 조절해서 넣을 수 있다.
Xdeg를 넣으면 되는데, 이 각도는 0deg를 넣어보면 알겠지만 아래에서 위방향이 기본이고,
1deg씩 추가해보면 시계방향으로 돌아간다. 90deg를 넣으면 왼쪽에서 오른쪽 방향으로 색이 적용된다.
ex) linear-gradient(90deg, red, blue);
색도 길이 단위를 줘서 적용시킬 수 있다.
길이는 좀 웃기게 적용된다. 길이로 주는 부분이 색깔들의 시작점 or 끝점이 된다.
예를들어 red를 10px, blue를 10px주면 다음과같이 색이 극명하게 갈린다.
시작하는 색깔인 red는 시작점이 맨 왼쪽이므로 왼쪽으로부터 10px만큼 적용되었고,
끝나는 색깔인 blue는 맨 왼쪽부터 10px부터 시작해서 맨 오른쪽까지 색이 적용되었다.
둘의 길이를 다르게 해보자.
red는 똑같이 10px까지주고, blue는 20px부터 시작하게 해보자.
red의 끝점인 10px부터 blue의 시작점인 20px까지 색이 부드럽게 변한다.
6. repeating-linear-gradient
repeating-linear-gradient는 설정한 linear-gradient를 container를 다 채우도록 반복시킨다는 점만 빼면
linear-gradient와 똑같다.
linear-gradient부분 맨 마지막의 설명한 부분을 응용하면, 반복되는 무늬를 만들 수 있다.
repeating-linear-gradient(90deg, black, black 10px, pink 10px, pink 15px);다음을 해석해보자면, 검정색은 맨 왼쪽부터 시작해서 10px뒤에 끝나고,
핑크색은 10px부터 시작해서 15px에서 끝난다.
검정색 10px + 핑크색 5px = 15px 이며, 이 15px짜리 이미지가 x축 y축 방향으로 무수히 반복된다.
저렇게 보인다고, 한 방향으로만 반복된다고 생각하지 말자.
자 이제 디자인 1번부터 차례대로 만들어보자.
1. 점선으로 된 위 아래 테두리가 있다.
먼저 저 줄무늬를 어떻게 만들까? 게다가 4줄이나 된다. 아니면 2개짜리인가?
그냥 요소검사를 통해 css를 베낄 수도 있지만, 지금까지 이해한 것을 바탕으로 만들어보자.
먼저 점선 한 줄을 만들어보자.
순서는 다음과 같다.
1. 50%는 검정색, 50%는 투명한 이미지를 만들고, 90도 회전시킨다.
2. background-size를 줘서 너비는 대략 30px, 높이는 1px로 만들어서 얇게 그리고 반복되게 만든다.
3. x축으로만 반복되게 하면, 줄무늬 완성!
1. 50%는 검정색, 50%는 투명한 이미지를 만들고, 90도 회전시킨다.
50%검정색, 50%투명한 90도 회전된 이미지는 누워서 잠자기보다 쉽다. 불면증이 있다면 더욱 쉽게 느껴질 것이다.
linear-gradient를 사용하면 쉽게 만들 수 있다.
linear-gradient(90deg, black 50%, transparent 50%);이렇게 만들면, 다음과 같이 보일것이다.
이제 이걸 background-image에 넣자.
background-image: linear-gradient(90deg, black 50%, transparent 50%);
2. background-size를 줘서 너비는 대략 30px, 높이는 1px로 만들어서 얇게 그리고 반복되게 만든다.
background-size: 30px 1px;이렇게 주면 검정줄이 많이 생기긴 했는데, 얇아지진 않았을 것이다. 왤까?
x, y축 방향으로 계속 반복되기 때문에 얇은 줄무늬가 계속 쌓여서 두껍게 보이는 것이다.
3. x축으로만 반복되게 하면, 줄무늬 완성!
background-repeat: repeat-x;이렇게 주면 성공적으로 줄무늬가 생겼을 것이다.
한 줄 만들었으면 4줄 만들기는 누워서 눈뜨기 보다 쉬울것이다. 수면마취 중이라면 더욱 더 쉽게 느껴질 것이다.
콤마를 통해 4줄을 만들어주면 된다.
background-image: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%);
background-size: 30px 1px, 30px 1px, 30px 1px, 30px 1px;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
아...? 하지만 아직도 한 줄로 보일것이다. 4개가 겹쳐져있기 때문이다.
따라서 background-position을 통해 위치를 지정해주자.
위 사진처럼 만들려면 다음과 같이 적용시키자.
background-position: 0 0, 0 14px, 0 calc(100% - 14px), 0 100%;
4줄을 완성했다!
2. 점선으로 된 테두리가 상하좌우 있다.
지금까지의 과정을 잘 이해했다면 이번 것도 감이 잡힐 것이다.
1번 디자인에서 4개의 점선을 만들었었다.
여기서 2개의 점선은 각도를 넣지않고, 양옆 끝에 세우면 된다.
세워진 점선 한 개를 만들어보자.
단계는 다음과 같다.
1. 50%는 검정색, 50%는 투명한 이미지를 만든다.
2. background-size를 줘서 너비는 1px, 높이는 30px로 만들어서 얇게 그리고 반복되게 만든다.
3. y축으로만 반복되게 하면, 줄무늬 완성!
1. 50%는 검정색, 50%는 투명한 이미지를 만든다.
각도를 넣지 않고 만들면, 위의 50%는 검정색이고 아래는 투명할 것이다.
위와같은 linear-gradient가 만들어질 것이며 이걸 background-image에 넣자.
background-image: linear-gradient(black 50%, transparent 50%);
2. background-size를 줘서 너비는 1px, 높이는 30px로 만들어서 얇게 그리고 반복되게 만든다.
1번 디자인과 다르게, 너비가 1px 높이는 30px로 둔다 당연히 세워진 점선이기 때문이다.
따라서 background-size: 1px 30px; 라고 써주자. 당연히 너비가 더 긴 줄무늬가 생겨있을 것이다.
반복되었기 때문!
3. y축으로만 반복되게 하면, 줄무늬 완성!
세워야하기 때문에 x축으로의 반복은 없앤다.
따라서 background-repeat: repeat-y; 라고 써주자. 그러면 성공적으로 줄무늬가 생겼을 것이다.
이제 원래 하려고 했던 디자인을 해보자.
먼저 처음 2개의 선을 90도 회전시킨 선으로 만들고, 나머지 2개는 회전시키지 않은 선으로 만들자.
따라서
background-image: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(black 50%, transparent 50%), linear-gradient(black 50%, transparent 50%);가 된다.
이제 background-size를 주자.
회전시킨 선은 너비 30px의 높이 1px, 나머지는 너비 1px에 높이 30px을 줄것이다.
따라서
background-size: 30px 1px, 30px 1px, 1px 30px, 1px 30px;가 된다.
다음은 필요없는 반복을 지울것이다.
회전시킨 선들은 y축으로의 반복이 필요가 없고, 나머지 선들은 x축으로의 반복이 필요가 없다.
따라서
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
가 된다.
이것만 해놨으면 당연히 '┌ '모양의 선들만 생겼을 것이다.
따라서 회전시킨 선들은 맨 위, 맨 아래로 놓고, 나머지는 맨 왼쪽, 맨 오른쪽으로 놓겠다.
그럼
background-position: 0 0, 0 100%, 0 0, 100% 0;라고 할 수 있다.
이제 점선테두리의 박스가 완성됐다.
3. 비스듬하게 선이 그어져있는 테두리가 위 아래로 있다.
이번에는 비스듬한 선을 linear-gradient가 아니라, repeating-linear-gradient를 사용할 것이다.
왤까? linear-grandient도 이미지를 반복해서 채울텐데, 작성자가 몰라서 안 하는게 아닐까?
아쉽게도 작성자는 알고있기 때문에 이 글을 쓴다.
먼저 저 이미지대로 만들기 위해서, linear-gradient를 45도 각도에,
검정색을 0~1px, 투명색을 1~12px로 줘보겠다.
그리고 background-size를 12px 5px로 줘보겠다.
그럼 너비 12px 높이 5px짜리 이미지가 x, y축으로 반복될것이고, 여기서 y축은 필요없으니
background-repeat는 repeat-x로 주겠다.
완성된 css코드는 다음과 같다.
background-image: linear-gradient(45deg, black, black 1px, transparent 1px, transparent 12px);
background-size: 12px 5px;
background-repeat: repeat-x;이렇게 만들면 화면에 허무한 점선이 뜬다.
맙소사 생각했던 반복 이미지가 아니다. 너비 5px짜리 점선만 생긴것이다.
덕분에 점선을 만드는 방법을 발견했지만, 생각했던 이미지가 아니었다.
왜 이런 결과가 나왔을까?
그건 linear-gradient자체가 저 작은 점 이미지이기 때문이다.
사실 점은 아니다. 세모인데, 너무 작아서 점처럼 보이는 것이다.
linear-gradient의 검정색을 0~10px, 투명색을 10~20px만큼 줘보면 더 확실히 보인다.
이제 repeating-linear-gradient에 45도 각도에 똑같은 검정색과 투명색을 줘보겠다.
감이 잡히는가? 그냥 linear-gradient는 검정색 0~10px, 투명색 10~20px이 끝나면 나머지를 모두 투명색으로 채운다.
그래서 왼쪽 아래 세모만 보이는 것이다.
repeating-linear-gradient는
처음의 10~20px까지의 투명색이 끝나면 다시 검정색을 10px 그리고 투명색을 10~20px을 끝없이 적용한다.
그래서 우리는 repeating-linear-gradient를 적용해야한다.
아까 사용했던 css코드인
background-image: linear-gradient(45deg, black, black 1px, transparent 1px, transparent 12px);
background-size: 12px 5px;
background-repeat: repeat-x;에서 linear-gradient앞에 repeating만 붙이고, background-size를 100% 5px로 바꿔보자.
줄무늬가 생겼다. 투명색의 간격만 조금 좁히면 완벽할것 같다.
따라서 투명색을 1~4px까지만 주고 똑같은 줄무늬 하나 더 만들어 위 아래 배치시키면 된다.
코드는 다음과 같다.
background-image: repeating-linear-gradient(45deg, black, black 1px, transparent 1px, transparent 4px), repeating-linear-gradient(45deg, black, black 1px, transparent 1px, transparent 4px);
background-size: 100% 5px, 100% 5px;
background-repeat: repeat-x, repeat-x;이제 줄무늬 배경도 만들 수 있다.
후기
사실 위 코드는 사이트에 들어가면 똑같이 있는 코드다.
다만 저 코드를 이해하면서, background-image부터 repeating-linear-gradient까지
참 여러가지 css에 대해 깊이 이해할 수 있었던 것 같다.
이 사이트는 노마드코더에서 css layout클래스를 들으면 나오는 사이트인데,
강의에서도 다루지 않는 내용이라, 좀 오기가 생겼던 것 같다.
이해하고, 직접 정리까지해보니 참 뿌듯하다. 물론 읽는 사람들이 잘 이해했을지는 미지수지만..
여러사람에게 도움이 되었으면 하는 마음에 블로그에 글을 적어본다.
'Web > CSS' 카테고리의 다른 글
| [CSS] 믿었던 rotateZ의 배신 (0) | 2021.12.17 |
|---|---|
| [CSS] position: absolute로 가운데에 놓기 (0) | 2021.07.28 |