HTML5 & CSS3 : background, gradient 속성, div 태그, float/clear 속성

2022.10.12.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 19

---

Review


 요즘 코딩에 너무 재미를 느끼고 있다.

그런데 앞으로 배울 것이 산더미라는 것도 함께 느끼고 있다. 선생님의 수업을 따라가지

못할 때가 종종 있어 서칭을 하면서 블로그에 기록도 하고 머리 속에 정리하고 있다.

float 속성이 나오고부터는 이게 뭐람? 이해도 안되고 자꾸 내 맘대로 되지 않아서

정말 많이 찾아보고 공부했다. 

 

선생님께서 예제를 던져주고 혼자 만들어보는 시간을 많이 주시는 편인데,

다른 분들께서는 이런 수업을 마음에 들어 하지 않으시는 것 같다.

단체 활동이다보니 한 사람에게 포커스를 맞출 수 없으니 수업 방식에도 정답이 없는

것 같긴 하다.

 

나는 나름대로 만족하고 있다.

혼자 해보다가 도저히 안되면 한번씩 질문하고, 서칭도 해보고 하니 이런 방법도 있구나

혼자 터득하는 경우가 많아서 좋다.

머리는 아프지만 그래도 배우는 건 늘 재밌다.

앞으로도 파이팅해야지 -

 

 

---

 

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 19

<background 예제>

: 어제 배운 background 속성을 이용한 응용 예제를 실행했다.

 

 

width 값을 퍼센트로 주면 웹 페이지를 드래그 해서 가로를 늘리고 줄일 때 그에 맞게 border와
Text가 조절된다. 그에 맞게 Fit 하게 변한다고 해야하나. 설명이 어렵다.

 

img src 태그를 이용하지 않고 background-image를 이용해 이미지를 삽입했다.
img src 태그를 이용하면 text 옆, text 위에만 위치시킬 수 있기 때문에, background-image를 사용하는
것이 낫다.
우선 background-repeat을 no-repeat으로 설정하고,
background-position을 80% top으로 설정하면 body 부분부터 오른쪽으로 80% 정도 간 위치에 이미지가
들어가게 된다.
아까 width 값을 퍼센트로 준 것처럼 background-position도 퍼센트로 주게 되면,
이전처럼 가로로 늘리고 줄일 때마다 그에 맞게 Fit 하게 변한다.

 

 

확장 프로그램인데, 'htmltagwrap' 이라는 편리한 프로그램이 있다.
왼쪽 옵션 바에서 5번째 아이콘을 선택하면 프로그램을 검색할 수 있다.
설치 후 사용하면 굉장히 유용할 것이다.

묶고 싶은 text를 드래그로 선택하고 Alt + W를 누르면 자동으로 <>가 양 옆에 작성되어 완성된다.
만약 '에탄올' 이라는 단어를 굵은 text로 하고 싶다면 에탄올이란 단어를 드래그로 선택한 뒤,
Alt + W를 누르면 <p>에탄올</p> 라고 자동 완성된다. 그러면 p를 b로 바꿔주기만 하면 된다.

텍스트와 관련된 태그를 정리했다.

- b 태그 : 텍스트 굵게
- strong 태그 : 중요한 텍스트 굵게
- em 태그 : 강조 텍스트
- small 태그 : 작은 텍스트
- sub 태그 : 아래 첨자 텍스트
- sup 태그 : 위 첨자 텍스트
- del 태그 : 삭제 된 텍스트
- ins 태그 : 밑줄 텍스트
- i 태그 : 기울임 꼴 텍스트
- mark 태그 : 형광펜처럼 표시된 텍스트

 

텍스트에 사각형 background를 설정하기 위해 h1, h2, h4 태그에 background-color를 설정하고,
여백을 주기 위해 padding 값도 설정했다.

다음은 새롭게 배운 것인데, background를 반만 보이게 만드는 것이다.
여기서 h1과 h2의 일부만 회색 사각형을 반으로 보이도록 할 것이다.
그런데 h2 태그가 3개가 있기 때문에, 3개 중 2개에 식별자를 설정한다.
나는 h2 class="half" 라고 설정했다.
그러고 나서 style 태그에서 h1, .half 라고 부른 뒤, width: 50%로 설정하면 위와 같이 나타난다.

너무 재밌당... 알고 나면 더 재밌는 코딩 >_<
머리는 아프지만..

 

text와 관련된 태그를 더 추가해 예제를 완성했다.
굉장히 나무위키스러운 예제였다 ㅋ_ㅋ

 

예제 완성

---

<ul, li 태그 예제>

 

이건 너무 쉽다.
ul 태그 안에 li 태그를 넣으면 검정색 점과 함께 list가 만들어진다.

 

 

style 태그에서 li 태그에 list-style을 넣어주기만 하면 된다.

 

 

 

 

이전에 실행했던 예제에서 조금 더 진행해보았다.
나는 아까 li 태그에 list-style을 설정했는데 부모 태그인 ul 태그에 설정하는 것이 더 좋다고
알려주셨다.
안 그러면 나중에 li 태그에 background까지 넣으면 리스트마다 background가 들어간다.
그런데 ul 태그에 background를 넣고 list-style까지 설정하니 background가 제대로 보이지
않게 된다.
그래서 body 태그와 ul 태그로 나눠 설정했다.

body 태그에 background 이미지를 삽입하고 size까지 설정한 뒤,
ul 태그에 padding과 margin을 설정하면 위와 같이 변한다.

 

 

예제 완성

---

<background 예제>

 

background-image를 삽입해 높이를 설정해주면 이미지의 크기가 커지고,
background-color를 회색으로 넣어주면 이미지를 제외한 나머지 부분이 회색으로 보이게 된다.
background-attachment를 fixed로 설정하면 스크롤을 해서 내려도 background 이미지가
고정된다.

 

 

background-position을 center로 지정하면 위와 같이 변한다.

 

주석 처리한 부분을 한 줄로 요약할 수 있다.
background 한 단어만을 이용해 color, image, repeat, attachment, position, size 모두 설정할
수가 있다. background 단축 속성이다.

 

 

---

 

<linear-gradient 예제>

 

id는 style 태그에서 #을 먼저 적고 id 이름을 grad1을 작성해야 한다.
background 단축 속성을 이용해 linear-gradient를 작성해 선형 그라디언트를 넣는다.
linear-gradient () 이렇게 작성하고 괄호 안에 넣고 싶은 색상을 작성한다.
그러면 위와 같이 나타난다.

- linear-gradient : 선형 그라디언트
- radial-gradinet : 방사형 그라디언트
- repeating-radial-gradient : 방사형 그라디언트 반복

 

linear-gradient (to right, red, blue)으로 설정한다는 것은
각도나 방향을 오른쪽으로, 색상은 red에서 blue로 그라디언트를 넣겠다는 말이다.

 

 

- grad3 : -45도로 설정한 것은 3시에서 9시 방향이고, red에서 blue로 가는 그라디언트이다.
- grad4 : 50%까지는 완전한 red, 75% 지점까지는 red와 blue, 90% 지점까지는 blue와 green,
마지막 10%는 완전한 green으로 들어간다.
- grad 5 : rgba는 빨강, 녹색, 파랑, 알파값이다. 색상의 불투명도를 수치로 설정하게 되는 것인데,
여기서는 red의 불투명도는 1에서 0으로 설정한 것이다.
- grad6 : 10%까지는 red와 blue, 20% 부터는 green으로 들어가게 된다.

 

- grad7 : 방사형 그라디언트를 넣어 중심부터 red에서 blue로 가는 그라디언트이다.
- grad8 : circle을 적어주어 원형 모양으로 설정했고, red에서 blue로 가는 그라디언트이다.
- grad9 : 원형 모양, 10%까지는 red, 50% 까지는 red와 blue, 나머지는 blue
- grad10 : 원형 모양, 10%까지는 red와 blue, 20% 부터는 green으로 들어가는 그라디언트인데,
그라디언트가 반복적으로 들어가게 된다.

 

---

<radial-gradient 예제>

: 우선 이론을 정리하자면, 원의 중심을 지정할 수 있다.
문법은 background: radial-gradient(모양, 크기 at 가로%, 세로%) 이런 식으로 작성하면 된다.

원의 크기를 지정하는 속성에는 4가지가 있다.

 

 

원의 크기 속성

원의 크기를 지정하는 속성은 너무 헷갈려서 다른 분의 블로그 글을 참고하며 머리 속에 정리했다.


이제 예제를 실행해보자.

 

 

 

 

 

시작점 자체를 가로 30%, 세로 20%로 지정하고 시작한다.
radial-gradient, 즉 방사형 그라디언트로 설정되었다.

- grad1 : 시작점에서부터 yellow, red, black 순으로 들어가는 방사형 그라디언트이다.
- grad2 : 가장 먼 corner에서부터 그라디언트가 들어간다.
- grad3 : 가장 먼 side에서부터 그라디언트가 들어간다.
- grad4 : 가장 가까운 corner에서부터 그라디언트가 들어간다.
- grad5 : 가장 가까운 side에서부터 가야 된다.

시작점을 가로 50%, 세로 50%인 center로 지정하고 시작한다.
radial-gradient, 즉 방사형 그라디언트로 설정되었다.

- grad6 : 가장 가까운 corner에서부터 그라디언트가 들어간다.
- grad7 : 가장 가까운 side에서부터 그라디언트가 들어간다.

마지막은 conic-gradient인데, 원뿔형 그라디언트이다.

- grad8 : from 90deg는 시작을 90도에서부터 시작하라는 뜻이고, yellow를 0도에서 90도로,
red를 90도에서 180도로, blue를 180도에서 270도로 들어가는 그라디언트이다.

 

---

The ultimate CSS tools for web designers | CSSmatic

The ultimate CSS tools for web designers | CSSmatic

 

만약 그라디언트가 너무 만들기 힘들다 하면 그냥 위의 웹 페이지에서 만들어 소스를 복사해
쓰면 된다.
그라디언트 말고도 CSS에 관련된 여러 정보들이 제공되니 참고하면 좋을 것 같다.

 

---

<div 태그 예제>

: div 태그는 division의 약자로 웹 사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용한다.
div 태그를 이용하여 각각의 공간을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다.
특히 요즘은 레이아웃 배치를 거의 div 태그를 활용해 구성하는 추세이기 때문에 아주 중요하다.

div 태그의 속성에는 style, width, height, border, background-color, float, margin이 있다.

- style : div 태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수 있게 해준다.
<div style="">
- width : div 태그의 가로 크기를 정해준다. px 또는 %로 설정할 수 있다.
- height : div 태그의 세로 크기를 정해준다. px 또는 %로 정할 수 있다.
- border : div 태그의 테두리 굵기를 정해준다. 숫자가 클수록 굵기가 굵어진다.
- background-color : div 태그의 배경 색상을 정하는 속성이다.
- float : div 태그의 정렬(좌,우)를 정하는 속성이다. 가운데 정렬은 안된다.
- margin : div 태그의 정렬 기준을 끝에서부터 여백을 주는 속성이다.
margin-top, margin-bottom, margin-left, margin-right

 

 

div 태그를 이용해 코드를 작성해보았다.
정확하게 확인하기 위해 width 값을 설정하고 border로 테두리를 설정했다.

 

 

div 태그는 블록 레벨 요소라 줄바꿈이 일어났는데,
display를 inline-block으로 설정해 옆에 나란히 놓이도록 만들었다.

 

 

div class를 하나 만들어서 margin을 0 auto로 주었더니 center로 간 것을 볼 수 있다.
즉, margin을 0 auto는 center라는 뜻이다.

각 태그에 class 속성을 넣는 이유는 각 태그를 구별해주기 위함이다.
각 div 마다 다른 효과를 줄 수 있는 nth-child 같은 CSS 속성도 있지만 한계가 있기
때문에 각 태그마다 class 속성을 넣어서 구분해주는 것이 좋다.

div 태그를 가운데로 정렬하는 CSS 코드는 내가 배운 것 중에는 2가지가 있다.
- margin: 0 auto
- text-align: center

---

<div 태그 예제>

 

div class를 이용해 wrap 이라는 이름으로 만들어주고,
그 wrap div안에 p 태그 하나, div 태그 2개 더 작성했다.

 

 

wrap div에 widht와 height를 설정하고 background 까지 설정하니 위와 같이 나타났다.

 

 

child1 class에서는 width: auto로 설정한 뒤, margin과 padding, border, background까지 설정했다.
margin을 0, 50px로 설정하면 왼쪽, 오른쪽을 0으로 설정하고 위, 아래는 50px로 설정한 것이다.
padding와 border-width도 마찬가지이다.

여기서 중요한 것은 width: auto 라는 말은 width: 100%가 아니다.
내용물의 크기에 맞춰 자동으로 크기가 조절되는 것이다.
여기서는 auto로 설정했는데, 400px 한도 안에서 margin, padding, border 등이 모두 들어간 것이고,
100%로 주는 것은 text 자체가 400px이고 margin, padding 등은 별도로 text 양 옆에 들어가게 된다.

위의 이미지는 auto로 설정한 것이라 400px의 background 안에서 child2 class 속성이 모두 들어간 것이다.

 

child2 class에서는 width 값을 100%로 주었더니 text 자체가 400px 크기만큼 늘어나고,
margin, padding, border 등은 별도로 들어간 것을 확인할 수 있다.

width: auto와 width: 100% 의 차이점을 확인할 수 있다.

contents class에서 width를 100%로 설정하고, max-width를 1200px로 설정한 것은
웹 창이 1200px보다 작으면 가로를 100%로 다 쓰고,
1200보다 크면 가로 크기가 1200px 이상으로 늘어나지는 않는다는 뜻이다.


div 태그가 중요한 만큼 겁나게 어렵다 호에엥 ㅠ_ㅠ

 

---

<div 태그 응용 예제>

 

 

예제 완성 : 내 정답

우선 div로 구역을 3개로 나눈 뒤, style 태그에서 각각 설정을 해주는 방식으로 풀이했다.

그 다음은 div style에서 width와 height 값을 400px로 설정했다.
div를 첫째, 둘째, 셋째로 나눠 background-color부터 넣었다.

div들을 가로열 배치 및 가운데로 오도록 정렬시키려면 display를 flex로 설정하고
추가로 justify-content를 center로 설정했다.

마지막으로 border가 문제였는데, body 태그에 border를 넣으니 가로 전체에 border가 들어가고,
div에 넣어주니 각각의 div마다 border가 들어가서 결국은 코드를 복잡하게 만들어버렸다.
각각의 div에 border-left, border-bottom 등 이런 코드를 사용해 결국은 예제를 완성하긴
했지만 찝찝하다. 선생님 정답을 확인해야지....

 

예제 완성 : 선생님 정답

내 정답과 선생님 정답은 아주 많이 달랐다.

우선 부모 1개, 자식 3개를 만든다.
wrap이라는 부모 div class를 하나 만들어주고, 그 안에 자식인 div를 3개 만든다.

style 태그에서 wrap에 저 사각형 테두리를 먼저 넣어줄 것이다.
그러고 나서 width 값을 1200px로 넣어주고,
border를 설정해주고 가운데 정렬시키기 위해 margin: 0 auto로 설정한다.

overflow는 콘텐츠 내용이 박스 크기를 초과할 때 처리하는 방법을 지정할 때 사용한다.
속성값으로는 visible, hidden, scroll, auto 4가지가 있다.
- visible() : 기본값 박스 아래쪽에 초과된 내용이 계속 나타난다.
- hidden : 박스 크기를 초과한 내용은 잘려서 보이지 않는다.
- scroll : 스크롤 바가 있어서 초과한 내용을 볼 수가 있다. 박스의 크기가 커진 경우에도
항상 스크롤 바가 있는 것을 볼 수 있다.
- auto : 콘텐츠 내용이 박스를 초과한 경우, 스크롤 바가 나타난다. 박스의 크기가 충분하면
스크롤 바가 사라진다.

여기서는 overflow: hidden 으로 설정해 박스 크기를 초과한 내용은 숨겨지도록 했다.

그러고 나서 wrap div 안에 있는 div 전체의 style 태그를 작성한다.
우선 width와 height 값을 400px로 하고 float은 left로 설정하고,
자식 div 3개의 style에 background-color를 각각 넣어준다.

그러면 위와 같이 사각형이 나란히 놓이게 되고 예제는 완성이다 !


그런데 여기서 더 나아가, 반응형을 구현하기 위해 선생님께서 몇 가지 더 알려주셨다.
웹 창을 늘렸다 줄였다 할 때 그에 맞춰 사각형이 작아지고 늘어나도록 하는 반응형을
알려주셨다. 조금 어렵긴 한데 정리해보자.

wrap style에서 width를 100%로 설정한다.
또 wrap div 안에 자식 div style에서 width를 100%의 3등분을 한 33.333%로 설정한다.
그러면 웹 창을 늘렸다 줄였다할 때 사각형도 함께 늘어났다 작아졌다 조절된다.

그런데 여기서 사각형이 1200px 이상이 되면 더이상 늘어나지 않도록 설정하려면
max-width 속성을 사용하면 된다.
max-width를 1200px로 설정해서 웹 창이 1200px보다 작으면 사각형도 작아지고,
1200px보다 크면 사각형이 더이상 늘어나지 않도록 설정한다.

그러면 진짜 완성이다...
마지막 반응형은 나중에 정말 중요한 것이라 미리 알려주셨다고 하는데 넘나 어려운 것
흑흑 슬플 뿐이다ㅠ_ㅠ

---

<float 속성 정리>

: 요소의 위치를 잡을 때 아주 중요한 역할을 하는 style 속성이다.
이미지와 텍스트를 함께 배치할 때, 웹 페이지의 레이아웃을 잡을 때 유용하다.

float은 자석처럼 끌려 오는 성질을 가지고 있다.

- float: none은 기본값, 원래 상태이다.
- float: left는 div 안의 복수 개의 div는 수직 정렬인데 이것을 수평 정렬로 바꾼다.
자신을 포함하고 있는 박스의 왼편에 떠 있도록 한다.
- float: right는 자신을 포함하고 있는 박스의 오른편에 떠 있도록 한다.

float된 요소는 부모 div 안에서 가장 왼쪽이나 오른쪽으로 이동한다.
위쪽이나 아래쪽, 중앙으로는 float 할 수 없다.


<clear 속성 정리>
: clear 속성은 div 간 잘못된 CSS 간섭 적용을 막아주는 역할을 한다.
float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소
아래로 내려가게 할 수 있다.

- clear: none은 기본값, 아래로 이동되지 않도록 한다.
- clear: left는 float이 left인 요소의 아래로 내려가겠다는 의미이다.
- clear: right는 float이 right인 요소의 아래로 내려가겠다는 의미이다.
- clear: both는 float이 left 및 right인 요소의 아래로 내려가겠다는 의미이다.
* clear: both로 지정해주게 되면 float으로 인해 받는 영향을 깔끔하게 전부 제거할 수 있다.

 

*이미지 출처
Instagram : @inmyflora

 

*내용 출처
: CSS 그라데이션 효과 : 네이버 블로그 (naver.com),
CSS_그라데이션 효과로 배경(linear-g.. : 네이버블로그 (naver.com),
[CSS]06.Float속성overflow:(.. : 네이버블로그 (naver.com),
[HTML5] div 태그, 이렇게 하면 마스터할 수있어요! | 여유로운 사람의 블로그 (lifeblog.co.kr)