[HTML & CSS] 01. 입사지원서 만들기 (feat. html 기초적인 문법 활용)

 

1️⃣ 이번 회차 학습 목표 (goal)

---

1. 만들고자 하는 것

• 입사지원서 만들기
  • 최종 결과물
    • 

• 그 이전 수업은 보충 해야 함.

 

2️⃣ 입사지원서 만들기

---

1. 우선 작동하는 코드 파일

 

1) 과제하면서 어려웠던 부분

a) table 과 table 사이를 띄우기

• 문제상황
  • 이렇게 잘 안 띄워졌음.

• 문제 원인
  • 하나의 table 태그 안에, 다 다 넣으려 했었음.

• 해결
  • 각 table 태그에 하나의 표를 넣고
  • 빈 공간도 table 에 넣어주는 방식으로!
  • 

• 생각해볼 지점
  • 음... 근데... 이게 맞는건지 모르겠다... 눈치로 한 느낌...

b) 셀 안에 빈 공간 만들기

• 문제 상황
  • 만들어야 하는 건, '공란' 인데, 아무것도 안 넣으면, -> 쪼그라들었음.

• 원인
  • 뭔가를 쓰면 -> 칸이 유지되고,
  • 뭔가를 안 쓰면 -> 칸이 사라졌음.
  • 그래서, 뭔가를 쓰되, 의미없는 값을 넣으면 -> 칸이 유지된다고 생각함 -> 그래서 null? 같은게 없나 찾아봄

• 첫 번째 방식
  • &nbsp 태그 를 써서 -> 빈 공간을 줘봤음.

• 두 번째 방식
  • tr 태그의 속성으로 style = "height : 25px" 넣어주기

• 생각해볼 것
  • 이게 tr 태그 에 style 속성을 넣은게 맞나?
  • 그러면, style 다음에 있는 "height : 25px" 이건 어떻게 읽어야 하지? 😥😥😥😥😥

c) 중첩을 이중으로 하는게 조금 어려웠음.

• 문제 상황
  • 

• 다시 해볼 필요 있을 듯.

d) 옆으로 살짝 삐져나오는 게 어떻게 해결해야 할지 몰랐음.

• 문제상황
  • 
• 감으로 때려 맞추긴 했지만, 부족하다고 생각함. 📛📛📛

e) 사진 넣는거

• 
• 음... 다시 하면 익숙하게 되려나.

f) 📛📛📛 지원분야

• 문제상황
  • 셀 하나 당 높이를 넓게 하는 부분에서, 어려움을 느낌
    • 

• 시도해 본 것
  • 두 개의 셀을 병합해서 -> 텍스트를 가운데로 오게 하기?
    • 🟥 음... 잘 안 되는 느낌이었음. 다시 해봐야 할 것 같음
  • 저 테이블 자체에 height 를 걸어주는 것.
    • 📛📛📛 (되기만 하고, 이해를 못 함.)

<!-- 입사지원서 및 지원분야  -->
<table style="border-collapse: collapse; height: 100px;">

2. 수업 필기 사항

1) 단축키

• vs code 에서 작성한 것 실행시키기
  • 라이브 서버? 라는게 깔려 있어야 함.
  • 아직 어케 까는지 모르겠음. 😥😥😥😥😥

alt + l > o (알파벳 o)

• 블록지정한 코드 -> 추가하기

alt + shift + 화살표 아래로 

2) 태그

a) div 태그

• div 를 쓰면 -> 재활용 할 수 있음. ⭐⭐⭐⭐⭐
  • 중요하다고 생각함.
  • 그런데, 뭔가 기능을 아직 제대로 모르는 느낌임.
• div 의 id 는 고유함 ❓❓❓❓❓
  • 잘 모르겠음.

b) a 태그

• 아직 잘 모르겠음.

c) ol 은 항상 li 와 붙어다님.

• 부모 자식 관계의 예시 였음.
• ol, li 는 아직 잘 모르겠음.

• 수업은 살짝 이런 류의 코드인데, 보완필요 📛📛📛
  • 

d) img 태그

<!-- 포스터 = 이미지 태그 -->
<img src="#content > div.article > div.mv_info_area > div.poster > a">
<img src = "이미지의 파일 경로, 주소 입력" alt="정상적으로 불러와지지 않았을 때 나오는 텍스트 문구">

✅ 추가로 해야할 것

---

• week01_day01 수업 한거 복습해야 함 (구글 드라이브 참고)
• week01_day01 중 오전에 한것들 복습 해야 함
  • 슬램덩크 이미지 가져오는 거! 해야 함.
• 오늘 과제한거 다시 읽어보기

🤟 What i learned

---

• 픽셀을 딱딱 맞추는게 디자인 스럽다고 느껴졌음. 오와열을 보면서 맞추는 재미가 있었음.
• 다만, 그 과정이 굉장히 비효율적인 것 같은데, 효율적으로 해줄 수 있는 뭔가가 있기를 기대함.

---

참고자료

• KGA경일게임아카데미블록체인과정_WEEK01_HTML

---