Javascript가 아닌 처음으로! 다른 언어에 대해 학습했다.
웹페이지를 시각적으로 구성하는데 쓰이는 html과 css는, 정적인 언어이다. 말 그대로 view의 구성과 디자인만! 책임지는 언어로, 함수를 실행시킴으로써 무슨 동작을 한다던가 하는 동적인 실행을 할 수 있는 언어는 아니다. 하지만 우리가 실제로 사용하고있고, 원하는 것은 우리가 뭔가 클릭하거나, 엔터키나 키보드를 누르는 등 이벤트를 주었을때, 그에 맞게 무엇인가 시각적으로 변하는 동적인 웹페이지이다.
바로, 이를 가능케하는 것이 Javascript다!
HTML / CSS / Javascript가 항상 묶여다는 이유가 여기에 있었다. 웹페이지의 (정적인) view를 html과 css로 구성하고, 이를 동적으로 꾸며주는 것이 Javascript이다.
비로소 나는, 프론트엔드의 첫 발걸음을 떼었다! (듀근..)
-
Twitter의 '클론'을 만들어보는 장장 3주짜리 스프린트를 시작했다.
-
첫 1주는 html과 css를 이용해 twitter와 비슷하게 web view를 구성한다.
-
html은 크게 head, body, footer로 나누어 작성한다. head에는 페이지가 가지는 속성을 설정하고, body에는 실질적으로 내가 구성하고 싶은 화면, footer에는 맺은말처럼 페이지 하단에 명시해야 할 것들로 구성한다.
3-1. body부터 집중적으로 얘기하자. 내가 대부분 사용했던 태그들은,
- text 삽입 : div, span, 글을 문단으로 묶을 수 있는 p
- input 태그: <input type="button"/"textbox" />
- ul & li 태그 : 리스트를 구성할 수 있는 태그이다. 보통 unordered list 태그인 ul과 하나하나의 리스트를 나타내는 li를 함께 사용한다고 한다.
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
</ul>3-2. 각각의 태그들에 고유한 id 또는 공통적인 속성을 줄 수 있는 class를 부여할 수 있다.
태그 속에서 style="" 구문으로 디자인을 줄 수도 있지만(파일이 너무 더러워 보인다.),
css로 깔끔하고 정돈된 디자인 속성을 주기위함과 나중에 Javascript로 DOM(다음 시간에 배운다.)을 조작하기 위해서는, id나 class를 미리 부여하는 것이 정신건강에 좋다. ㅎㅎㅎ
4. CSS는 html로 구성한 텍스트, 버튼, 박스 등 tag로 이루어져있는 요소들에 부여되어 있는 id와 class를 데려와 그에 대해 디자인 속성값을 주는 언어이다. html의 head 부분에서 css 파일을 연결하는 link태그를 보면,
link rel="stylesheet" type="text/css" media="screen" href="css파일이름.css"
이런식으로, 외부파일인 css파일을 stylesheet로 사용할거라고 연결해준다.
4-1. css는 방대하고 방대하다. 너무나 많은 속성값들이 존재해서 원하는 디자인 하나를 만들어내기 위해 검색을 타고 타고 들어갔다. jesus,,,,
4-2. 그래도 꽤.. 재미있는 속성들이 많다. 쉽게 접근가능한 color, font-size, font-family, margin, padding 등..
4-3. 그 중 까다로운게 있었다. position이라는 속성인데,
position: 1)static / 2)relative / 3)fixed / 4)absolute / 5)sticky 다섯가지의 조금 까다로운 속성들이 있다. Ha.. 복잡하다.. ㅎ
이 글 볼때마다 한 번씩 복습해줘야겠다.. ㅎㅎ ( mdn reference : CSS/position )
