HTML5 & CSS3 : 팝업창 만들기, text-shadow, box-shadow, a 태그

2022.10.20.

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

---

Review


벌써 국비 과정을 들은지 2달이 다 되어간다.
오늘은 예제가 많아서 재밌게 공부했다.
이론을 물론 알아야겠지만 직접 해보면서 익히는게 최고인 것 같긴 하다.
아직 너무 어렵긴 하지만 하나씩 배워가는 기쁨이 있다.
선생님께서도 학생들의 건의 사항을 듣고 하나 둘씩 개선해나가시는 걸 보고 감사하게
생각하고 있다.
국비 과정을 들을 때 선생님을 잘 만나는 것이 중요하다고 들었는데 다행이라고 생각한다.
열정이 넘치셔서 덕분에 더 열심히 해야겠다는 의지가 생긴다.

필라테스 학원에서의 일은 점점 적응해나가고 있다.
직접 회원님들 상담도 하고 있고 계약서도 쓰고 정산도 하고 청소도 열심히 하고 !
원장님과 선생님들도 다들 잘해주셔서 너무 좋다.

파이팅 - !

---

 

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

 

p 태그 안에는 또 다른 p 태그를 넣을 수가 없다.
그래서 span 태그를 넣었는데, 직접 그 안에 style을 지정할 수 있다.
span 태그로 style을 지정한 부분만 font color가 빨간색으로 바뀌었고,
span 태그는 인라인 요소이기 때문에 줄바꿈이 일어나지 않았다.

 

p 태그 안에 span 태그로 style을 줬더니 CSS에서 p에 준 style은 span 태그가 들어가지
않은 부분에만 적용된 것을 볼 수 있다.
직접 style을 지정하는 것이 엄청 강력한 것이다.

 

div 태그 안에 a 태그를 넣어 링크를 만들어주었다.

---

<text-shadow와 box-shadow 알아보기>

1. text-shadow
- 문법 :
text-shadow: offset-x | offset-y | blur-radius | color;

- 속성값
: offset-x는 그림자의 수평 거리를 정한다.(필수)
offset-y는 그림자의 수직 거리를 정한다. (필수)
blur-radius는 흐림 정도를 정하는데, 값을 정하지 않으면 0이다. (선택)
color는 그림자의 색을 정한다. 값을 정하지 않으면 브라우저 기본값이다. (선택)

2. box-shadow
- 문법 :
box-shadow: x-position | y-position | blur | spread | color | inset

- 속성값
: x-position은 가로 위치이다. 양수는 오른쪽에, 음수는 왼쪽에 그림자가 만들어진다. (필수)
y-position은 세로위치이다. 양수는 아래쪽에, 음수는 위쪽에 그림자가 만들어진다. (필수)
blur는 그림자를 흐릿하게 만든다. 값이 클수록 더욱 흐려진다.
spread는 양수는 그림자를 확장시키고, 음수면 축소시킨다.
color는 그림자의 색을 정한다.
inset은 그림자를 요소의 안쪽에 만든다.

 

 

 

text-shadow는 만약 5px 10px 5px #000; 이렇게 설정하면
순서대로 오른쪽거리 아래쪽거리 흐림도 색상 순으로 들어간다.

양의 값은 오른쪽 아래로 내려가는 그림자가, 음의 값은 왼쪽 위로 올라가는 그림자가
생성된다.

그림자를 여러 개 넣으려면 ',' 콤마 라는 식별자를 넣어서 이어 작성하면 된다.

box-shadow는 블러 속성을 가지고 있고 가로 shadow다.
box-shadow는 퍼짐 정도를 가지고 있지만, text-shadow는 퍼짐 정도를 가지고 있지 않다.

 

span:hover 란 span 태그에 마우스를 올렸을 때 나타나는 상황을 뜻한다.
마우스를 올렸을 때 밑줄이 나오도록 text-decoration을 underline으로 설정하면 된다.
cursor도 pointer로 두어 마우스를 올리면 마우스 커서가 손바닥 모양으로 보이도록 했다.

---

<a 링크 예제>

 

id class로 먼저 전체를 감싸는 div를 만들어주고, 그 아래에 문단 태그인 p 태그 2개를
먼저 작성한다. 안에 a 태그를 삽입해 최종 경로가 #new1, #new2인 링크로 만들어주고,
그 아래에 p id class를 작성해서 링크를 눌렀을 때 new content1, new content2 라는
문구가 나오도록 만들었다.

그러고 나서 CSS에서 body에 background를 넣고, #wrap라는 문법으로 wrap id class를
불러 width, margin, background를 설정하면 위와 같이 나타난다.

#new1, #new2에서 display: none이라고 한 것은 일단 그에 해당하는 문구를 숨겨준 것이다.

링크를 눌렀을 때의 상태를 'target' 이라고 하는데 이제 target 상태에서 문구를 보이도록
만들려고 한다.

 

#new1:target은 new1이 target 상태가 되었을 때를 말하는 것인데, 그때 display: block;을 줘서
'new content1' 문구가 보이도록 한다.

이제 클릭을 해서 target 상태가 되면 아래에 new content1 문구가 나타난다.

 

target의 style을 따로 지정해주었다. 상태의 속성을 지정할 때는 ' : ' 콜론을 앞에 함께
적어주어야 한다. target이 되면 border도 생기고 background도 생기도록 했다.

 

#new2의 target도 서식을 넣어 위와 마찬가지로 'jump to new content2' 링크를 누르면
아래에 'new content2'가 나타나도록 했다.
하지만 동시에 target이 나타나게 할 수는 없다.
각각 눌러서 하나씩 나타나게 하는 것만 가능하다.

---

 

#new1:target ~ span은 연산자 '~' 을 사용했다.
이 뜻은 new1 id class에 인접한 span 태그를 모두 지정하겠다는 말이다.
즉, 인접 선택자를 뜻하는 연산자는 '~' 라고 생각하면 된다.

그런데 span 태그는 인라인 속성인데 target 된 상태에서는 줄바꿈이 일어난다.
왜 그럴까?
display: block; 으로 뒀기 때문이다.

 

 

#new1:target + span은 연산자 '+' 을 사용했다.
이 뜻은 new1 id class에 인접한 span 태그를 모두 지정하겠다는 말이다.
이는 형제 선택자를 뜻하는 말이다.

---

<a 태그 응용 예제>

 

위의 예제처럼 이 상태에서 Link1, Link2, Link3을 눌렀을 때 밑의 문구가 하나씩 나오도록
만들 것이다.

전체를 감싸주는 wrap인 div를 만들어주고 하위에 a 태그로 3개의 링크를 만들어주었다.
하위에는 링크를 누르면 h3 태그와 p 태그가 뜨도록 또 다시 id class를 사용했다.

우선 CSS에서 #link1, #link2, #link3을 지정해 링크를 누르기 전에는 문구가 나오지 않도록
display: none;으로 두고, target 상태가 되었을 때는 보이게 하기 위해 display: block; 으로
두면 아래와 같이 나타나게 된다.

 

Link1 눌렀을 때

LInk2 눌렀을 때

LInk3 눌렀을 때

 

---

<팝업창 만들기 예제>

 

- HTML
: 제일 상단에 a 태그로 #popup 이라는 경로를 가진 'Open Modal' 이라는 링크를 만들어주고,
밑에 id가 popup인 div를 만들어준다. div 안에 id와 class를 함께 작성할 수 있다.
하위에 팝업창이 될 div를 'dialog'라 칭하고, 또 그 하위에 content div를 만든다.
content div에서 header, section, footer로 나누어주었다.
그러고 나서 각각에 원하는 문구를 넣어주면 된다.
header 태그에는 'X' 를 누르면 창이 닫히도록 해야하기 때문에, a 태그를 이용해서
링크로 만들어주고 나서 안에 close 라는 class 선택자까지 넣어준다.

- CSS
: #은 id class를 부르는 것인데, pop id class를 부르고 팝업창이 될 div를 position: fixed를
이용해 왼쪽 상단에 고정시켜주었다.
그런 다음, background를 설정해주면 위와 같이 나타난다.

이는 팝업창을 켰을 때, 팝업창의 뒷 배경화면의 style을 설정한 것이다.

width, height 값을 모두 100%로 줬더니 background가 꽉 찼다.

 

 

이번에는 .dialog에서 팝업창이 어느정도로 뜨게할 건지 설정했다.
width 값은 80% 정도로만 주고 background를 설정한 후 margin: 0 auto로 가운데 정렬이
되도록 했다.

이제 수직 정렬을 시켜야 하는데 어떻게 해야할까?

 

정답은 flex 속성을 이용하면 된다.
#popup에서 display: flex; 를 주고, align-items: center;로 설정했더니 수직의 가운데로 맞춰졌다.

 

그런데 애써 수직 정렬을 시켰던 것이 클릭했을 때 다시 위로 올라가버린다.

.dialog에 있던 코드를 .content로 보내고,
.dialog에서는 height 값을 설정해야만 align-items: center;가 먹힌다. 당연한 것이다.
높이가 있어야 수직 정렬이 될 것이 아닌가 -

#popup에서 display: none;으로 설정해 링크를 클릭하기 전에는 보이지 않도록 설정한다.
그런 다음, #popup:target 이라 지정하여 target 상태가 되었을 때 display: block;으로 두어
링크를 클릭했을 때 팝업 창이 보이게 한다.

 

이제 'Open Modal' 링크를 클릭했을 때 popup 창이 보이도록 해야하는데,
header와 footer를 함께 설정하면 되는데 먼저 background를 넣고,
font color는 흰색으로 설정했다. section에도 background를 넣어줬다.

 

 

그런데 'X'가 header 태그 하위에 있어서 높이 조절하기가 애매해 close class 선택자를
content div 바로 하위로 옮겼다.
그러고 나서 각각에 원하는 padding, margin 값을 넣어주면 된다.

 

 

그러면 이렇게 팝업창이 뜬다 !

오늘 배운 bow-shadow도 넣으려고, .content에서 box-shadow를 작성해주었다.
나는 양의 값으로 설정해서 오른쪽 아래로 그림자가 드리워진 것을 볼 수 있다.

 

 

예제 완성

저기 'X'에 밑줄 뜨는게 싫어서 .close에서 text-decoration: none;을 해주니까
밑줄이 사라졌다.

진짜 완성 - !

지금 X를 누르면 팝업창이 없어지긴 하는데, 실제로 이전 창으로 돌아가고 그런 것은 아니라고 하셨다.
그것까지 구현하려면 다른 프로그래밍 언어를 더 배워야 한다고 한다.

너무 배우고 싶었던 팝업창 만들기. 재밌당 !

---

<display: table; 알아보기>

 

 

display: table;로 놓게 되면 하나의 표로 봐서, vertical-align: center; 로 수직 정렬을 시킬 수 있고,
text-align: center;도 적용할 수 있다.

---

 

<귀여운 button 만들기 예제>
: 사실 선생님이 보여주신 완성 이미지와는 다르게 만들긴 했지만,
마녀사냥에서 나오는 그린라이트가 생각나서 이렇게 만들었다.


Font Awesome

Font Awesome

위의 사이트로 들어가서 원하는 Icon을 다운 받을 수 있다.

버튼 누르기 전

버튼 누른 후

이 예제는 fontawesome font와 연관 되어 있고, 설명이 복잡해서 코드만 공유하도록 하겠다.
일일이 직접 해보고 확인하면서 설정한 것이라 설명이 복잡하다.

---

<map 태그 알아보기>

그림판을 이용해 좌표를 확인할 수가 있다.

 

 

 

위의 동그라미는 Daejeon의 위치이고, 밑은 Jeju의 위치이다.
클릭하면 각각의 시청 홈페이지로 이동하게 된다.