1)div와 span의 차이

div는 한 줄을 차지하는 태그이고 span은 컨텐츠의 크기만큼만 공간을 차지한다.

2) img : 이미지 삽입 img태그는 속성 값인 key와 value로 이루어져 있고 닫는 태그가 없다.

3) a : 링크 삽입

이렇게 클릭할 수 있는 버튼이 만들어진다.

target 속성을 사용하지 않으면 기존 창에서 연결되어 있는 링크로 이동하게 되는데 target을 사용하여 _blank를 사용하면 새창에서 열 수있다.

4) ol,ul,li : 리스트

ol태그는 ordered list의 약자로서 각각의 li태그들에 순서대로 넘버링을 부여한다.

ul태그는 unordered list의 약자로서 각각의 li태그들에 bullet mark를 붙여준다.

5) input, textarea : 다양한 입력 폼

input태그는 박스를 하나 만들어주는데 type에 따라 입력할 내용을 어떤 것으로 입력할지 정할 수 있다.

태그에 type을 password로 해서 추가하면

이렇게 비밀번호를 입력할 수 있는 박스가 하나 더 만들어지고 입력하면 안보이도록 …으로 출력되는 것을 볼 수 있다.

또한 div태그를 이용해 좀 더 깔끔하게 만들 수 있다.

6) type=”radio

이 속성을 사용해도 체크박스를 만들 수 있지만 checkbox와 차이점은 둘중 하나 혹은 셋중 하나만 체크할 수 있다.

7) textarea 태그는 줄바꿈이 가능한 입력 폼을 생성한다.

8) button 태그는 버튼을 생성해준다.

HTML 구조를 담당하는 MarkUp 언어

1. CSS(스타일)

디자인 요소를 시각화하는 스타일 시트 언어

1. JavaScript(상호작용)

단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 만들어 주는 프로그래밍

1. 웹개발 과정

기획자가 와이어 프레임을 구성하고 HTML로 작성합니다. 이후 디자이너가 만든 디자인을 구현하기 위해 CSS로 작성하고 기능 구현을 위해 JavaScript로 작성합니다.

1. HTML

HTML은 문서의 틀을 만드는 언어이며

HyperText Markup language의 약자이다.

HTML은 들의 집합이고 는 부등호로 묶인 HTML 기본 구성요소이다.

HTML은 이렇게 트리구조로 되어 있으며 부모태그, 자식태그로 구성된다.

HTML 태그는 정말 다양하게 있지만 모두 외울 필요는 없고 주요 태그들만 기억하고 있으면 원할하게 사용가능 하며 문법적인 부분에 집중하도록 하자.

1. Self-closing tag

태그 내부에 내용이 없다면 와 같이 표현될 때 와 같이 표현가능하다.

1. Most used tags in HTML

회고에 대하여

회고에 대해 생각해본 것은 이번이 처음이다. 직역하면

앞으로 나아가기도 바쁜데 회고는 무슨...이라고 생각했는데 스터디 시작하고 같이 열심히하는 동료의 회고를 보고 자극받아서 나도 작성해보기로 했다.

스터디모임 개설

4월 11일 부트캠프 시작하고 혼자서 공부하자니 바로 다음날 미라클모닝 스터디를 개설했다. https://www.notion.so/codestates/12-12-f691e9ed396948b5ae5fdab65981567f?pvs=4 이렇게 공고도 열심히 작성해서 올려보고 개설해서 얻고 싶었던 것은

• 나는 미라클모닝을 시작하고 너무 긍적적인 효과를 받아서 다른 분들에게도 알리고 싶었다!

• 마음이 흔들릴 때 책임감을 가지고 있으면 좀 더 다잡고 공부를 할 수 있을 것이라 생각했다.
• 이루고자 하는 의지가 강한 사람들이 모여서 만드는 시너지를 만들고 싶었다. (함께할 팀원을 구하는 것도 덤!)

대부분의 사람들이 아침에 일어나는 것을 힘들어 하는 것을 알아서 모집에 시간이 걸릴줄 알았는데 스터디 개설한지 하루만에 8명이 모였던게 신기했다.

의외로 다들 마음 한켠에 미라클모닝을 하고 싶다는 생각들이 있었을지도 모르겠다. 그리고 아침을 어떻게 활용할 것인지 미션도 정했더니 다들 열심히 올려주셨다

같이 밤늦게까지 공부하면서 매일매일 잘 일어나고있는 크루들한테 감사했던 부분이다.

😱부족했던 부분

부트캠프를 시작하기 전으로 돌아보면 나름 공부해서 시작하겠다고 이것저것 보이는대로 다 주워먹었던 것 같다.

근데 문제는 부트캠프가 시작하고 분명 머리로는 저게 답이란 것을 아는데 설명을 못하는 나 자신을 발견했고 소홀했던 개념 부분에 좀더 집중해서 공부해야겠다고 느꼈다. 그래도 그렇게 부트캠프 시작하기 전에 공부하고 시작한 프로젝트 팀에서 배운 큰그림들이 새록새록 기억나면서 개념습득에는 크게 어렵지 않았었던 것 같다.

추가로 CSS도 많이 안해본 티가 팍팍났었다 요소를 중앙에 보내는게 어찌나 힘들던지... 하다가 이건 아니다 싶어서 다시 공부하고 CSS로직을 다시 복습해서 이제는 만드는 재미를 느끼게 되었다!

😎앞으로

이제 세션2가 시작되고 지금까지 배웠던 것들 보다 더 어려운 개념들을 배우는데 무작정 넘어가지 않고 개념을 확실하게 잡고 넘어가야겠다고 다짐했다.

다음 회고엔 좀 더 체계적으로 작성해보도록 하자!

Continue