대구 ai스쿨의 html 두번째 수업을 시작했다. 이번 수업은 본격적으로 홈페이지를 뜯어보며 틀을짜는것을 중점적으로 해보았고, 실제 웹사이트들의 index들을 열어 비교해보았고, 이전에 수업했던 내용까지 간략하게 요약 및 복습하는 시간을 가졌다.
1) 학습한 내용
Inline 요소와 Block 요소
- Inline
- Block
inline요소는 같은 줄안에서 글자가 출력된다.
독립적인 공간을 가질 수 없으며, 상하배치작업이 불가능하다.
block요소는 그 출력값을 출력할때 줄바꿈이 일어나며, 독립적인 공간을 가질수있다.
css값을 줘서 상하배치작업이 가능하다.
두 요소는 웹사이트의 레이아웃에 영향을 미친다.
웹 사이트의 기초공사
우리가 너무나도 쉽게 접하는 네이버, 다음, 구글, 쇼핑몰들은 모두 공통적으로 HTML이 사용되며 그 HTML형식 또한 전혀 다른모습의 웹사이트 이더라도 뼈대는 모두 비슷한 모양으로 응용한모습들이 보였다.
강사님께서는 네이버와 다음 카카오톡 친구목록 본인이 직접 만드신 웹사이트를 가지고오셔서 그 기초공사를 간단하고 쉽게 알려주셨다.
가장 중요한 것은 얼마나 견고하고 단단하게 만드느냐 였는데,
건축과 마찬가지로 기초공사가 부실한 웹사이트는 후에 어떠한 작업들이 가미될때 쉽게 무너지고 허물어진다고 배웠다.
Input 는 타입의 종류를 바꿔서 다양하게 사용가능
Main 태그는 항상
<main role=“main”>
와 같이 ‘role’ 을
같이 사용해야된다.
Section
타이틀 정보가 있어야되기 때문에
“h1 ~ h5” h태그를 삽입을 해주어야한다.
Article
신문의 본문의 정보를 담아내는 구역 같은것
이것도 마찬가지로 그구역을 나타내는 타이틀 정보가 있어야한다.
Aside
본문과 관련 떨어지는것들 위주로 작성
Footer
웹사이트의 하단을 맡는 태그(네비게이션바도 이안에 들어감)
웹사이트 초기공사시 사용할 수 있는 좋은 팁
초기에 디자이너가 사진작업을 할때 그 빈공간을
via.placeholder.com 사용해 이미지칸에 임의적인 빈사진 채우기
강의내내 실습했던 웹사이트의 설계도면 or 초기공사부분은
github에 올려두었다.
대구 ai스쿨 실습 자료
2) 학습내용 중 어려웠던 점
이해가 안되는 부분보다는 새로알게된 것들을 기억하는것들이였다.
section 과 arcticle 의 쓰임새가 너무 흡사해서 알아보았지만, 아직 웹사이트의 전반적인 진도가 안나가서 문자로는 이해가 되어도 체감되진 않았다.
input 태그의 활용도가 굉장히 많다는 것을 알게 되었다.
3) 해결방법
조금이라도 의심되면 구글링을 했다.
물론 영어로 구글링하는것이 정확하고 좋은 습관이지만, 현재로서는
관련성이 높은 단어들을 추리고 한글도 사용해서 구글링하고있다.
4) 학습소감
사실 예전에 얕게나마 HTML강의를 들은적이 있었는데, 매번 배울때마다 새롭고 알고있다고 넘어갔던 부분들도 잊고 있었던 내용이 많았다. 계속해서 시대가 바뀜에 개발자는 끊임없이 공부해야된다는것을 오늘 공부하면서 조금 체감했다.
