HTML5&CSS3 : div 태그 예제

2022.10.13.

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

---

Review


으악 div 태그 너무 헷갈린다 !!!!!!!!!!!!!!!!!!!!!
float 속성은 더 헷갈린다.... 그렇지만 너무 중요해보여서 열심히 파고들고있다.
그래도 프론트엔드라서 눈으로 볼 수라도 있지, 백엔드 개발자 분들 정말 존경스럽다.
보이지 않는 싸움.... 정말 천재들 ㅠ_ㅠ
눈은 피로한데 너무 재밌다. 색 쓰는 것도 재밌고 뭔가 장난감 가지고 노는 기분이랄까?
포토샵, 일러스트보다 코딩이 훨씬 재밌는 것 같다.
예제를 풀면서 쉬는 시간인지도 모르고 계속 해결해내려고 몰두하게 된다.
힘내야징-

오늘은 원장님께서 퇴근 후 필라테스 수업을 또 한번 듣게 해주셨다.
자꾸 이런 기회를 주셔서 감사할 뿐이다.
두 번째로 듣게 되었는데 정말 사지가 찢기는 기분이었다...
복부 운동을 할 때는 정말 눈물이 찔끔나고, '2번 더 갈게요' 라는 말을 들었을 때는
정말 화가 났다 하하하 :-)

수업이 끝나고 선생님께서 허리는 아프지 않느냐고 물어보셔서 허리는 안 아프고
배가 너무 땡긴다 라고 하니 그럼 너무 잘한거라고 말씀하셨다.
배뿐만 아니라 전신이 다 아팠지만 그래도 운동 제대로 한 것 같아서 뿌듯했다.

공부도 운동도 열심히 해야지 -
체력을 길러야 공부도 하니까 열심히 달려보려고 한다.
당장은 헬스할 여력이 없어서 엑스포 공원에 가서 조깅을 할 계획이다.
파이팅 !

---

 

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

<div 태그 응용 예제>

 

 

예제 완성

어제 배운 div 태그에 대한 예제를 실행했다.
너무 헷갈린다 으악

우선 div class 선택자를 이용해 a 라는 선택자로 묶어주고, 그 하위에 b 라는 선택자를
만들어준다.
그러고 나서 a style 태그에 width 값을 80% 정도로만 설정하고,
max-width를 1200px로 둬 1200px 이상으로는 커지지 않게 설정했다.

margin: 0 auto로 하여 중앙으로 가도록 하고, text-align을 center로 잡아 text가 가운데
정렬 되도록 했다.

b style 태그는 a 상위 요소의 width가 80%이니, a 크기의 30%로만 보이도록 설정했다.
text-align은 left로 줘 왼쪽 정렬이 되도록 했다.

간단해 보이는데 꽤나 머리를 굴려야 하는 예제였다.

---

 

예제 완성 : 내 정답

 

응용 예제를 실행했다. 자꾸 혼자 예제를 실행해보면서 이론을 정리하는 시간을 가지는 것 같다.
나는 background로 사진을 넣었는데, 선생님께서는 img src 태그를 사용하셨다.
천천히 내 정답을 풀이해보겠다.

1. 우선 a 라는 div로 감싸주도록 했다.
하위에 b와 c 라는 하위 div를 2개 더 만든 후, 원하는 문구를 삽입했다.

2. a style에서 width, background-color를 먼저 설정하고, margin: 0 auto를 해서 중앙 정렬시켰다.
c style에서는 text-align을 center로 설정한다.
b style에서는 background-image를 넣고 난 뒤, background-size를 설정한다.
여기서 image의 원하는 width 값과 height 값도 설정해주어야 한다.

3. background-image를 먼저 왼쪽으로 보내려고 float: left로 설정해주었고,
text도 image 옆에 두기 위해 float: left로 설정했다.

4. 여백을 주기 위해 b style과 c style에서 margin을 10px씩 넣어줬다.

그러면 완성 - !

예제 완성 : 선생님 정답

선생님 정답은 조금 더 깔끔하다.
선생님은 div class 선택자에서 img src 태그를 이용해서 이미지를 삽입한 것이다.

1. 개발자들은 부모 div 이름을 wrapper로 많이 쓴다고 한다.
그래서 wrapper 라는 부모 div로 묶어주고 하위에 left, right 라는 div를 2개 더 만들었다.
그러고 나서 원하는 문구를 작성한다.

2. wrapper style은 나의 정답과 비슷한데, 차이점은 margin을 넣었으니 대신에 padding
(안쪽 여백)을 이용해 여백을 넣은 것이다.

3. .left img는 삽입한 이미지의 style을 설정하는 것인데, width 값을 100px로 주니 이미지
사이즈가 확 줄었다.

4. left style에서 float: left로 설정해 이미지를 왼쪽으로 붙여주고, margin을 줘서 바깥
여백을 넣었다.

5. 마지막으로 wrapper style에서 text-align을 justify로 설정하면 text가 양쪽 정렬이 된다.
그럼 좀 더 깔끔하게 변한다.

완성 !

---

 

 

 

예제 완성

1. 6개의 사각형처럼 보이는데, 6개의 사각형 전체를 감쌀 부모 div 태그 1개,
1,2번 div 각각 1개씩, 그 다음 3,4,5번을 감쌀 div 태그 1개, 3,4,5번 div 각각 1개씩,
6번 div 1개 총 8개의 div를 만든다.

2. .wrapper style에서 width 값을 80% 정도로 지정해주고, margin: 0 auto로 설정해
가운데 정렬 되도록 했다.

3. 차례로 one, two, wrap1, three, four, five, six의 style을 지정해주었다.
width 값은 부모의 가로가 총 80%이니 각각 80%에서 가로 너비를 어느정도로 할 건지
%로 지정해주고, height 값도 각각 지정한다.

4. wrap1 style에서는 3,4,5번 박스들이 가로로 정렬되도록 하기 위해,
display를 flex로 설정해주었다.

그러면 위와 같이 완성된다.
그리 어렵지는 않은 예제였다. width의 %만 잘 설정해주면 될 것 같다.

 

---

 

 

 

예제 완성

이건 조금 골치가 아팠던 예제다. 중앙으로 가지 않아서 엄청난 서칭을 거쳐...완성했다.

*border-radius : 사각형을 둥글게 만들어 주는 CSS 속성인데, 왼쪽, 위, 오른쪽, 아래의
시계 방향으로 수치를 작성하면 된다.

1. 전체를 감싸는 부모 div를 1개 만들고 나서, 하위 div를 2개 만들어 문구를 작성했다.
2. wrapper style은 전체 width 값을 설정하고, margin: 0 auto로 설정해 가운데 정렬했다.
3. left style은 border-radius를 이용해 사각형을 둥글게 만들어줬다.
padding값도 주어 안쪽 여백을 넣었고, text-align을 이용해 text를 왼쪽 정렬을 시켜줬다.
float도 left로 하여 왼쪽으로 붙도록 만들었다.
4. right style도 마찬가지다. border-radius를 이용해 사각형 style을 지정해주고,
float을 left로 하여 left 사각형 옆에 붙도록 만들었다.

*이미지 출처
: Vincent van Gogh, Green Wheat Field (detatil)