개발일지 210629

학습한 내용

HTML tag 리스트 및 종류 확인 가능 사이트
w3scools.com



★중요포인트★

이것은 약속이니까... 외우자...찡긋

Inline 글자가 한 줄로 출력

  <span>Inline</span>
  <span>Inline</span>
  <span>Inline</span>

공간에 대한 크기를 설정할 수 없음
.margin(오브젝트를 옮기고자 할 때 사용) 사용할 수 없음
-> 상하 배치 작업할 수 없읍

Block 글자줄바꿈이 일어남

 <h1>Block</h1>
 <h1>Block</h1>
 <h1>Block</h1>

공간에 대한 크기를 설정할 수 있음
margin(오브젝트를 옮기고자 할 때 사용) 사용 가능-> 상하 배치 작업 가능





홈페이지 만들 때 고려할 점

  • 옮기는 횟수를 얼만큼 줄일 수 있느냐 (css관련)
  • 비슷한 성격을 가지고 있는 콘텐츠를 한 공간(div)에 모을 수 있는가!
    ( 이미지는 이미지, 글자는 글자대로 묶는 랩핑작업 )
  • 집을 짓는 것처럼 기반을 잘 다져야 무너지지 않고 튼튼하게 유지할 수 있음!

이미지 세팅작업 https://placeholder.com/
(이미지를 정하지 않은 상태에서 이미지 크기 및 대략적인 너낌쓰를 볼 때 임시로 넣음)




실습 코드

github 링크




학습한 내용 중 어려웠던 점 또는 해결못한 것들

span과 p의 차이가 무엇일까라는 생각이 들었다.

코드 링크 첨부를 위해 깃허브를 쓰려고 하는데 왜 안되는지...
gitbash 3시간째 헤매고 있음. 왜 push!!! 가 안되냐고!!!!!!!!

해결방법 작성

선생님에게 질의응답을 하려고 했는데 다른 분도 나와 같은 질문을 하셨다.
덕분에 이해가 되었습니다.
p는 문단을 작성할 때, span은 글자를 꾸며줄 때 주로 사용!
그리고 p는 줄바꿈이 가능하고 , span은 줄바꿈 없이 lnline

깃허브 깃배쉬와 밤새도록 싸워도록 하겠음.. 안되면 컴퓨터 한 대 때릴 예정

학습소감

아직은 정리가 빨리 되지 않아서 자괴감이 살짝 든다 ㅠㅠ
홈페이지 사이트들 코드보면서 이런 구성이구나.. 하며 감을 익혀야겠다.

좋은 웹페이지 즐겨찾기