HTML5 & CSS3 : border 태그, background 속성

2022.10.11.

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

---

Review


요즘은 학원에서 평가지를 작성하는 일이 잦아서 진도가 느리게 진행되고 있다.
오히려 다행인 건가 싶다.
코딩을 시작하고는 서칭을 하면서 더 나은 코드를 사용하기 위해 고민하는 시간이 많아졌다.
욕심이 많아졌달까?
포트폴리오도 만들고 싶고 빨리 자격증도 따고 싶고 ㅠ_ㅠ
개발자로서 공부하고자 하는 욕심이 많은 것은 너무 좋은 것이지만,
취업에 대해서는 침착하게 준비해야지 머리로는 알지만 사실은 걱정이 많이 된다.
학원에서 다음 달부터 취업 상담이 시작된다고 하는데, 이런저런 생각이 많아졌다.
지금은 주어진 공부를 충실히 하는 것이 우선이라고 생각하는데 자꾸 조급한 마음이 든다.
앞으로는 주말에 계획을 세우는 시간을 가지고 차근차근 공부해 준비해나가려고 한다.

파이팅 !!!

---

 

 

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

<border 태그 예제>

 

border-style로 설정할 수 있는 것을 p 태그로 나열했다.
p 태그는 블록 레벨 요소이다. 즉, 줄바꿈이 일어날 것이다.

class를 부르는 식별자는 .class 라고 적어준다.

 

style 태그 란을 보면 3줄로 쓸 수 있는 것을 첫번째 줄 한 줄로 요약해 작성했다.

만약 style 태그에 p 태그와 class 선택자를 함께 적어놓으면 class 선택자가 우선이다.

 

사각형의 가로, 세로, 그리고 테두리 두께, 테두리 색상을 p 태그 style을 설정했다.

실행해보면 위와 같이 나타난다.
solid는 실선, dotted는 점선, dashed는 파선, double은 2줄로 된 선이다.
none은 말그대로 선이 없는 것이다.

 

 

mix는 border-style은 없고, 적용하고 싶은 style을 여러 개 작성하면 된다.
웹 페이지로 확인하면 위, 오른쪽, 아래, 왼쪽 이런 순서로 border-style이 적용된 것을 볼 수 있다.

 

 

groove는 테두리가 바깥쪽은 어둡고 안쪽은 밝게 보이도록 한다.

 

반대로 ridge는 테두리의 바깥쪽은 밝게, 안쪽은 어둡게 나타난다.

inset은 왼쪽과 위쪽은 어둡게, 오른쪽과 아래쪽은 밝게 나타난다.

outset은 반대로 오른쪽과 아래쪽은 어둡게, 왼쪽과 위쪽은 밝게 나타난다.

 

round는 style을 먼저 끊기지 않는 실선 solid로 설정한 다음,
border-radius를 20px로 설정했더니 위와 같이 나타났다.

만약 border-radius를 20px 30px 이런 식으로 설정하면 왼쪽부터 시계방향으로 타원으로 수치가
적용된다. 수치는 4개까지 설정할 수 있다.

 

예제 완성

 

만약 border-top-right-radius 값을 50px로 크게 설정한다면 오른쪽 위만 확실히 다른 곳에 비해
둥글게 변한다.

 

---

W3Schools Online Web Tutorials

W3Schools Free Online Web Tutorials

선생님께서 개발에 필요한 프로그래밍 언어에 대한 이론을 배울 수 있는 사이트를 소개해주셨다.
들어가보니 온통 영어라서 이게 뭐지? 했는데 오른쪽 마우스로 빈 공간을 클릭해보면
한국어로 번역할 수가 있었다.

 

 

HTML을 배우면서 헷갈리는 것이 많았는데, 이론이 카테고리 별로 자습서처럼 잘 정리 되어있어
사이트를 활용해보면 좋을 것 같다.

 

사이트 내에 편집기가 있어 직접해보면서 즉각적으로 확인할 수 있다.
이용해보니 단점은 알파벳이 자동완성이 되지 않아 일일이 다 작성해야한다는 불편함이 있다.

 

---

<a 태그 예제>

 

a 태그는 인라인 레벨 요소를 가지고 있어서 줄바꿈이 일어나지 않는다.
만약 줄바꿈을 주고 싶다면 a 태그 맨 끝에 <br> 이라고 입력해주면 줄바꿈이 일어나게 된다.

 

'&nbsp' 라는 것은 공백을 표시하는 언어이다.
원래 VScode에서는 스페이스 바를 눌러서 아무리 띄어쓰기를 해도 한 개의 공백만 인정하기
때문에, 공백이라는 것을 알리려면 '&nbsp' 를 활용하면 된다.

 

---

<background 속성 파헤쳐 보기>

 

p class 선택자를 이용해 이름을 설정하고 5개를 나열했다.
.bg1 이라고 선택자를 불러 background-color를 설정했더니 위와 같이 나타났다.

 

 

p 자체의 style 태그에 height 값을 더 크게 설정했더니 위와 같이 background가 더 넓게
설정되었다.

 

 

bg2도 마찬가지로 설정했다.

 

 

rgba 라는 것은 빨간색, 녹색, 파란색을 조합하여 색을 만든다.
각 영역은 0에서 255까지의 수로 표현한다.
마지막은 alpha 값은 투명도인데 0부터 1 사이의 수치를 적어주어 투명도를 조절하는 것이다.
0.5는 반쯤 투명한 색상을 뜻한다.

hsla 라는 것은 Hue, Saturation, Lightness, 즉, 색상, 채도, 명도를 나타낸다.
- Hue : 360도의 색상환으로 나타낸다. 0도는 빨강, 120도는 초록, 240은 파랑이다.
- Saturation : 0에서 100%로 표현한다. 0일수록 채도가 낮고, 100이 채도가 가장 높다.
- Lightness : 0에서 100%로 표현한다. 0은 검정, 100은 흰색이다.

 

background-image는 항상 url을 적어 경로를 알려주어야 한다.
내가 넣고 싶은 이미지 경로를 적어주면 위와 같이 나타나게 된다.

 

만약 이미지를 반복되게 설정하는 것을 해제하려면
background-repeat: no-repeat 이라고 적어주면 이미지가 하나만 나타나게 된다.

 

bg6, bg7에 각각 background-size를 cover와 contain으로 설정해 차이점을 확인했다.

cover는 가로, 세로 중 큰 값에 맞추고,
contain은 가로, 세로 중 작은 값에 맞춘다.

 

 

bg9, bg10, bg11에 각각 background-size를 round, space, unset으로 설정해 차이점을 확인했다.

round는 틈이 없이 들어가게 만드는데,
space는 시작과 끝에 background를 놓고 그 안에 알아서 여백을 주면서 이미지를 반복적으로 채우는 것이다.
대신 비율을 깨지지 않는다.
round와 space는 너비의 영향을 받지만, unset은 너비의 영향을 받지 않는다.

unset은 round와 space의 장점만 가져다 놓은 것이라고 생각하면 된다.
너비의 영향을 받지 않으면서 이미지 비율도 깨지지 않는다.

 

---

 

background-attatchment를 fixed로 설정하면 스크롤로 내려도 이미지는 계속 고정이 된다.

 

background-position을 center로 설정하면 이미지가 화면의 중앙에 위치하게 된다.
0-100%로 설정할 수도 있는데, 만약 50%로 설정하면 딱 중앙으로 설정된다.

 

 

background-position: left bottom 실행 결과

background-position을 left bottom으로 설정하게 되면 말그대로 이미지가 왼쪽 아래로
내려간다. 화면을 크게 키워보면 정확하게 확인할 수 있다.

 

---

 

 

background-clip에는 속성이 border-box, content-box, padding-box 3가지가 있다.
요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정한다.

- border-box : 테두리에서부터 시작하는 것이다.
- content-box : content, 즉 내용물이 있는 곳에서부터 시작하는 것이다.
- padding-box : padding에서부터 시작하는 것이다.

모두 실행해보면 위와 같이 나타난다.

 

backgound-origin에도 속성이 border-box, content-box, padding-box 3가지가 있다.
배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정하는 것이다.

- border-box : 배경을 테두리 박스에 상대적으로 배치한다.
- content-box : 배경을 안쪽 여백 박스에 상대적으로 배치한다.
- padding-box : 배경을 콘텐츠 박스에 상대적으로 배치한다.

---

<응용 예제 실행하기>

 

내 정답

이런 식으로 background-image를 여러 개 넣는 예제를 실행했다.
이미지가 작은 것부터 크게 보일 이미지 순으로 나열해야한다.
그래서 꽃 이미지 2개를 먼저 작성하고, 그 다음 paper 이미지를 놓았다.

나는 div 태그를 이용했는데, 아직 수업에서 div 태그를 배우지는 않았다.
div 태그는 쉽게 말해서 공간을 구분하는 태그이다.
div 태그에 대한 자세한 내용은 나중에 수업에서 배우게 되면 작성하겠다.
div 태그를 만들어 그 안에 h1, p 태그를 넣어 만들었다.

style 태그에는 image 순서대로 background 속성들을 작성하면 된다.
위에 작성한 대로 따라해보면 원리가 이해될 것이다.

나는 이미지를 여러 개 넣으면 오류가 날 줄 알았는데 신기하게 각각의 이미지 속성을
중복해서 작성하면 적용이 된다. 너무 신기하다.

 

선생님 정답

아직 div 태그를 배우지 않았기 때문에, 선생님께서 알려주신 정답은 ul 태그를 이용하는 것이었다.
ul 태그 안에 h1 태그만 삽입해주면 된다.
나머지는 내 정답과 동일하다.

이번 예제는 머리를 조금 굴려야 하는 예제였다.
네이버로 여기저기 검색하면서 코드를 작성해보니 완성할 수 있었다.

 

 

 

*이미지 출처
Instagram : @esom_