목록웹프로그래밍/멋쟁이 사자처럼 5기 (5)
뭐라도 배우면 기록하자
지난 포스팅에 이어서 front-end에 대해서 포스팅 하려고 합니다. 특히 css부분이 많이 어려워서 css관련 강의 듣고 복습을 하다보니 front-end쪽으로만 포스팅을 진행하게 되었습니다. 저도 css가 참 어렵던데요. 여러가지 이유가 있겠습니다만 잘못돼도 에러가 안나는 것이 가장 css를 어렵게 하는 것 같습니다. 잘못되면 뭘 잘못했는지 알려줘야지 안알려주더라구요 ㅎ;; 여하튼 css를 잘 짜기 위해서는 기본이 탄탄해야겠죠? 탄탄하게 해야할 기본이 바로 레이아웃이라고 합니다. (화면의 구조라고 생각하시면 편할 것 같네요) css를 짜다 보면 종종 레이아웃이 무너지는 경우가 있는데 이는 박스를 잘못 사용했을 확률이 굉장히 높다고 합니다. 여기서 박스란 html요소를 뜻하고 css에서는 모든 htm..
마크업이란 간단하게 html을 작성하여 사이트 화면을 꾸며주는 것으로 이해하겠습니다! html을 작성할 때 보면 흔히들 하는 실수들이 있는데요. 경험이 적다보니 초창기에는 숙지하고 html을 작성하면 도움이 될 것 같습니다. 1. html에 lang속성 값을 주자 lang은 language를 의미합니다. 사이트가 한국어라면 한국어를 쓸거야 라는 것을 알려줘야겠죠? html문서를 작성할 때는 맨 위에 doctype을 써줘야 하는데요. 이는 document type의 약자로 '내가 이제부터 작성할 문서는 어떤 문서야'라고 알려주는 부분입니다. 저는 html 문서를 작성할 것이기 때문에 html임을 알려주고 웹 사이트의 주된 언어가 한국어라서 ko라고 썼습니다. 주된 언어가 영어라면 en라고 쓰시면 되겠습니다..
HTML(HyperText Markup Language) html은 사이트에 어떤 콘텐츠를 보여줄지 정하는 언어입니다. html은 보라색으로 나온 tag와 흰색으로 나온 각 tag의 attribute로 구성되어 있습니다. tag는 이 콘텐츠가 글인지, 이미지인지, 동영상인지를 정해주는 것이고 attribute는 해당 tag가 어떠한 성질을 가지고 있는지 표현해주는 것입니다. 처음 html을 배울 때 tag를 아무렇게나 찍어도 화면에 다 찍혀서 그냥 몇몇 tag를 알기만 해도 front-end 끝이겠구나 했는데 큰 오산이었더라구요 ㅎ; 보여주고자 하는 화면의 구조를 잘 짜두어야 유지/보수도 쉽고 사용하기도 편하다고 합니다. 하지만 일단 tag를 알아야 구조적으로 사용을 하든지 하겠죠? 우선 문서 구조를 나..
웹 프로그래밍이란 쉽게 이해하자면 크롬, 익스플로어 등 브라우저를 통해서 들어갈 수 있는 사이트를 만드는 것이라고 할 수 있습니다. 웹 프로그래밍은 Front-End, Back-End로 구성되어있습니다. Front-End는 여러분들이 사이트를 들어갔을 때 보이는 화면입니다. -어떤 콘텐츠를 보여줄 것인지 (HTML) -어떤 디자인으로 보여줄 것인지(CSS) -화면에 어떤 변화를 줄 것인지(JAVA Script) 크게 위 3가지를 표현하기 위해 Front-End 작업을 한다고 할 수 있습니다. Back-End는 앞서 들어간 사이트가 어떻게 동작하는지에 대한 부분입니다. 제 블로그를 예로 들자면 글 제목을 클릭하면 그 글의 내용이 보이는 화면으로 넘어가게끔 한다던가, 로그인을 한다던가 등의 화면 뒤편에서 일..