블로깅 재밌네요 : )
* 오늘의 주제 : HTML, CSS
-
HTML으로 Element를 적재적소에 배치하고 CSS로 style을 추가할 수 있으며 만든 결과물을 javascript를 이용해 기능을 추가할 수 있다.
-
HTML에서 ‘ML’은 markup language로 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.(위키백과 - 'HTML')
-
HTML의 구조와 문법
- opening tag, closing tag, self-closing tag ?
: <, > 부등호 표시로 tag를 나타내며, 주요 태그는<head>, <body>, <footer>, <p>, <img>등이 있으며 기본적으로 태그는 </ ~~ > 이처럼 /, 슬래시로 tag를 닫아주는 closing tag가 필요하다. 예외적으로<img>tag는 closing tag가 필요 없는 self-closing tag이다.
- opening tag, closing tag, self-closing tag ?
-
자주 사용되는 HTML 요소(element)
-
div, span element
:<div>: division의 약자로 content 분할 요소입니다.<div>요소는 display 속성이 block이기 때문에 다음 요소(element)가 옆에 오지 않고 아래에 오게 됩니다.:
<span>은 구문 요소로 display 속성이 inline으로 양옆에 inline 속성의 요소들이 오면 줄을 바꾸지 않고 옆에 위치한다. 기본적으로 span의 크기(height, weight)는 content의 크기이다.
-
ul, ol, li element
:<ul>: unordered list의 약자로 순서가 필요 없는 list를 만들 때 쓰는 요소이다.<ul>태그만으로 list를 만들 수 없으며<ul></ul>tag 안에<li>element를 추가해 list를 추가해야 한다.:
<ol>: Ordered list로 순서가 있는 list이다. 마찬가지로 혼자서 list를 만들 수 없고 tag 안에<li>element를 사용해 list를 만들 수 있다.:
<li>: list의 약자로 방금 test 해봤는데<ul>,<ol>tag와는 다르게 그 자체만으로 bullet이 표시되며 browser에 나타나게 된다. (<ul>tag 사용했을 때와 똑같이 나옴) -
input!
: input type의 종류는 아주 많고 type마다 주어진 속성이 있기 때문에 다 외울 수는 없고 어떤 type이 있는지 mdn에서 찾아보고 들어가서 원하는 속성을 사용하면 된다.기본적인 type에는 한 줄의 text를 작성할 수 있는 <input type : “text”>,<input type : ”password”> 는 우리가 비밀번호를 작성할 때 글자가 그대로 안 드러나게 하는 type이다. 또한
<input type = “checkbox”>, <input type=“radio”>등이 있으니 다음에 HTML을 다룰 수 있는 새 블로그를 작성하려고 합니다 : )
-
-
추가해서 CSS의 속성, border-box와 content-box의 차이 등을 배웠으니 블로그에 소개하는 글을 작성하도록 하겠습니다🤩
* 오늘 느낀 점
- 혼자 하는 과정일 때 단체 Zoom 방에 들어가서 다른 분들과 같이 공부하면서 스케줄을 잘 지키며 하루를 보내는게 좋겠다고 생각함
- 체력 관리를 잘해서 피곤하지 않게 몸 관리 잘하기
